<\/span>Why should you use Figma?<\/strong><\/span><\/h2>A few of the many features that make this tool truly special include:<\/p>
– Web-based files that allow you to save space<\/strong> on your computer<\/p>– Both web and desktop app interfaces to work fast<\/strong> and without interruptions<\/p>– Annotation tools to facilitate real-time<\/strong> collaboration<\/p>– An accompanying mobile app to view prototypes, Figma Mirror<\/p>
– Accessible pricing: it’s free<\/strong> for individuals<\/p>– Works on macOS & Windows<\/strong><\/p>– You can import files from Sketch<\/strong> (it doesn’t work the other way around)<\/p><\/span>What can you create with Figma?<\/strong><\/span><\/h2>While initially adopted by product designers, Figma offers a wide range of design possibilities beyond that field. Aside from wireframes, prototypes, and UI elements, you can also use it to create mockups, social media posts, icons, collages, marketing collateral, and even logos. <\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084040\/Figma-Guide-Basics-1-1024x683.jpeg\")
Matcha Skincare Instagram Template<\/a><\/figcaption><\/figure><\/span>How to get started<\/strong><\/span><\/h2><\/span>1. Create your account<\/strong><\/span><\/h3>Head over to figma.com<\/a> and create your free account. Then select Design File +<\/strong> from the right-side menu.<\/p>Tip<\/strong>: You can also take the quick guided tour<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084107\/Figma-Guide-Basics-7-1024x530.png\")
<\/figure><\/span>2. Interface<\/strong><\/span><\/h3>Let’s have a quick look at Figma’s interface.<\/p>
Tools menu<\/strong>: In the top left menu you will find the tools that you will use to create your designs. Have a look around and explore these options:<\/p>- Main menu<\/li>
- Move tools<\/li>
- Region tools <\/li>
- Shape tools <\/li>
- Drawing tools<\/li>
- Text<\/li>
- Hand tool<\/li>
- Add comment<\/li><\/ul>
Layers\/Assets\/Page 1:<\/strong> In the left-side menu, you will find every element that you create. We’ll go into details later on.<\/p>Inspect panel<\/strong>: In the right-side menu, you will find the property values for your work. You can see there are three different tabs:<\/p>- Design<\/li>
- Prototype<\/li>
- Inspect<\/li><\/ul>
![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084112\/Figma-Guide-Basics-5-1024x531.png\")
<\/figure><\/span>3. Canvas<\/strong><\/span><\/h3>When you create a new design file, the canvas will appear. This is your full workspace in Figma.<\/p>
<\/span>4. Frames<\/strong><\/span><\/h3>Frames are Figma’s artboards, if you’re familiar with those from Adobe’s Creative Cloud apps. To create a frame, select F<\/strong> on your keyboard or head over to the Tools menu<\/strong> and click on the Frame<\/strong> icon<\/strong>. Select from a wide range of presets:<\/p>- Phone<\/li>
- Tablet<\/li>
- Desktop<\/li>
- Watch<\/li>
- Presentation<\/li>
- Paper<\/li>
- Social media<\/li>
- Figma Community<\/li><\/ul>
Tip<\/strong>: Frames are the parent object, allowing you to control every child (element) within.<\/p><\/span>5. Vector shapes & colors<\/strong><\/span><\/h3>You can select among the default shapes available in the Tools menu<\/strong>:<\/p>- Rectangle<\/li>
- Line<\/li>
- Arrow<\/li>
- Ellipse<\/li>
- Polygon<\/li>
- Star<\/li>
- Images<\/li><\/ul>
Tip<\/strong>: Hold shift<\/strong> to keep proportions in place.<\/p>Pen Tool<\/strong><\/p>If you want to get creative or you have a complex shape to draw, you can use the pen tool (P<\/strong>). <\/p>Colors<\/strong><\/p>Select the color of the shape from the right menu, under Fill<\/strong>. <\/p><\/span>6. Layers<\/strong><\/span><\/h3>They automatically appear once an element is created. You can access them in the left menu.<\/p>
Tip<\/strong>: You can nest frames within other frames!<\/p><\/span>7. Groups<\/strong><\/span><\/h3>You can group layers with cmd + G<\/strong> to keep your files organized.<\/p><\/span>8. Pages<\/strong><\/span><\/h3>Pages are in the left-side menu<\/strong> and you can use them for different sections of your project, e.g. Wireframes, UI.<\/p><\/span>9. Images<\/strong><\/span><\/h3>If you want to use images, you can easily drag & drop them into the canvas. Figma allows adjustments if you click on the image icon<\/strong> in the Inspect panel<\/strong> like exposure<\/strong>, contrast<\/strong>, saturation<\/strong>, etc.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084000\/Figma-Guide-Basics-11-1024x529.jpg\")
<\/figure>Tip:<\/strong> There’s also a Creative Market plugin for Figma<\/a> you can use to pull thousands of assets that are ready to license and use, without leaving the app.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12091954\/Figma-Plugin-CTA.jpg.webp\")
<\/a><\/figure><\/p>
<\/span>10. Typography<\/strong><\/span><\/h3>Press T<\/strong> or search for the icon in the Tools menu <\/strong>and start writing. Figma has all the Google Fonts installed already, but if you want to use other fonts you can install Figma Font Helper <\/strong>and work with your own desktop fonts. You can play with the text properties in the Inspect panel<\/strong>, such as size<\/strong>, color<\/strong>, letter<\/strong> spacing,<\/strong> etc.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084100\/Figma-Guide-Basics-6-1024x530.png\")
<\/figure><\/span>11. Styles<\/strong><\/span><\/h3>Styles are a super cool Figma feature that allows you to save repeatable properties like colors<\/strong>, text<\/strong>, shadows<\/strong>, and grids<\/strong>. You’ll save a ton of time just relying on these definitions as you work through your frames.<\/p>To define a color style, <\/strong>pick your hue, head over to the Inspect panel <\/strong>under Fill<\/strong>, click on the icon with the four dots (Styles<\/strong>), and then on +<\/strong> to name and save your color.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12083942\/Figma-Guide-Basics-14-1024x530.jpg\")
<\/figure>To create your own text styles, click on the Style button<\/strong> in the Inspect panel<\/strong> and click on +<\/strong>. Done! You can repeat this same process to store grids and effects like shadows and blurs.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084008\/Figma-Guide-Basics-10-1024x531.jpg\")
<\/figure><\/span>12. Components<\/strong><\/span><\/h3>Components are elements that help create consistency in your projects. There are Master Components <\/strong>and Instances<\/strong>. The Master Component<\/strong> is the one setting the property values; editing this one will affect all of its instances.<\/p>To create a component, select a group of layers and right-click Create component<\/strong> or press opt + cmd + K<\/strong>.<\/p><\/span>13. Constraints<\/strong><\/span><\/h3>Constraints define how objects behave when a frame is resized. The constraints are set by default to Top and Left. You can edit these in the Inspect panel<\/strong> under Constraints<\/strong> by selecting the elements in your frame. You can apply them on both the x (horizontal) and y (vertical) axis.<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084032\/Figma-Guide-Basics-9-1024x529.jpg\")
<\/figure><\/span>14. Keyboard shortcuts<\/strong><\/span><\/h3>To speed up your work, you can find the keyboard shortcuts in the bottom right corner of the screen. Click on the circle button ?<\/strong> (Help and resources<\/strong>) > Keyboard shortcuts<\/strong>, or simply press ^ + shift + ?<\/strong>.<\/p><\/span>15. Prototyping<\/strong><\/span><\/h3>Prototyping is very useful to form an idea of how users can interact with a product you’ve designed. You can create connections, interactions, animations, and preview your prototype. Here are some basic definitions:<\/p>
- Connections <\/strong>are made between frames and elements within the frames. Make sure to click on Prototype<\/strong> from the Inspect panel<\/strong> to create the connections. Click on your element\/frame and you’ll see a circle appearing. Click and hold to direct your connection to a new frame.<\/li>
- Interactions and animations<\/strong>: Once you’ve created your connection, the Interaction details <\/strong>will appear. Choose from a wide range of interactions and animations.<\/li>
- Prototypes: <\/strong>When you’re ready to play with your prototype, click on the ▶ button on the top-right of your screen.<\/li><\/ul>
Tip<\/strong>: Install the Figma Mirror<\/strong> app for a realistic mobile experience<\/p>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12083934\/Figma-Guide-Basics-13-1024x530.png\")
<\/figure><\/span>16. Collaborating in real-time<\/strong><\/span><\/h3>You can work on the same project with your team in real-time. Here are some handy tools to make that easier:<\/p>
- Comments<\/strong>: Comments are great for sharing feedback with your team. You can access them in the top left menu or simply by pressing C<\/strong>.<\/li><\/ul>
![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12083950\/Figma-Guide-Basics-12-1024x530.png\")
<\/figure>- View mode<\/strong>: When you share your design, make sure you know in which mode it is. From the drop-down menu after you click on the Share button, select either can view<\/strong> or can edit<\/strong>. The view mode is great for sharing with developers.<\/li>
- Edit mode<\/strong>: To share your designs with your design team, make sure you have the edit mode<\/strong> set on.<\/li><\/ul>
<\/span>17. Exporting files<\/strong><\/span><\/h3>When it comes to exporting files in Figma, you’ll see several options. Keep the following in mind:<\/p>
– Both web and desktop app interfaces to work fast<\/strong> and without interruptions<\/p> – Annotation tools to facilitate real-time<\/strong> collaboration<\/p> – An accompanying mobile app to view prototypes, Figma Mirror<\/p> – Accessible pricing: it’s free<\/strong> for individuals<\/p> – Works on macOS & Windows<\/strong><\/p> – You can import files from Sketch<\/strong> (it doesn’t work the other way around)<\/p> While initially adopted by product designers, Figma offers a wide range of design possibilities beyond that field. Aside from wireframes, prototypes, and UI elements, you can also use it to create mockups, social media posts, icons, collages, marketing collateral, and even logos. <\/p> Head over to figma.com<\/a> and create your free account. Then select Design File +<\/strong> from the right-side menu.<\/p> Tip<\/strong>: You can also take the quick guided tour<\/p> Let’s have a quick look at Figma’s interface.<\/p> Tools menu<\/strong>: In the top left menu you will find the tools that you will use to create your designs. Have a look around and explore these options:<\/p> Layers\/Assets\/Page 1:<\/strong> In the left-side menu, you will find every element that you create. We’ll go into details later on.<\/p> Inspect panel<\/strong>: In the right-side menu, you will find the property values for your work. You can see there are three different tabs:<\/p> When you create a new design file, the canvas will appear. This is your full workspace in Figma.<\/p> Frames are Figma’s artboards, if you’re familiar with those from Adobe’s Creative Cloud apps. To create a frame, select F<\/strong> on your keyboard or head over to the Tools menu<\/strong> and click on the Frame<\/strong> icon<\/strong>. Select from a wide range of presets:<\/p> Tip<\/strong>: Frames are the parent object, allowing you to control every child (element) within.<\/p> You can select among the default shapes available in the Tools menu<\/strong>:<\/p> Tip<\/strong>: Hold shift<\/strong> to keep proportions in place.<\/p> Pen Tool<\/strong><\/p> If you want to get creative or you have a complex shape to draw, you can use the pen tool (P<\/strong>). <\/p> Colors<\/strong><\/p> Select the color of the shape from the right menu, under Fill<\/strong>. <\/p> They automatically appear once an element is created. You can access them in the left menu.<\/p> Tip<\/strong>: You can nest frames within other frames!<\/p> You can group layers with cmd + G<\/strong> to keep your files organized.<\/p> Pages are in the left-side menu<\/strong> and you can use them for different sections of your project, e.g. Wireframes, UI.<\/p> If you want to use images, you can easily drag & drop them into the canvas. Figma allows adjustments if you click on the image icon<\/strong> in the Inspect panel<\/strong> like exposure<\/strong>, contrast<\/strong>, saturation<\/strong>, etc.<\/p> Tip:<\/strong> There’s also a Creative Market plugin for Figma<\/a> you can use to pull thousands of assets that are ready to license and use, without leaving the app.<\/p> <\/p> Press T<\/strong> or search for the icon in the Tools menu <\/strong>and start writing. Figma has all the Google Fonts installed already, but if you want to use other fonts you can install Figma Font Helper <\/strong>and work with your own desktop fonts. You can play with the text properties in the Inspect panel<\/strong>, such as size<\/strong>, color<\/strong>, letter<\/strong> spacing,<\/strong> etc.<\/p> Styles are a super cool Figma feature that allows you to save repeatable properties like colors<\/strong>, text<\/strong>, shadows<\/strong>, and grids<\/strong>. You’ll save a ton of time just relying on these definitions as you work through your frames.<\/p> To define a color style, <\/strong>pick your hue, head over to the Inspect panel <\/strong>under Fill<\/strong>, click on the icon with the four dots (Styles<\/strong>), and then on +<\/strong> to name and save your color.<\/p> To create your own text styles, click on the Style button<\/strong> in the Inspect panel<\/strong> and click on +<\/strong>. Done! You can repeat this same process to store grids and effects like shadows and blurs.<\/p> Components are elements that help create consistency in your projects. There are Master Components <\/strong>and Instances<\/strong>. The Master Component<\/strong> is the one setting the property values; editing this one will affect all of its instances.<\/p> To create a component, select a group of layers and right-click Create component<\/strong> or press opt + cmd + K<\/strong>.<\/p> Constraints define how objects behave when a frame is resized. The constraints are set by default to Top and Left. You can edit these in the Inspect panel<\/strong> under Constraints<\/strong> by selecting the elements in your frame. You can apply them on both the x (horizontal) and y (vertical) axis.<\/p> To speed up your work, you can find the keyboard shortcuts in the bottom right corner of the screen. Click on the circle button ?<\/strong> (Help and resources<\/strong>) > Keyboard shortcuts<\/strong>, or simply press ^ + shift + ?<\/strong>.<\/p> Prototyping is very useful to form an idea of how users can interact with a product you’ve designed. You can create connections, interactions, animations, and preview your prototype. Here are some basic definitions:<\/p> Tip<\/strong>: Install the Figma Mirror<\/strong> app for a realistic mobile experience<\/p> You can work on the same project with your team in real-time. Here are some handy tools to make that easier:<\/p> When it comes to exporting files in Figma, you’ll see several options. Keep the following in mind:<\/p><\/span>What can you create with Figma?<\/strong><\/span><\/h2>
<\/span>How to get started<\/strong><\/span><\/h2>
<\/span>1. Create your account<\/strong><\/span><\/h3>
<\/figure><\/span>2. Interface<\/strong><\/span><\/h3>
<\/figure><\/span>3. Canvas<\/strong><\/span><\/h3>
<\/span>4. Frames<\/strong><\/span><\/h3>
<\/span>5. Vector shapes & colors<\/strong><\/span><\/h3>
<\/span>6. Layers<\/strong><\/span><\/h3>
<\/span>7. Groups<\/strong><\/span><\/h3>
<\/span>8. Pages<\/strong><\/span><\/h3>
<\/span>9. Images<\/strong><\/span><\/h3>
<\/figure><\/a><\/figure><\/span>10. Typography<\/strong><\/span><\/h3>
<\/figure><\/span>11. Styles<\/strong><\/span><\/h3>
<\/figure><\/figure><\/span>12. Components<\/strong><\/span><\/h3>
<\/span>13. Constraints<\/strong><\/span><\/h3>
<\/figure><\/span>14. Keyboard shortcuts<\/strong><\/span><\/h3>
<\/span>15. Prototyping<\/strong><\/span><\/h3>
<\/figure><\/span>16. Collaborating in real-time<\/strong><\/span><\/h3>
<\/figure><\/span>17. Exporting files<\/strong><\/span><\/h3>
![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12084047\/Figma-Guide-Basics-8-1024x530.jpg\")
<\/figure>![\"\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/12091312\/Figma-Finds-CTA.jpg.webp\")
<\/a><\/figure>