{"id":201154,"date":"2023-05-27T13:00:00","date_gmt":"2023-05-27T12:00:00","guid":{"rendered":"https:\/\/www.markup.io\/?p=201154"},"modified":"2024-02-16T00:31:28","modified_gmt":"2024-02-16T00:31:28","slug":"how-to-use-figma","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/","title":{"rendered":"How to use Figma: A step-by-step tutorial [2024]"},"content":{"rendered":"\n<p>Every artist needs an artboard, brush, palette, paint, and a vision to create the beautiful art we all love.<\/p>\n\n\n\n<p>\u2026or, in some cases, have no choice but to love.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/how-to-use-figma-arts.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/tlc-network-tlc-outdaughtered-W03Jk47aTxcxOHH8aJ\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a>&nbsp;<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Like artists, designers also require specific tools to create engaging design systems people can interact with.<\/p>\n\n\n\n<p>One that you\u2019ve probably heard of is&nbsp; Figma \u2013 a cloud-based design tool.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s cut to the chase!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Table of contents<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#set-up-account\">Step #1: Set up a Figma account<\/a><\/li>\n\n\n\n<li><a href=\"#create-frames\">Step #2: Create and modify new frames<\/a><\/li>\n\n\n\n<li><a href=\"#insert-objects\">Step #3: Insert images, text, and other objects<\/a><\/li>\n\n\n\n<li><a href=\"#save-styles\">Step #4: Save your styles<\/a><\/li>\n\n\n\n<li><a href=\"#add-components\">Step #5: Add components<\/a><\/li>\n\n\n\n<li><a href=\"#make-layouts\">Step #6: Make auto layouts<\/a><\/li>\n\n\n\n<li><a href=\"#prototypes\">Step #7: Test prototypes<\/a><\/li>\n\n\n\n<li><a href=\"#collaborate\">Step #8: Share projects and collaborate<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up-account\"><strong>Step #1: Set up a Figma account<\/strong><\/h2>\n\n\n\n<p>To get started on Figma, you need to have an account. So, let\u2019s open one together.&nbsp;<\/p>\n\n\n\n<p>First, go to <a href=\"http:\/\/www.figma.com\" target=\"_blank\" rel=\"noreferrer noopener\">www.figma.com<\/a> and click the <strong>Get Started<\/strong> button at the top right corner to sign up. If you have an account with them already, click the <strong>Log in<\/strong><em> <\/em>button instead.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-login.png\" alt=\"The log in button in the top right corner of Figma's homepage.\" class=\"wp-image-201716\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-login.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-login-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-login-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Since this is a tutorial, we\u2019ll go with the sign-up option. For that, Figma gives you two choices.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-account.png\" alt=\"The sign-up modal on Figma's homepage.\" class=\"wp-image-201707\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-account.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-account-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-account-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Click the <strong>Continue with Google<\/strong> button or enter your email and preferred password.&nbsp; You\u2019ll also be asked to input your name, specify the kind of work you do, and how you intend to use Figma.<\/p>\n\n\n\n<p>Then, click the <strong>Create account<\/strong> button. You\u2019ll be sent a verification email almost immediately. Open the message and tap <strong>Verify email<\/strong><em>,<\/em> and you\u2019re all set.&nbsp;<\/p>\n\n\n\n<p>Now, you should have access to a dashboard that looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-dashboard.png\" alt=\"Example of a Figma user's dashboard.\" class=\"wp-image-201710\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-dashboard.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-dashboard-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-dashboard-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Creating new projects<\/strong><\/p>\n\n\n\n<p>To create projects in Figma, you must be part of a team. If you already are, just join them and open their file browser. But if you don&#8217;t, click the <strong>Create new team<\/strong> button on the left side of the page and enter a team name. Then invite collaborators you&#8217;d like to work with you on the project.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-team.png\" alt=\"The 'Create a team' modal is where you name your team on Figma.\" class=\"wp-image-201709\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-team.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-team-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-team-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>After you\u2019ve created a team, you\u2019ll be taken to the team\u2019s page. From there, you can create a new project.<\/p>\n\n\n\n<p>So let\u2019s do that!<\/p>\n\n\n\n<p>Click on the <strong>New project<\/strong> button on the top right side of your team&#8217;s file page. Enter a name for the project if you&#8217;re on Figma&#8217;s Pro plan or select the Team project box to proceed if you&#8217;re on the free plan.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-project.png\" alt=\"An example of a Figma user creating a new project.\" class=\"wp-image-201713\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-project.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-project-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-project-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Voila! You\u2019ve created a new project.<\/p>\n\n\n\n<p>You can only create one project and three designs with the Free plan. But with the Pro plan, you can access unlimited projects and designs.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Adding a design file<\/strong><\/p>\n\n\n\n<p>Design files house the design you want to work on, and they can be added to the project\u2019s environment.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-design-file.png\" alt=\"An example of a Figma user creating a new design file.\" class=\"wp-image-201714\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-design-file.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-design-file-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-new-design-file-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Just tap the <strong>New design file<\/strong> button, and you\u2019ll be redirected to a new page that shows the Figma file like this. \ud83d\udc47<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-blank.png\" alt=\"Example of a blank design file in Figma.\" class=\"wp-image-201704\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-blank.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-blank-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-blank-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can give your design file a name when you first create it. The default name is \u2018Untitled,\u2019 but you can tap on it to change it, so it&#8217;s more descriptive.&nbsp;<\/p>\n\n\n\n<p><strong>Explore Figma templates<\/strong>&nbsp;<\/p>\n\n\n\n<p>Figma has a database of templates you can customize for your <a href=\"https:\/\/www.markup.io\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX designs<\/a>. To access them, head back to the project folder and select <strong>See all<\/strong>. It\u2019s just under the <strong>New Design<\/strong> button you clicked on earlier.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-templates.png\" alt=\"Categories of templates Figma offers, including user persona templates, customer journey maps, etc.\" class=\"wp-image-201720\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-templates.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-templates-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-templates-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Now that your Figma account is set up let\u2019s start creating new frames for your design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-frames\"><strong>Step #2: Create and modify new frames<\/strong><\/h2>\n\n\n\n<p>Frames are like boards on Figma. They represent the interface end users of the design will interact with. You can select different frames on Figma in which to place your design.&nbsp;<\/p>\n\n\n\n<p>To create new frames, open the design file and click the <strong>Frame<\/strong> tool in the top left-hand corner. Having trouble finding it? Look for the button that looks like a hashtag. You can also create new frames by pressing the letter <strong>F <\/strong>on your keyboard.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-modify.png\" alt=\"Example of a blank Figma frame.\" class=\"wp-image-201715\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-modify.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-modify-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-modify-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Choosing a frame size<\/strong><\/p>\n\n\n\n<p>Once you\u2019ve selected the frame tool, go to the left side of the page.&nbsp; Pick a frame from the selections available, and it\u2019ll appear on the canvas. Available frame sizes include most iPhones and Androids.<\/p>\n\n\n\n<p>For this tutorial, let\u2019s select the Surface Pro 8 frame:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-surface-pro-8.png\" alt=\"Example of the Surface Pro 8 frame.\" class=\"wp-image-201721\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-surface-pro-8.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-surface-pro-8-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-surface-pro-8-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>If you need a frame different from the ones available, you can draw your own by clicking and dragging the mouse.<\/p>\n\n\n\n<p><strong>Editing a frame\u2019s properties<\/strong><\/p>\n\n\n\n<p>After selecting a frame, you\u2019ll see a panel under <strong>Design<\/strong> on the right side of the page. There you can assign different properties to the frame as you see fit.&nbsp;<\/p>\n\n\n\n<p>For example, you can change the frame size by typing in your desired pixel size in the X, Y, W, and H columns.<\/p>\n\n\n\n<p>Other things you can do include filling the frame with color using <strong>Fill,<\/strong> adding effects by clicking <strong>Effects<\/strong>, and more.<\/p>\n\n\n\n<p><strong>Using layers<\/strong>&nbsp;<\/p>\n\n\n\n<p>On the left side of the screen is the <strong>Layers<\/strong> panel. Each time you add a new element or frame, a new layer is added. You can rearrange them by dragging and dropping them.&nbsp;<\/p>\n\n\n\n<p>You can also group layers to have a more organized file if you want to move them across different frames. To group layers, select all the elements. Press Ctrl+G if you\u2019re a Windows user or CMD+G on a Mac.&nbsp;<\/p>\n\n\n\n<p><strong>Vector shapes<\/strong><\/p>\n\n\n\n<p>If you want to use basic shapes (rectangle, circle, etc.), pick the square sign from the top of the page.&nbsp;<\/p>\n\n\n\n<p>For more complex shapes, icons, logos, or buttons, select the pen icon from the top menu or press <strong>P<\/strong> on your keyboard.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-complex-shapes.png\" alt=\"Examples of shapes you can draw in Figma.\" class=\"wp-image-201706\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-complex-shapes.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-complex-shapes-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-complex-shapes-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>With it, you can click anywhere on the frame to create the kind of shape you have in mind. Then, press <strong>Enter<\/strong> when you\u2019re done.&nbsp;<\/p>\n\n\n\n<p>If you want to modify the vector shape when designing, you can do so via the <strong>Properties<\/strong> menu on the right-hand side of the page.&nbsp;<\/p>\n\n\n\n<p>What&#8217;s a design without pictures? Here&#8217;s how you add them on Figma!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"insert-objects\"><strong>Step #3: Insert images, text, and other objects<\/strong><\/h2>\n\n\n\n<p>There are different ways to insert images into your frame on Figma. The most popular and simplest way is to drag and drop them into your work area.&nbsp;<\/p>\n\n\n\n<p>You can also click the <strong>Shape<\/strong> menu at the top of the page and select<strong> Place image\/video<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-place-image.png\" alt=\"Clicking the Shape menu to insert an image.\" class=\"wp-image-201725\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-place-image.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-place-image-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-place-image-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>When you click <strong>Open<\/strong>, a dialogue box will open, where you can select the images you want to use. Then, click OK to insert the pictures.&nbsp;<\/p>\n\n\n\n<p>Alternatively, press CMD+Shift+K or Ctrl+Shift+K, to open the dialogue box.<\/p>\n\n\n\n<p>If the image you want to use is from another place on Figma, select the image and press CMD+C or Ctrl+C. Head over to the frame you want to use and press&nbsp; CMD+V or Ctrl+V.&nbsp;&nbsp;<\/p>\n\n\n\n<p>But what if you want to insert the image into a different shape or frame?<\/p>\n\n\n\n<p>To do that, click on the frame.&nbsp; Select <strong>Fill<\/strong> from the <strong>Properties<\/strong> menu on the right side of the work area if you want to add color.&nbsp;<\/p>\n\n\n\n<p>You\u2019ll see a drop-down menu at the top-left of the color wheel: click it and select <strong>Image<\/strong> or <strong>Videos<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-image.png\" alt=\"Inserting an image into Figma.\" class=\"wp-image-201718\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-image.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-image-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-image-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>To choose an image, hover your cursor on the smaller window with black and white colors and click <strong>Choose Image<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-choose-image.png\" alt=\"Choosing an image to insert into a Figma design file.\" class=\"wp-image-201705\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-choose-image.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-choose-image-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-choose-image-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>A dialogue box will pop up so you can pick the images you want. Click <strong>Open<\/strong> to insert them into the shape or frame.&nbsp;<\/p>\n\n\n\n<p>If you want, you can edit the picture with the different parameters shown in the small window.&nbsp;<\/p>\n\n\n\n<p>To insert objects, click the square shape icon from the top menu to draw polygons, stars, arrows, lines, rectangles, and ellipses.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-objects.png\" alt=\"Adding objects to a Figma design file.\" class=\"wp-image-201727\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-objects.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-objects-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-insert-objects-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Select any shape, click on the frame, and drag it to your preferred size. For a shape with equal proportions, press down the shift key while you draw.<\/p>\n\n\n\n<p>Adding text on Figma is pretty straightforward too.&nbsp;<\/p>\n\n\n\n<p>Just click the <strong>T<\/strong> sign and tap on where you want the text on the frame to draw a text box. Then, start typing.&nbsp;<\/p>\n\n\n\n<p>To edit the text, click the text layer and double-click on the text to edit. You can also edit it from the <strong>Properties<\/strong> menu. There, you\u2019ll be able to change the text\u2019s color, font, and even edit the words in the content section.<\/p>\n\n\n\n<p>Now, if you\u2019re working on multiple design projects using Figma, wouldn\u2019t it be great to have saved styles that you could simply add to each project?<\/p>\n\n\n\n<p>To learn how to save styles, keep reading!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"save-styles\"><strong>Step #4: Save your styles<\/strong><\/h2>\n\n\n\n<p>By saving your styles, you can avoid having to redo the same design process over and over again.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/03\/how-to-use-figma-sonic.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/ThisIsMashed-animation-animated-mashed-f7qRd8qnJWvcd58jw7\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>For example, if you want the text headings of your design to have the same font, color, and size, you can create a style and save it as a reusable H2 style.&nbsp;<\/p>\n\n\n\n<p>Then, apply that style to the corresponding headings.<\/p>\n\n\n\n<p>Here\u2019s how to create a text style:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Insert text into the frame and format it to suit your desired style.<\/li>\n\n\n\n<li>Select the text with the style you want to save.<\/li>\n\n\n\n<li>Click the four dots style icon on the <em>Properties<\/em> menu.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-style.png\" alt=\"Creating a new text style in a Figma design file.\" class=\"wp-image-201708\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-style.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-style-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-create-style-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Tap on the + sign, give the style a name, add a description, and click <strong>Create style<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>To use the style, select the text you want formatted and click on the style icon to select it.<\/p>\n\n\n\n<p>Text isn\u2019t the only style you can save. Aside from text, you can also save colors, grids, and even effects.<\/p>\n\n\n\n<p>As we saw earlier, saved styles can help you reuse colors or effects in future projects. To do that, you\u2019ll need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a shape, object, or frame with the color or effect you want to save.<\/li>\n\n\n\n<li>Tap the four dots at the top corner of <strong>Fill<\/strong> (for color) or <strong>Effects<\/strong> on the <strong>Properties<\/strong> panel.<\/li>\n\n\n\n<li>Click the + sign, and assign a name and description to the style.<\/li>\n\n\n\n<li>Click <strong>Create style<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>You can follow the same steps when adding the text style to text whenever you need to reuse the saved templates.&nbsp;<\/p>\n\n\n\n<p>There\u2019s just one tiny drawback with saving a style; it\u2019ll only be available on the file you\u2019re working on.&nbsp;<\/p>\n\n\n\n<p>So, what if you wanna use the styles on other project files? You\u2019ll have to publish it to your team library.&nbsp; Here\u2019s how:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the canvas (the one housing the frame)<\/li>\n\n\n\n<li>Select the down arrow beside the file\u2019s name at the top of the page<\/li>\n\n\n\n<li>Select <strong>Publish library<\/strong> and follow the on-screen instructions&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-publish-library.png\" alt=\"Publishing a new style to a team library.\" class=\"wp-image-201723\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-publish-library.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-publish-library-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-publish-library-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>That&#8217;s about it for saving styles. This should help you save time when brainstorming, wireframing, or designing.<\/p>\n\n\n\n<p>To further simplify this process, you might want to consider adding reusable components to your design workflow.&nbsp;<\/p>\n\n\n\n<p>Don\u2019t worry, we\u2019ll unpack what it means and how to add them in the next section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-components\"><strong>Step #5: Add components<\/strong><\/h2>\n\n\n\n<p>Components are collections of UI elements, objects, or layers that you can repeatedly use across your design. They make it easy to maintain a consistent design to update or scale your work without stress.<\/p>\n\n\n\n<p>Let\u2019s assume you\u2019re working on <a href=\"https:\/\/www.markup.io\/blog\/web-design-process\/\">web design<\/a> and want the logo and name of the brand to appear across the site.&nbsp;<\/p>\n\n\n\n<p>Those are different elements that you can reuse. You could add both to a component and title it \u2018brand logo.\u2019 Then, add it to other frames.<\/p>\n\n\n\n<p>Follow these steps when adding components:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the left side of the workspace and select the layers you want to add to the component while pressing down the shift key.&nbsp;<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-add-components.png\" alt=\"Adding components to a Figma design file.\" class=\"wp-image-201703\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-add-components.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-add-components-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-add-components-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Then, click the component icon, which combines small diamonds at the top of the page, to group the layers together.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>You\u2019ll notice that both layers will be fused into a single layer with the new name: \u2018Component 1.\u2019 You can rename it by double-clicking on the name.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Next, create component icons or instances of a component.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>This refers to the use of iterations of the components in your design that are not in the initial component.<\/p>\n\n\n\n<p>To create a component icon, click on the <strong>Assets<\/strong> panel, the tab next to the <strong>Layers<\/strong> menu on the left side of the page.&nbsp;<\/p>\n\n\n\n<p>Select and drag the component&#8217;s name to the canvas, creating an instance. You can edit the component icon, which won\u2019t reflect on the original.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-instance.png\" alt=\"Creating an instance.\" class=\"wp-image-201717\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-instance.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-instance-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-instance-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Like styles, you can save components for other files or projects.<\/p>\n\n\n\n<p>Click anywhere on the canvas and select the down arrow beside the file\u2019s name at the top of the page.&nbsp;<\/p>\n\n\n\n<p>From the drop-down menu, click <strong>Publish library<\/strong> and follow the on-screen instructions to publish the component to the team library.&nbsp;<\/p>\n\n\n\n<p>This feature, however, is only available to Pro or Enterprise users.&nbsp;<\/p>\n\n\n\n<p>Still, in simplifying your processes, there\u2019s another thing you can do\u2026&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"make-layouts\"><strong>Step #6: Make auto layouts<\/strong><\/h2>\n\n\n\n<p>Auto layout is a function that lets you create a dynamic frame that expands or contracts when you change the content inside it.&nbsp;<\/p>\n\n\n\n<p>This will help you avoid having to adjust the frame repeatedly. It also lets you see whether your design works in real life with a single click.<\/p>\n\n\n\n<p>To begin, change layers to auto layouts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Write your text the way we showed you in Step 3 above<\/li>\n\n\n\n<li>Press shift+A to create an auto layout frame around the text. You should see a Frame 1 box appear around it.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-auto-layouts.png\" alt=\"Changing layers to auto layouts. \" class=\"wp-image-201702\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-auto-layouts.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-auto-layouts-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-auto-layouts-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>As you change the content, the box automatically resizes.&nbsp;<\/p>\n\n\n\n<p><strong>Nested auto layouts<\/strong><\/p>\n\n\n\n<p>Figma also lets you nest auto layouts, meaning you can have a frame within a frame for a more attractive user interface or UI design.&nbsp;<\/p>\n\n\n\n<p>To nest auto layouts, you should have multiple elements or objects you want to merge.<\/p>\n\n\n\n<p>Select them, press shift+A, and you\u2019ll have a nested auto layout.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It should include a parent frame and a child frame.&nbsp;<\/p>\n\n\n\n<p>And that\u2019s about it for auto layouts!<\/p>\n\n\n\n<p>You know how you can take a car you plan on buying for a test drive?&nbsp;<\/p>\n\n\n\n<p>Well, you can do the same for your interface design. But on Figma, it\u2019s referred to as testing prototypes, which we unpack next.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prototypes\"><strong>Step #7: Test prototypes<\/strong><\/h2>\n\n\n\n<p>Whether you\u2019re designing a mobile app, landing page, or website, you can test the user experience of either project on Figma\u2019s space in real-time. Testing will help you know what needs to be improved.&nbsp;<\/p>\n\n\n\n<p>To start testing, head over to the <strong>Properties<\/strong> menu on the right side of the page.&nbsp; Click the <strong>Prototype<\/strong> tab at the top of the panel.&nbsp;<\/p>\n\n\n\n<p>The first thing you\u2019ll likely see is the option to select the device type you want to preview the design on.&nbsp;<\/p>\n\n\n\n<p>If you already selected the device you were designing for when you created the frame, you won\u2019t see that option.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-prototypes.png\" alt=\"Creating prototypes.\" class=\"wp-image-201724\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-prototypes.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-prototypes-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-prototypes-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>To proceed,&nbsp; click the + sign beside <strong>Flow starting point.<\/strong>&nbsp;<\/p>\n\n\n\n<p>It will place a <strong>Flow 1<\/strong> text at the top left corner of the first frame to indicate that as the starting point of the design flow. If you don\u2019t want the selected frame as the first point, right-click the frame\u2019s name and pick <strong>Delete starting point<\/strong>.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-delete-starting-point-2.png\" alt=\"Deleting the starting point.\" class=\"wp-image-201728\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-delete-starting-point-2.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-delete-starting-point-2-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-delete-starting-point-2-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>After selecting the starting point, you must select a hotspot from the starting frame. A hotspot is an area or element users must click to be directed to the next page.&nbsp;<\/p>\n\n\n\n<p>To pick a hotspot, hover over the desired element and see a blue circle by the edge.&nbsp;<\/p>\n\n\n\n<p>When your mouse is directly on the circle, a plus sign will appear. Click and drag the hotspot (+) to connect it to the next screen. It should look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hotspot.png\" alt=\"Creating a hotspot.\" class=\"wp-image-201712\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hotspot.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hotspot-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hotspot-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>After making the connection, you should see an <strong>Interaction details<\/strong> panel.&nbsp;<\/p>\n\n\n\n<p>There you can choose an interaction type for the hotspot. For instance, select <strong>On tap<\/strong> if you want the user to tap the hotspot to go to the next page. You can also choose an animation from the menu to show the transition between both screens.&nbsp;<\/p>\n\n\n\n<p>Now, you can make more connections by selecting a hotspot on the second screen that, when users tap it, will link back to the first screen.&nbsp;<\/p>\n\n\n\n<p>When you\u2019re done, you can preview the web or app design by clicking the <strong>Play<\/strong> button at the top right corner of the screen.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re comfortable with the final designs, there\u2019s only one step left: invite team members or other stakeholders to collaborate.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"collaborate\"><strong>Step #8: Share projects and collaborate<\/strong><\/h2>\n\n\n\n<p>Sharing a project with your team, aka developer handoff, is easy on Figma. Just click the <strong>Share<\/strong> button at the top right corner of the page.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-share.png\" alt=\"Sharing a Figma file.\" class=\"wp-image-201722\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-share.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-share-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-share-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Then, enter the email of other users or collaborators you want to share it with.&nbsp;<\/p>\n\n\n\n<p>A shortcut is just to copy the link and share it with stakeholders. If you go with this option, update the security setting to <strong>Anyone with the link<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>And with that, we\u2019ve come to the end of this tutorial.&nbsp;<\/p>\n\n\n\n<p>Whew, that was a lot! But we\u2019re confident that you\u2019ve gained a lot from this guide.&nbsp;<\/p>\n\n\n\n<p>Just one more thing, and we can call it a day.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wrapping it up<\/strong><\/h2>\n\n\n\n<p>So far, you\u2019ve learned how to use Figma for designs, mockups, and as a prototyping tool.&nbsp;<\/p>\n\n\n\n<p>What you need, in addition to that, is a more streamlined design process that can help you get clear contextual feedback on your visuals.&nbsp;&nbsp;<\/p>\n\n\n\n<p>While Figma allows you to add comments, you can do much more with <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>.&nbsp;<\/p>\n\n\n\n<p>More specifically, you can optimize reviews, implement feedback, and keep track of the comments as you resolve them.&nbsp;<\/p>\n\n\n\n<p>There\u2019ll also be less confusion for clients who probably won\u2019t get the hang of the design tool you\u2019re using.&nbsp;Feel free to <a href=\"https:\/\/app.markup.io\/signup?trial=true?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=how-to-use-figma&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">claim a free 30-day trial with MarkUp.io<\/a> to see for yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every artist needs an artboard, brush, palette, paint, and a vision to create the beautiful art we all love. \u2026or, in some cases, have no choice but to love. Like artists, designers also require specific tools to create engaging design systems people can interact with. One that you\u2019ve probably heard of is&nbsp; Figma \u2013 a &hellip; <a href=\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":201646,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-201154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Figma: A step-by-step tutorial [2024] - Markup.io<\/title>\n<meta name=\"description\" content=\"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Figma: A step-by-step tutorial [2024] - Markup.io\" \/>\n<meta property=\"og:description\" content=\"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-27T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-16T00:31:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\",\"url\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\",\"name\":\"How to use Figma: A step-by-step tutorial [2024] - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png\",\"datePublished\":\"2023-05-27T12:00:00+00:00\",\"dateModified\":\"2024-02-16T00:31:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Figma: A step-by-step tutorial [2024]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Figma: A step-by-step tutorial [2024] - Markup.io","description":"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/","og_locale":"en_GB","og_type":"article","og_title":"How to use Figma: A step-by-step tutorial [2024] - Markup.io","og_description":"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.","og_url":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/","og_site_name":"Markup.io","article_published_time":"2023-05-27T12:00:00+00:00","article_modified_time":"2024-02-16T00:31:28+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/","url":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/","name":"How to use Figma: A step-by-step tutorial [2024] - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png","datePublished":"2023-05-27T12:00:00+00:00","dateModified":"2024-02-16T00:31:28+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"This beginner to mid-level tutorial on how to use Figma explains all the essential steps for creating a successful design project in this popular tool.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/how-to-use-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/how-to-use-figma-hero.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/how-to-use-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"How to use Figma: A step-by-step tutorial [2024]"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=201154"}],"version-history":[{"count":7,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201154\/revisions"}],"predecessor-version":[{"id":203108,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201154\/revisions\/203108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/201646"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=201154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=201154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=201154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}