▶️ Beginner 1: Explore ideas

Related Videos

• ▶️ Beginner 2: Create designs
  We're exploring other ways of learning and exploring Figma. This article is a written version of our Figma for Beginners: Create designs video tutorial!

  While building our low-fidelity wireframes, we learned how to use tools and adjust properties of our layers to change their appearances. We can apply these same skills to create higher-fidelity designs.

  In this tutorial, we'll introduce color and typography, place more emphasis on precision and accessibility, and explore features that speed up the design process in Figma.

  You may consider these choices at different points in your process. That's fine too, there isn't one journey or path to a finished design.

  Use pages

  In the previous tutorial, we created some wireframes for our social media app for pets, Petma! To make it easier for our team to find our designs, we'll keep our explorations in the same file.

  Figma lets you create multiple pages, each with their own canvas. We can view and navigate pages in the Layers panel of the left sidebar. Click the plus icon to add a page, and give it a descriptive name.

  Let's start by building out the home page of our social media app. This is a feed that shows us posts from the pets we follow.

  We'll start in a similar way to our wireframing. Press F to select the frame tool, and choose the Google Pixel preset. Then, press the R key and create a rectangle for the image of our post.

  Grids and margins

  We want some space, a margin, between the image and the frame edge. So we'll change the dimensions of the rectangle to 379 by 285, and center the image within the frame.

  Because our frame is 411 points wide, this gives us a margin of 16 points on either side. We can check the margin by selecting the rectangle, holding down alt or option, and hovering the cursor over the frame. Figma will display the distance between the two. Measure distances between layers →

  We can use this function to make sure our objects are laid out precisely. We can also use grids to quickly and consistently align layers.

  To enforce a grid system, select a frame and click in the Layout grid section of the right sidebar. We can click the grid icon to customize our grid size, or change the grid style to columns or rows.

  We're not going to focus on layout grids for this video, so we'll hide them using the keyboard shortcut:

  • Mac: ⌃ Control-G
  • Windows: Control + Shift + 4

  Tip! Working with an 8-point-grid system? You can change the grid size to 8. Learn more about layout grids →

  Place image and image fills, corner radius

  The Petma brand is fun and friendly, and we want that to come across in our designs. One way to do that is to round any harsh, pointy corners. Select our rectangle and change the corner radius to 8.

  Then, we'll add an avatar for the user. Press the O key to select the ellipse tool and hold down the shift key to draw a perfect circle. We'll make sure it's 40x40, align it to the left edge of the image, and position it 8 points above.

  We've been calling these two shapes "images", but they're really not images yet! They still only have a solid grey fill.

  1. Add images to shapes either of these ways:
     • Click shape menu in the toolbar and select Place image.
     • The keyboard shortcut ⌘Command-Shift-K (Mac) or Ctrl + Shift + K (Windows).
  2. Select two images to act as our placeholders.
  3. Click Open to confirm. Our cursor now shows we have two images to place. We can see a preview of the first image next to our cursor
  4. Click the avatar to replace the current fill with that image.
  5. Click to add the second image to the main image of the post.

  Text and styles

  Now we'll add a text layer for our pet's name. Let's press T, click to add a text layer, and type "Name". We can explore all the properties relating to text in the Text section of the right sidebar. Explore text properties →

  The Rubik font matches the fun and playful nature of our app, so we'll select that and change the size to 16. We'll align our text and avatar layers to vertical center. Then use our arrows keys to position them 16 points apart.

  We need a description to go alongside our image, so we'll duplicate the text layer and add some placeholder text. We'll adjust the width of the text layer to 397 to match the image.

  If we want to change the font, size, or weight of our text, we'd have to select them all before updating. Or update them individually. This is manageable with only two text layers, but updating hundreds of text layers later in the design process would be painful!

  To save ourselves some time, we'll use Styles. Styles are re-usable properties we can apply to objects. If we need to make changes to the style at a later point, every object using that style will also be updated.

  1. With our text layer selected, click in the text section of the right sidebar.
  2. Click to add a new style
  3. Give it a name "Body"
  4. Click Create Style

  Now if we view the text properties in the right sidebar, we can see our style applied. We can apply the style to other layers too.

  1. Select the description.
  2. In the Text section, click .
  3. Select the style from the list.

  Color styles and accessibility

  Styles aren't just for text. You can also create color styles for fills and strokes, layout grid styles - like the 8 point grid system we mentioned earlier - or effect styles for things like drop shadows and blurs. Let's create a color style while we're here!

  Our text layers are black on a white frame. This ultra-high contrast can cause strain on a person's eyes. Let's reduce the contrast to make reading more comfortable. Learn more about accessibility and inclusion in design →

  This time, let's select both layers and change the fill to a lighter grey. Let's try this color: #888. Hmmm, this is too light, which could make it hard for low-vision readers to see.

  We've already installed the Stark plugin from the Figma Community, which we can use to check the contrast of our layers. Click on the layer and go to the menu, select Plugins and then Stark. We'll choose Contrast Checker from the options.

  Oh. Our intuition was right, this color is too light! Let's change this to a darker grey with just a hint of purple #1F132A and check the contrast again.

  We can rerun our last plugin, without opening the menu, using the shortcut:

  • Mac: ⌥Option ⌘Command + P
  • Windows: Alt Control P

  It passes! 🎉🥳 Now that we have an accessible color we're comfortable with, we'll turn it into a color style. We can create this color style from the fill section of the right sidebar.

  To see the Styles we've created, we can click on the canvas to deselect everything, and view them in the right sidebar. We can see both our text and color styles.

  We can click the adjustment icon to make changes to our style. Let's update the font size of our body text to 18. The text layers that use this style are also updated.

  This has had an unintended consequences of moving our perfectly placed layers slightly out of alignment! If only there was a way for the layout of our design to reflow when we make changes. Lucky for us, there is!

  Use Auto layout

  Auto layout is a property you can add to frames. It allows you to create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

  Auto layout is a powerful feature with many properties. It can save you so much time, but it can also feel a little daunting. We'll explain some key properties as they come up, but we encourage you to learn more about Auto layout in our other educational resources.

  Layers in an auto layout frame can only align in single direction: Horizontal or Vertical.

  If we select our post layers and add auto layout using the shortcut Shift + A, our layers form a single vertical auto layout frame. Hmmmm. Let's undo that using the keyboard shortcut:

  • Mac: ⌘Command-Z
  • Windows: Ctrl + Z

  Instead, we need to create a horizontal auto layout frame for our avatar and name, then combine this with the other layers in our post inside a vertical auto layout frame.

  Select the avatar and name layers and create an auto layout frame using the shortcut Shift + A. By default, our auto layout frame already grows to accommodate the size of its contents. If we were to change this text to something longer, the auto layout frame grows with it.

  We have the auto layout frame selected. Let's press Enter to select the layers one level below our current selection. Now we can align our selection using the align horizontal centers and align vertical centers tools.

  Great! Let's rename our new auto layout frame to Author info.

  Let's select our first auto layout frame, and the other layers in our post, and add Auto Layout again using Shift + A. Figma will:

  • Recognize the existing spacing between those layers
  • Set the space between items property to 8
  • Respect the spacing, regardless of how we change the contents within the frame.

  If we were to change our text styles again, we'd no longer have any alignment issues. But, if the description gets too long, it goes past the other layers in our frame. That's not what we want!

  The description layer currently has a horizontal resizing property of hug contents. This means its width will grow or shrink to accommodate the text.

  Let's change this to Fill container, so it will take up all available space instead. When it runs out of space, it will wrap to a new line. Purrrfect!

  This also sets the text resizing property to auto height. We can adjust the resizing properties in the text section of the right sidebar.

  The final thing we want to do is give our post more empty space around its outer edges. You may have heard of this concept as white space, negative space, or giving objects "room to breathe".

  The way we achieve this is through the padding property. Let's add 16 points of padding around the items within our frame. Adding the padding shifted our frame a bit, so we'll just recenter it and we're good to go!

  Create and use components

  We know that our app's feed will have many posts from our users, so we need some copies of the post we've been crafting!

  To make it easier to change aspects of our posts in the future, we can turn this into a component. Before we do, let's give our layers some more descriptive names.

  Let's turn this into a component by selecting it and choosing create component from the toolbar, or the shortcut:

  • Mac: ⌥ Option - ⌘ Command - K
  • Windows: Ctrl + Alt + K

  We probably don't want our main component to live inside our designs. To make it easier for our team to find that component, we'll create a page for our components. In the pages section of the layers tab, click and name the page Components.

  Now we can move our component to the new page. Right-click on the main component and select Move to page > Components.

  We can now access this component in the Assets panel of the left sidebar. Any components we create in this file are grouped under local components. Let's drag an instance of this component into our frame. Then we'll make a few copies.

  Clip content

  We want to add some real content to our posts. At the moment, our frame has clip content applied. The Clip content setting is great when we want to hide the parts of our layer that extend beyond the frame's bound.

  As we want to edit the contents of our posts, we'll uncheck the Clip content box in the right sidebar.

  Our descriptions will vary in length, which will affect how much space each post takes up in our feed. Let's create an Auto Layout frame for our posts, adjust the space between items to 8, and rename the frame to "feed".

  Now, if we edit the descriptions, the other cards will shift and adjust to preserve the spacing. Auto layout is saving us a lot of time!

  Override properties

  Let's use Place image to add real content to our posts. Figma supports static images as well as animated GIFs for fills. GIFs don't play in the canvas, but we'll see it in action when we view our prototype later.

  When we change properties of an instance, like we did by adding a new image, we are performing an override. Overrides only apply to the specific instance and don't affect the main component.

  We can use overrides to change lots of aspects of an instance - the contents of a text layer, strokes and fills, and effects like blurs and shadows.

  There are some properties that we can't override. This includes the order of our layers, and any constraints or layout grids we've applied. Learn more about supported overrides →

  Create icons with vector networks

  Our app is really starting to take shape. But, we're missing a navigation bar at the top of the screen. It should contain a way search for users and posts, and a menu, which we'll use to navigated around our app.

  As part of that process, we'll need to create menu and search icons for our navigation bar.

  Icon design is a discipline of its own and there are entire programs dedicated to their creation. You don't have to become an icon design master to create custom shapes and intricate icons in Figma. Try browsing the Figma Community for some inspiration!

  We can combine basic shapes to create icons. Or we could use the pen tool to create our own custom shapes from scratch. We'll start by creating a 32 by 32 frame for our icon.

  We want precision for this kind of work, so we'll use the shortcut Shift + 2 to zoom to our selection. Next, we'll select the Pen tool and enter vector edit mode.

  Note: Any shapes we create with the pen tool are vector networks. Vector networks allow you to create lines and curves that connect two or more points. Unlike traditional vector paths where you need to plot points on a single closed path, Vector networks allow you to create complex shapes that are made up of multiple paths.

  Make a menu icon

  1. Click on a spot in the frame to create the first point, when we move the cursor, we can see a line extending from our first point.
  2. Hold down Shift to draw a perfectly horizontal line.
  3. Click again to add a second point.
  4. Save your shape and exit vector edit mode by hitting the Enter key.

  We can adjust its position and dimensions, to ensure its width is 14. Then we can duplicate it twice to create our other two lines.

  We want to round the ends of our lines:

  1. Select our lines
  2. In the Stroke section of the right sidebar, select the  round cap. Much better!
  3. Finally, drag to position them in the center of the frame.

  We've adjusted some of the basic properties of our menu icon, but there's more properties to customize. Try adjusting the stroke weight, or explore the advanced stroke menu. Adjust stroke properties →

  Let's rename our frame to "icon / menu", turn it into a component, and send it to the components page.

  Make a search icon

  Let's make one more icon, a magnifying glass for search!

  1. Start the same as before, with a 32 by 32 frame.
  2. Use the ellipse tool to draw a 16 by 16 circle.
  3. Switch the fill and stroke properties using the Shift + X shortcut.
  4. To draw the handle of our magnifying glass, we'll use the pen tool.
  5. Hold Shift to snap to a 45 degree angles while drawing, and overlap the circle.
  6. We want to round the line again, but this time, we only need to round one point. Press the Enter key to access vector edit mode.
  7. Select just the point we want to edit, and change the cap to round.
  8. Hit Enter again to leave vector edit mode.

  We need a way to combine these layers. Boolean operations allow us to create new shapes, without modifying the underlying layers. There are four boolean operations:

  • Union
  • Subtract
  • Intersect
  • Exclude.

  We'll select both of our layers and choose Union selection to combine these two shapes into one. Our layers now have one fill color. We can now position the union group in the center of the frame.

  Let's rename our frame to "icon / search", turn it into a component, and send it to the components page.

  Create our navigation bar

  Next, we'll create a navigation bar component to sit at the top of our screen. This will incorporate the icons we've just created.

  Let's head over to our components page to create a navbar alongside our other components.

  1. Our navbar will take up the full width of our screen, so we'll create a frame that's 411 by 80.
  2. Now we'll add some icons. Open the Assets tab, drag in an instance of our menu, and place it on the left side of the frame.
  3. Make sure it's 8 points from the left and bottom.
  4. Repeat for the search icon on the right side.
  5. For this icon, change the horizontal constraints to right.

  We need to add a logo and a status bar to our navigation bar. To save you some time and through the magic of editing, we'll use some components we created earlier.

  1. Grab the Petma logo from the assets panel and drop it in the center of our frame.
  2. Set the horizontal constraints to center.
  3. Create an instance of the status bar, place it at the top .
  4. Set the constraints to left and right.
  5. Rename this to "navbar"
  6. Turn it into a component.

  If we return to our design page, we can now drag in an instance of our navbar component, and place it at the top of the page, then reposition the feed just below that.

  FAB, Go to Component, Return to Instance, and Effects

  The last component we want to add to our designs is a floating action button. This button will be used to create a new post in our feed. We created this component earlier, which consists of a circle and a plus icon.

  Let's drag a copy of that into our frame and place it 32 points from the bottom right corner, and set the constraints to bottom and right to match.

  This looks pretty good, but we want the button to look it's above the rest of the content. It is a floating action button after all.

  With the instance selected, we can click reveal in library in the right sidebar to take us directly to the main component.

  Under Effects in the right sidebar, click the plus icon to add a drop shadow. Shadow is a great way to communicate elevation.

  We can click the effects icon to open the settings and make this drop shadow softer by changing the blur to 12.

  With the main component selected, we can click the notification at the bottom of the screen to go back to where we were working.

  Tip! You can also customize the offset and spread of the shadow. Learn more about shadow effects →

  Scrolling, fix position, and device frames

  These are all of the elements we want to include in our home page. Let's see how it looks by presenting it!

  Presentation view allows us to preview our designs in the browser. We can use Present when building interactive prototypes, running usability tests, or even presenting slides.

  1. Click the Present in the toolbar to open presentation view in a new tab. We can make our prototype more realistic by adding a device frame.
  2. Open the Prototype tab, click Show prototype settings.
  3. Choose a device frame from the list.
  4. See how that looks in presentation view. Not bad!

  Tip! If you don't like the way your prototype displays, you can cycle through different view options using the Z key.

  The feed extends past the bottom of the device, but we can't scroll down to see it. Let's head back to the editor to customize the scrolling behavior.

  1. Select the frame.
  2. Set the overflow behavior to Vertical scrolling.
  3. Back in Presentation view, scroll to access the rest of our posts in the feed.

  But wait! We don't want our navbar or FAB to scroll.

  1. In the editor, we'll select both layers.
  2. Switch to the Design tab in the right sidebar.
  3. In the Constraints section, check the box next to Fix position when scrolling.

  In the layers panel, we can see Figma has moved our status bar to a new FIXED section at the top of the frame. If we scroll up and down in presentation view, both layers stay in place.

   

  Wow! We covered a lot of features in this video. If you got confused along the way, or have any questions, don't worry - Figma's Help Center has hundreds of helpful resources to explore.

  When we check back again, we're going to create an interactive prototype, share it with our team, and incorporate their feedback into our final designs.

  Tutorial 1: Explore ideas Tutorial 3: Build prototypes
• ▶️ Beginner 3: Build prototypes
  We're exploring other ways of learning and exploring Figma. This article is a written version of our Figma for Beginners: Build prototypes video tutorial!

  In the last tutorial of our Figma for beginners series, we created a single screen of our app. To save time, we've built out the other screens in our application, including a menu, profile, and an interface for searching the app. Let's create an interactive prototype to put it all together.

  Prototypes are a great way for us to visualize how our final app will look. They let us define pathways, explore interactions, and test out ideas, before we invest in building the real thing. Guide to prototyping in Figma →

  We can create multiple prototypes within a file and keep them organized on different pages. Let's duplicate the page of our existing designs to get started.

  Create prototypes

  Click on the Prototype tab in the right sidebar to switch to prototype mode. Here we create connections between frames so users can navigate the prototype, like a real application.

  Prototype connections are made up of three parts. A hotspot where the connection begins, the connection itself which stores the interaction details, and the destination.

  Top-level frames are frames directly on the canvas. In a prototype, this would be an individual screen in your design. For Figma to consider a frame as a top-level frame, you must not place it within other layers, such a group.

  The destination has to be a top-level frame, but a hotspot can be any layer: a top-level frame, a nested frame or component, a group, or a single layer.

  Create connections

  We want to create an interaction from the menu icon to the menu page. Because the menu icon is nested, we need to double-click to select it.

  Once the connection node appears, click the connection icon to create an arrow and drag it over the destination frame. Release to complete the connection.

  Let's create an interaction from the menu back to the home page. Select the home text layer, click and drag the arrow back to the home page.

  Set interaction

  Currently, our connection use the default Instant interaction setting. We'll cover the specifics of these interactions a little later on. Let's see how our prototype looks so far. With the home frame selected, click the present icon to open it in presentation view.

  At the bottom of the page we can see we only have two frames in our prototype, instead of all four. Once you add at least one prototype connection, Figma will only include frames with connections in presentation view.

  If we click on the menu icon, Figma switches to the menu frame. If we click the home option on the menu, it switches back to the home page. Great! Now that we have the basic mechanics working, we can customize the interaction.

  Back in the editor, we can view other aspects of the connection in the Interaction details menu. Here, we can select a trigger for the transition - like tap, click, or hover - as well as the action and destination.

  Choose transition animations

  We want users to be able to access the menu from a few places in the app, so this interaction needs to feel accessible. With the default instant animation, we lose the context of where we were in the app, and how we got there.

  Animations guide users through flows, and communicate relationships between different parts of our application.

  There's a few ways we could tackle this problem in Figma. We could create an overlay that makes the menu appear above our other screens. Or we could use smart animate to reveal the menu when you drag the current screen to the right.

  Both approaches make our menu feel easily accessible, and establish a hierarchy that positions the menu on a different level than our other screens.

  This also allows us to explore some of Figma's super cool prototyping features. But, they would take us well off the beginners path.

  1. Move in animates the menu so that it appears over the top of our existing screen. We're being shown some more information, but we don't feel like we've moved to a new location. This feels like a good fit.
  2. The menu icon is on the left-side of our screen, so our menu should move in from the left. Click in the interaction details panel to set the direction.
  3. We can set the duration to control how the speed of the transition, and use easing to make our animation feel less robotic. Learn more about prototype easing curves →
  4. When we return back to the home frame, the animation should be the reverse. We'll select Move out and choose the to move the menu back out.

  Now we have our first set of interactions!

  1. We can access the menu from both the search and profile screens, so let's create those interactions next. The Interaction details menu shows our last animation settings, let's update these to match the interaction.
  2. We'll repeat this process for the profile screen. We don't need to update the animation as Figma had applied the most recent one again.
  3. Now we'll create the interaction going back from the menu to the profile page, updating the animation to match.
  4. We can only access search from the home screen. We'll create a connection from the search icon that opens the search page. We'll use the push animation to make it feel like we are moving laterally between these two screens.
  5. Tapping cancel should take us back to the home page. We'll create a connection with a push animation that moves in that direction.

  Now that we have a working prototype, we're ready to get some feedback from the other members of our team. We can invite them to the prototype itself.

  Share prototypes

  We can share our prototype with our team by sending them a link.

  1. Click the Share button in the toolbar.
  2. Update the link sharing setting from only people invited to the file to Anyone with the link and set to can view.
  3. Click copy link to add the link to our clipboard.
  4. Share this with the team.

  Our team members avatars will show up in the toolbar as they join. We can click on someone's avatar to observe their actions as they move through the prototype. Observation mode is great when you're running a usability test!

  Comment on prototyps

  Anyone can add feedback, suggestions, or questions to prototypes using comments. Select to access the comment tool. Now we can click on a spot in the prototype to share our thoughts.

  • It looks like Jenny is adding some questions around the other pages listed in the menu. She's also pointed out that there is no way to interact with posts on the feed.
  • Rhyan's made a great observation that we're missing a back icon on the menu page, which might make it easier for users to dismiss the menu.
  • Stella loves this photo of Yuna!

  If we switch back to the editor and press C to select the comment tool, we can see the comments our team made on the prototype on our frames. This allows us to collect feedback in one place, incorporate advice, and resolve any outstanding comments.

  Incorporate feedback

  As Jenny mentioned, we want a way for our users to interact with posts. Let's add some icons to allow users to like, comment, and bookmark posts. Let's go to the components page.

  Here's some components we created earlier. We've placed them in a horizontal auto layout frame, and made them into a component. We can then place an instance of this component inside our the post component.

  When we switch back to our prototype, we can see the changes we made to the main component reflected in our instances. And because we built our feed using auto layout, our posts have adjusted accordingly.

  We'll finish up by incorporating Rhyan's feedback. We'll drag a back icon from the Assets panel into our menu frame. Then we'll switch to the prototype tab and add an interaction to this icon. We'll also update the action to Back.

  Note: Users can access the menu from any page. The Back action allows us to automatically return users to the previous page, without having to create separate connections.

  We did it! We built an interactive prototype of our designs, explored animations, and incorporated feedback from our design team.

  In our next video, we'll prepare our file for sharing assets with our writers and developers. We'll explore creating thumbnails, navigating the file as a viewer, copying code from the inspect tab, and exporting assets for production.

  Tutorial 2: Create designs Tutorial 4: Prepare for handoff
• ▶️ Beginner 4: Prepare for handoff
  We're exploring other ways of learning and exploring Figma. This article is a written version of our Figma for Beginners: Prepare for handoff video tutorial!

  Design is a collaborative process that involves stakeholders and collaborators across your company.

  • PMs can use Figma or FigJam for brainstorming or to give feedback through comments.
  • Writers can leave suggestions for copy, or edit it directly.
  • Researchers and designers can share and test prototypes.
  • And developers can inspect properties, copy code, and export assets.

  In this Figma for beginners series, we've demystified this process by following the evolution of a mobile app from initial wireframes to interactive prototype.

  Sharing early and often encourages collaboration with the right people, at the right time. There are a few things we can do to set up our files and make this a seamless process. Prepare files for handoff →

  Custom file thumbnails

  With the growing popularity of open design, members of your team might view and contribute to files at any point in time. To help orient people to our files, we can create custom thumbnails.

  This frame has the thumbnail dimensions of 1920 x 960. Anything within the 1600 pixel safe area, in the center of our frame, is usually visible in the file browser. We can include information like:

  • The current status of the file
  • An image or illustration of the file's contents
  • Information about our team
  • Hyperlinks to pages, frames, or external documentation, like specifications and requirements.

  Right-click on a frame in the canvas and choose Set as thumbnail. Now, when your team members see your file in the file browser, or open it in the editor, they can easily see that information. Set custom thumbnails →

  Invites and sharing permissions

  When and how you invite your teammates to your file may vary.

  Invite developers early to give feedback on the viability of your explorations or, near the end of the process when you're ready to handoff designs for production.

  Invite collaborators to your files with edit or view access. Viewers can still comment on files and prototypes and export static assets. They're also free!

  Embed files and prototypes in other websites, like your product management tools, or design systems documentation. 

  • Guide to sharing and permissions 
  • Share or embed your files and prototypes

  View only editor

  If you join the file as a viewer, Figma will look a little different.

  The simplified toolbar gives us access to the move tool to select layers, the comment tool to leave comments, and the hand tool to pan around the canvas.

  Viewers can also access presentation view to preview frames and interact with prototypes. As well as other settings like toggling layout grids, rulers, or pixel preview.

  Instead of the Design and Prototype panels in the right sidebar, we have access to the Inspect and Export panels.

  Inspect tab, documentation, and code

  When we select objects on the canvas, the Inspect tab displays the name of the selected layer, read-only properties, and code snippets for that object.

  Click Copy next to a property to add code snippets to your clipboard.

  If a component is using styles, Figma will display the style name in the corresponding field. This is useful if you want to use semantic naming that matches your production code.

  If you've added descriptions to your component, or links to documentation, you can see them in the inspect panel when you select an instance.

  Set up exports and exporting

  Viewers can also export assets. As a developer, we want to export these icons for development.

  We can select the icon, go to the Exports tab, and click the + icon to add a new export setting.

  Figma will create a default export setting of 1x PNG. Your designs aren't set to a specific resolution. You can change the size of the export using the multiplier. If you want to export assets at multiple resolutions, you can add another export setting.

  You can also change the export format. Figma supports exports in PNG, PDF, JPEG, and SVG. We'll change this to SVG and click Export to download a copy of this icon.

  If you want to share files with viewers, but prevent them from copying frames from the canvas or using Figma's export function, you can disable this setting in the share modal. Guide to exports in Figma →

  Congratulations! You reached the end of our Figma for Beginner's tutorial series! We covered a lot of topics during this video series, and there's no shortage of features to explore.

  The best way to improve at using Figma, is to get in there and play. For more inspiration of how others are using Figma, check out the Figma Community.

  If you get stuck, click the question mark in the bottom right corner of Figma to access our Help Center and video tutorials.

  Thanks for joining us! Let us know what you learned, or would like to see more of in the future, and subscribe to Figma on Youtube for the latest product and community news.