The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow 9781925836554

Table of contents :
The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
About the Author
Preface
Who Should Read This Book?
Conventions Used
Code Samples
Tips, Notes, and Warnings
Supplementary Materials
Chapter 1: Low-fidelity Prototyping
Designer, Meet Figma
Step 1: Creating a Frame (Artboard)
Step 2: Setting Up Auto Layout
Step 4: Creating a Text Layer
Step 5: Creating a Nested Frame
Step 6: Renaming “Frame 1”
Step 7: Setting Up a Layout Grid
Step 8: Creating the Component
Step 9: Creating a Rectangle Shape
Step 10: Styling the Rectangle
Step 9: Creating the Second Rectangle Shape
Step 10: Grouping the Rectangles
Step 11: Applying Auto Layout to the Navigation
Step 12: Creating the Menu
Step 13: Creating the “Closed” Variant
Step 14: Creating the Interactions
Step 15: Utilizing Instances
Step 16: Sourcing Content with Figma Plugins
Summary
Chapter 2: Collaboration
Step 1: Creating a Mobile Version
Step 2: Setting Up Some Flows
Step 3: Performing a Quick Test
Step 4: Renaming the Document
Step 5: Inviting Others to Collaborate
Step 6: Making a Comment
Step 7: Creating a Branch
Step 8: Starting an Audio Conversion
Step 9: Reviewing (and Merging?) the Changes
Summary
Chapter 3: High-fidelity Prototyping
Step 1: Creating a Color Style
Step 2: Creating a Text Style
Step 3: Creating more Text Styles
Step 4: Reuse the Color Style
Step 5: Taking a Closer Look at Components
Step 6: Exploring Documentation
Step 7: Publishing the Library
Step 8: Enabling and Using the Library
Step 9: Updating the Library
Step 10: Taking a Closer Look at Interactions
Step 11: Taking a Closer Look at Images
Summary
Chapter 4: Handoff
Step 1: Cleaning Up the Design
Step 2: Checking the Accessibility
Step 3: Specifying the Export Settings
Step 4: Seeing How Inspect Works
Summary
Chapter 5: Advanced Workflows
Requesting Data from an API
Creating a Variable-font Logomark
Creating a Button Icon
Adding Icons to the Button Component
Organizing the Design System Library
Tidying Up
Summary
Plugins to Check Out

Citation preview

The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow Copyright © 2023 SitePoint Pty. Ltd. Ebook ISBN: 978-1-925836-55-4 Author: Daniel Schwarz Product Manager: Simon Mackie English Editor: Ralph Mason Cover Designer: Alex Walker

Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information

contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd. 10-12 Gwynne St, Richmond, VIC, 3121 Australia Web: www.sitepoint.com Email: [email protected]

About SitePoint

SitePoint specializes in publishing fun, practical, and easy-tounderstand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.

About the Author Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.

Preface Who Should Read This Book? This book is for anyone who wants to better understand Figma, the design and collaboration app. No prior experience of Figma is required, but it's assumed you have some design experience.

Conventions Used Code Samples Code in this book is displayed using a fixed-width font, like so:

A Perfect Summer's Day

It was a lovely day for a walk in the park. The birds were singing and the kids were all back at

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings

HEY, YOU!

Tips provide helpful little pointers.

AHEM, EXCUSE ME ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

MAKE SURE YOU ALWAYS ...

... pay attention to these important points.

WATCH OUT!

Warnings highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems. [email protected] is our email address, should you need to contact us to report a problem, or for any other reason.

Chapter 1: Low-fidelity Prototyping Welcome to this tutorial on Figma. In this book, we’ll immerse ourselves in everything Figma has to offer as we design a simple web page. The layout of this page will be based on an older and a newer version of the iA Writer website’s splash page. Figma is the most complete tool for designing apps, websites, and other types of user interfaces (UIs). Unsurprisingly, it’s also the most-used UI design tool according to the 2022 Design Tools Survey. Figma can take product design teams all the way from ideation to high-fidelity prototyping—covering all the design processes in between. It can also facilitate diagramming, collaboration, and research, although these may sometimes require the use of third-party plugins or Figma’s secondary tool, FigJam. Figma’s design handoff and design system management features can help bridge the gap between design and development. It’s available for Windows, macOS, and as a browser app. (We’ll need access to Figma in one of these forms to complete this book.)

In this first tutorial, we’ll focus on acquainting ourselves with Figma. We’ll learn where everything is, while using some of Figma’s biggest and most exciting features. In the end, we’ll have created a low-fidelity but functional (simulated) prototype.

Designer, Meet Figma With our (free) Figma account set up, let’s open the Figma dashboard and click on New design file. (There’s obviously much more to the dashboard than this, but nothing that’s especially technical. It’s simply a place to manage our files, projects, teams, organizations, and account.) We can now take our first look at Figma, where we’ll see the horizontal toolbar near the top, the Layers panel on the left, the Design panel on the right, and in the middle, a blank canvas. Let’s change that by creating something so that we can see firsthand what all of this means.

Step 1: Creating a Frame (Artboard) Click the “Region tools” icon (#) in the horizontal toolbar, then choose Frame (or tap F or A on the keyboard) to reveal the list of the Frame options in the right sidebar.

FINDING MENU ITEMS

You can find any menu item directly by using the command + / / Ctrl

+ / keyboard shortcut and then typing its name into the

popup field. These are referred to as “Quick action…” shortcuts.

A Frame is a contained spaced that we can dedicate to a specific web page or app screen (or section within either of those). As we can see, there are many Frames to choose from. Normally, I would suggest taking a mobile-first (“Phone”) approach to design. However, to make this tutorial easier to digest, we’ll focus on desktop first, so choose Desktop → Desktop 1440×1024.

We should now be able to see a reference to “Desktop - 1” in the Layers panel. Whenever we want to do something to a Layer (such as a Frame), we can just click on it from the canvas or click on its reference from the Layers panel. Different types of Layers are represented by different icons in the Layers panel. We should be able to see that standard Frames are represented by what looks like a hash (#) icon. The Design panel is contextual: the options available for customizing will depend on the situation. When we were looking for a Frame, it showed the list of Frames, but now that a Frame is selected, the Design panel contains various options for customizing it.

Step 2: Setting Up Auto Layout Next, we’re going to customize the Frame’s Auto layout options. Using Auto layout on a Frame makes its content more robust and responsive by enforcing alignment, spacing, and padding rules. In the long run, it also makes designing UIs more efficient. Our objective in this step is to use Auto layout to ensure that any future content is padded and aligned. 1. Click Auto layout (shift + A) in the Design panel to activate it. 2. Change the “Horizontal padding” to 12 and the “Vertical padding” to 120 . (Note that some options—including these ones—aren’t labeled unless we hover over them.) 3. Set the blue alignment bars to “Top center alignment”. (Use the image below as a guide if you’re unsure.)

Auto layout can be overzealous. In the Frame section, it will have added Horizontal resizing and Vertical resizing. Change their settings to “Fixed width” and “Fixed height” respectively, so that the Frame won’t hug its contents (once content is added).

We’ll see the outcome of this step after adding content, so let’s do that by creating a navigation section.

Step 4: Creating a Text Layer To create a Text layer, click the “Text” icon in the horizontal toolbar (or press T on the keyboard), then click on the canvas and type some text. (In this instance, let’s write “Logo”.) We’ll see right away that the Text layer doesn’t appear exactly where we clicked, and in fact seems to be aligned to the top center of the Frame, but for a bit of space. This is because the parent Frame has those Auto layout settings that impose those rules.

Step 5: Creating a Nested Frame Frames inserted directly onto the canvas (such as “Desktop - 1”, the Frame that we already created) are called top-level Frames. In this step, we’ll Frame our “Logo”, and this Frame will be called a Nested Frame, because it will be nested inside our top-level Frame. With the “Logo” selected, choose Frame selection from the right-click menu (option + command + G / alt + ctrl + G). The Frame will be called “Frame 1”, and “Logo” will be the only Layer inside it. (Look at the Layers panel to understand the structure.)

Next, activate Auto layout on “Frame 1” and then apply the following settings using the Design panel: Horizontal resizing: Fixed width Vertical resizing: Fill container W (width): 1000

You’ll notice that the logo now snaps to the top left. This is because “Desktop - 1” is no longer its parent, so it doesn’t have to respect its Auto layout rules anymore. “Frame 1” is now the parent of “Logo”, and “Desktop - 1” is now the parent of “Frame 1”, and both must now respect the rules of their new parents.

Step 6: Renaming “Frame 1” Double-click on “Frame 1” in the Layers panel (command + R / ctrl + R), type “Container”, then tap return to confirm its new name. Renaming arbitrary-sounding layers to something more specific is a healthy habit that we should adopt early on.

Step 7: Setting Up a Layout Grid “Container” will utilize a three-column Layout grid. Let’s set this up now so that we can better visualize the container’s bounds (which, currently, are unknown unless we select the container). Alternatively, we can tap shift + O to “Show outlines”, but we need a Layout grid anyway, so let’s use this way for now. Click on Layout grid (control + G / ctrl + shift + 4) in the Design panel, and then click on the “Layout grid settings” icon (a square of nine dots). Click on Grid and choose Columns from the drop-down and set the “Count” to 3 . “Gutter” is fine at 20 .

NO NEED FOR RULERS

Figma is able to apply Layout grids to any Frame, which kind of makes Rulers (shift + R) obsolete. Even if we’re accustomed to using Rulers (to visualize bounds and/or align things) in other UI design tools, it’s likely that we won’t need to do so in Figma.

In the following steps, we’ll create a navigation Component. Components can be reused and also contain Variants and conditional Properties, all of which are ideal for maintaining visual consistency and avoiding redundancy. This navigation will contain our logo, a hamburger menu, and some links that will drop down.

Step 8: Creating the Component Select the logo to begin. We can do this by double-clicking on it, since it’s a child of the Frame that’s currently selected. When this isn’t the case, we can hold command / ctrl while clicking on Layers to “deep select” them. Or we just select “Logo” in the Layers panel. Next, click on the “Create component” icon in the horizontal toolbar (option + command + K / ctrl + alt + K) to wrap the logo in a

Component, which is like a Frame but with the features mentioned previously.

Rename this Component to “Navigation” by double clicking it in the Layers panel. Component First When turning Layers into a Component, Auto layout settings are removed—which is one of Figma’s annoying quirks. So when designing something reusable, ensure that you establish the Component before using Auto layout (as we did above). Component first, always.

Step 9: Creating a Rectangle Shape We’ll design the “Hamburger icon” next, which will consist of two Rectangle shapes. (Yes, no burger!) To create the first Rectangle, select the “Shape tools” icon in the horizontal toolbar, choose Rectangle (R) from the options, and click on the canvas. (Click outside the bounds of “Desktop - 1” so that we can work freely.)

Step 10: Styling the Rectangle Set the width (“W”) to 28 , the height (“H”) to 3 , and the “Fill” to #000000 . Alternatively, select the black square underneath “Document colors” inside the Fill modal, which exists because another Layer (“Logo”) also uses that color.

If the Rectangle is difficult to see, tap shift + 2 to “Zoom to selection” (we can tap shift + 1 to revert to “Zoom to fit” whenever we need to). See “Zoom/view options” (the right-most drop-down in the horizontal toolbar) for more options.

Step 9: Creating the Second Rectangle Shape Find “Duplicate” using Quick Actions (command + / / ctrl + /) to duplicate (command + D / ctrl + D) the Rectangle. “Rectangle 2” will appear on top of its original (and will be selected), so keep tapping the ↓ key until you can see both of them. (We can use the arrow keys to move Layers by 1px , or 10px while also holding shift.)

We want there to be a spacing of 10 between the Layers, so let’s measure the distance between them using Smart Guides. Hold option / alt while hovering over the other Layer (“Rectangle 1”) to measure the spacing between them. If the spacing isn’t correct, use the arrow keys to move the Layer while measuring with option / alt.

Alternatively, we can drag Layers while holding option / alt to duplicate and measure at the same time.

Step 10: Grouping the Rectangles Hold shift while clicking on the other Rectangle to select it in addition to the Rectangle that’s already selected. After that, choose Group selection (command + G / ctrl + G) in the right-click menu, and then rename the Group to “Hamburger icon”. Grouping helps with organization and also makes related Layers easier to maneuver.

THE PURPOSE OF GROUPS

Groups are like Frames without functionality. That is, they can’t use Auto layout, Layout grids, Components, and so on. Although it can seem like Groups aren’t handy, different Layer types have different icons to signal what they do, so when you see a “Group” icon you know that it’s for organization.

With “Hamburger icon” still selected, tap command + X / ctrl + X to cut it. Next, select “Logo” and tap shift + command + V / shift + ctrl

+ V to “Paste over selection”.

“Hamburger icon” and “Logo” should now be siblings. Group them, then rename this Group to “Logo+hamburger icon”. Our document should look as pictured below.

Step 11: Applying Auto Layout to the Navigation Select Navigation, activate Auto layout, and then change the “Spacing between items” to 50 (so that the drop-down menu that we’ll create shortly will have some space to breathe). Next, change the Horizontal resizing to “Fill container” (to make its width fluid).

Repeat those steps with “Logo+hamburger icon”, but change the “Spacing between items” to 32 and click on the “Horizontal direction” icon to make the content flow horizontally.

Finally, select “Logo” and change the Horizontal resizing to “Fill container”, which will make it fill all horizontal space not occupied by the hamburger.

Step 12: Creating the Menu Create a Text layer (out of bounds) like this: Link Link Link Link Link

1 2 3 4 5

After that, duplicate it twice, multi-select the instances, then Frame them. Cut the Frame, select Navigation, and then Paste over selection. Rename the Frame to “Dropdown menu”. After doing all of that, “Navigation” should look something like the image below.

Next, activate Auto layout, click on the “Horizontal direction” icon, change the “Spacing between items” to 20 (to match the Layout grid’s Gutter), and then change the Horizontal resizing to “Fill container”.

Finally, after selecting all three lists, change the Horizontal resizing to “Fill Container” so that the width of the lists and the width of the Layout grid’s columns are the same.

Step 13: Creating the “Closed” Variant Next, we’ll create a Variant of our navigation Component that shows what it looks like when closed. Select Navigation, click on the “Create component property” icon (Design panel, to the right of “Properties”), then choose Variant.

Before moving forward, turn Auto layout back on (because Figma resets Auto layout settings when creating Variants). Revert the “Spacing between items”, “Horizontal padding”, and “Vertical padding” to 0 . Revert the Horizontal resizing to “Fill container”, then double-click on the Variant (which will be called “Default”) to select it and apply the same setting. Now we can create the “closed” Variant. Do this by clicking on the + icon underneath the Component to Add variant (it will be called “Variant2” by default).

Next, let’s style this Variant. To show what the navigation should look like without the menu dropped down, we can simply hide the “Dropdown menu” Frame. Hover over “Dropdown menu” in the Layers panel and then click on the eye icon to hide it (shift + command + H / shift + ctrl + H).

Finally, we need to name our Variants. Select Navigation and then click on the “Edit property” icon in the Design panel. Change “Name” to “State”, “Default” to “Open”, and “Variant2” to “Closed”.

In the following step, we’ll create interactions that will enable users to open and close the drop-down.

Step 14: Creating the Interactions With both Variants now designed, let’s create some interactions that will enable users to switch between them by clicking on the hamburger icon. Select “Hamburger icon” from within the “Open” Variant, switch to the Prototype panel, then click on Interactions. Next, click on the Click → None option and change the following settings: “None” to “Change to” “State” to “Closed” “Instant” to “Smart animate” With “Smart animate”, Figma makes assumptions about how the interactions should animate, which most of the time are correct and can save us a lot of time. Since our design doesn’t need to be fancy right now, this option works for us.

Similarly, select “Hamburger icon” from within the “Closed” Variant and repeat the steps above, but change “State” to “Open” this time around.

Step 15: Utilizing Instances Before moving on, let’s make sure our design only shows the closed Variant, because right now it looks weird with both Variants stacked on top of one another. This is happening because this Component is the “Main Component”, whereas our mockup only needs to show one “instance” of it. Let’s move the Main Component aside for now. Grab “Navigation” and drop it anywhere outside the bounds of “Desktop - 1”. Next, click on the “Resources” icon (shift + I) in the horizontal toolbar, and then drag “Navigation” into “Desktop - 1” (“Container”).

Next, change the “State” from “Open” to “Closed” in the Design panel and reapply “Fill container” (sigh).

If we were to make a change to this instance of “Navigation”, this change would be called an Override and it would only apply to this instance. However, if we wanted to make a change to all instances of the Component (current and future), we would need to make the change to the Main version of the Component.

Step 16: Sourcing Content with Figma Plugins As designers, we’ll often be designing while awaiting the content from stakeholders, using fake content until then. Other times we might need fake names, avatars, and so on, and for this purpose Figma has plugins that we can install. Figma plugins are add-ons that can add additional functionality to Figma. Firstly, though, let’s ensure that our container is ready for more content. Select Container and apply vertical direction to ensure that all new content appears under our navigation. Also, set the “Spacing between items” to 50 . Next, create a new Text layer with “Heading” as the copy, and then set its Horizontal resizing to “Fill container”. Duplicate it so that there’s two of them.

It should look like the image below.

Now let’s fill the current selection with fake content. Navigate to the “Resources” icon in the horizontal toolbar, switch to the Plugins tab, search for “lorem ipsum”, then click on the Run button.

Like with any Figma plugin, follow the on-screen instructions to use it. In this case, click on the Auto-generate button.

Let’s try an image now. We can drag images from our computer onto the canvas, or we can go to the “Shape tools” icon in the horizontal toolbar and select Place image (shift + command + K / shift + ctrl + K). Pasting images onto the canvas also works. For now, though, search for and run the Unsplash plugin. Next, select a random image from Presets → minimal. Ensure that there aren’t any Layers selected before running the plugin, as otherwise the image will be set as the background for that Layer.

PLUGINS FOR FAKE CONTENT

We can use community-built Figma plugins to insert all kinds of fake and real content, speeding up our design workflow significantly. Here are some of the best ones: Iconify (insert icons) Figmoji (insert emojis) Charts (insert charts with fake or real data) Map Maker (insert fake or real Google or Mapbox maps) Content Reel (insert fake names, avatars, addresses, etc.) Various illustration libraries (insert customized illustrations)

After dragging the image into “Container” using the Layers panel, apply “Constrain proportions” from the Design panel (click on the “Link” icon next to “H”) so that it will maintain its aspect ratio when we resize it. Now resize it by setting the “W” to 1000 , then set the Horizontal resizing to “Fill container” to make it responsive. Proportion constraint won’t work with Resizing since it forces “Fixed height”, which is why we sized the image for “Desktop - 1” before setting the Horizontal resizing. On other screen sizes the height will be an issue, but we’ll try to circumvent that in the next tutorial. Ultimately, we should end up with what’s pictured below.

Summary In this tutorial, we learned how to create a functional, adaptive, low-fidelity prototype with Figma. We dove into the basics of its UI, concepts, and terminology, and even explored some plugins. Nice work!

Chapter 2: Collaboration Figma’s collaboration features are arguably its best selling point. Think beyond contextual feedback, role management, design handoff, version control, and even the innovative live collaboration features that Figma is known for—since rival tools now offer this too. Instead, imagine having the ability to give presentations and have audio conversations within Figma. This is the Figma that we’re looking at in this tutorial series, and other tools just aren’t matching up right now. In this second chapter of our Figma book, we’ll learn how to collaborate with stakeholders. We’ll start by quickly generating a mobile version of our prototype so that anybody can test it regardless of what device they’re using. After that, we’ll dive into how feedback works in Figma (that is, previewing, sharing, and commenting), how to use version control to work more independently, and how to use multiplayer, audio conversations, and spotlighting to do the opposite (that is, work more synchronously). FREE AND PAID FIGMA PLANS

Figma offers a pretty generous free plan, but a paid plan is required to access some of the collaborative

features. Check out Figma’s pricing page to see what each plan includes.

Step 1: Creating a Mobile Version Let’s start off by creating a mobile version of our design so that we can see how our layout performs on a small screen. Having a mobile version will also mean others can test it on their mobile device if they want to. First, duplicate “Desktop - 1” and rename it to “Mobile - 1”.

Next, set the “W” to 375 , “H” to 812 , “Horizontal padding” to 20 , and “Vertical padding” to 35 . We can provide different “W” and “H” values if we’d rather optimize for a different size.

AUTO LAYOUT QUIRKS

Although we could switch to a different Frame using the Frame drop-down instead of setting the width and height manually, doing so removes Auto layout. Plus, turning Auto layout back on resizes the Frame, keeping us in a loop. Unfortunately, this is another one of Figma’s annoying Auto layout quirks, and the only way around it is to specify the size manually (as we did above).

Next, select Container and set the Horizontal resizing to “Fill container”. The design should now look like the image below (completely responsive) due to the heavy use of Auto layout in the last tutorial.

We can adapt our designs to as many Frames as are required to show what they should look like on other screen sizes. However, since our design is relatively simple, additional Frames aren’t needed. Of course, if we were able to set Horizontal resizing to “Fill container” while enforcing a maximum amount of width (that is, condition-based styling), that would be fantastic, but Figma doesn’t offer this currently.

Step 2: Setting Up Some Flows Flows allow us to establish multiple starting points for prototype previews, in turn enabling us and/or stakeholders to switch between different versions of them (in our case, the desktop and mobile version). First, switch to the Prototype panel, click on Flow starting point, double-click on Flow 1, and then rename it to “Mobile version”.

Next, switch to “Desktop - 1” and repeat those steps, calling the Flow “Desktop version”.

Step 3: Performing a Quick Test Before sharing designs with others, we’ll want to test them to ensure that we haven’t made any obvious mistakes. Start by clicking on the Desktop version button near the top-left corner of “Desktop - 1” to open the Flow in “Presentation” view.

Check over the design, making sure to test the navigation by clicking on the hamburger icon a few times. We can tap the Z key to toggle through some view options if we’re not able to see everything clearly enough.

If everything looks okay and functions well, switch over to the mobile version. We can do this by clicking on Mobile version in the left-side Flows panel, but it’s best to test on a real mobile device, so let’s do that using the Figma Mirror mobile app. Figma Mirror both simulates designs on mobile devices and also responds to real-time changes—as long as the mobile device and the device where the changes are being made are on the same internet connection. Assuming we have the iOS app or the Android app installed on our mobile device, open the document. If Figma Mirror loads the desktop version, tap the screen with two fingers and then tap Flow before selecting the mobile version.

Give it a quick test, just like before. We’ll notice that the image is too long (as I said it would be in the first tutorial). To fix this, select it, turn off the “Constrain proportions” icon, change the “H” to 223.33 , then turn the “Constrain proportions” icon back on.

These changes will auto-sync to Figma Mirror in real time. There’s just one more step before we can begin sharing.

Step 4: Renaming the Document Let’s rename our document so that stakeholders understand exactly what we’re sharing with them. Ensure that there aren’t any Layers selected by clicking on an empty space on the canvas or tapping the esc key, then doubleclick on “Untitled” in the horizontal toolbar before renaming it to something like “Hello World”.

Now we can began sharing the document.

Step 5: Inviting Others to Collaborate SETTINGS FOR THE FREE PLAN

If we’re not on a paid plan, we might need to make slightly different choices from those suggested below. For example, we might need to choose “can view” instead of “can view prototypes only” when setting the sharing options.

Next, we’ll return to Presentation view to invite other stakeholders to test the Flows and comment on them, but instead of accessing Presentation view by opening a specific Flow from the canvas, this time around we can simply click on the “Present” icon in the horizontal toolbar, so start by doing that now.

After that, click on the Share prototype button. A “Share Hello World” modal will appear, and from here we can invite others to collaborate. If we know their email addresses, we can type them into the input field (commaseparated) and then change “can view” to “can view prototypes only” (which only allows them to see the design in Presentation view and create comments). ACCESS LEVELS

People with “can edit” access can edit designs, create and merge branches, translate designs to code, engage in audio conversations, and also add comments. People with “can view” access can do the same things, except merge branches and of course edit designs. Generally speaking, designers should have “can edit” access, developers should have “can view” access, and others should have “can view prototypes only” access.

Click on the Send invite button when ready. (We can skip this step of the tutorial if we don’t have anyone to collaborate with at this time.) As an alternative, if we don’t know the email addresses of our invitees, we can click on Copy link in the bottom-left corner of the modal to copy a link to the document. (Since we’re in Presentation view, this is what will be linked to.) We can then send people the link manually, using Microsoft Teams, Slack, email, or whatever.

Additionally, there are many different options for customizing who can access the document via the link and what they’re allowed to do with it. I’d recommend reading Figma’s official documentation on sharing, because different subscriptions offer different options. The options “Anyone with the link and password” and “can view prototypes only” offer a decent balance of security and convenience, so choose from these options (or something similar) if using the link method.

Team Access If the document belongs to a Project, everybody on the Team (Projects belong to Teams) will already have access. The modal will state: “Everyone at can access this file.” So we won’t need to invite them.

Step 6: Making a Comment Now that we’ve invited our stakeholders to comment, they can raise any concerns, feedback, and questions they might have. If we weren’t able to invite stakeholders, that’s fine, because we’ll need to learn how to comment on the work of other designers anyway. Since our design could do with a call to action (maybe underneath the image?), let’s make a comment about that. Start by clicking on the “Add comment” icon (or hit the C key) in the horizontal toolbar, then click and/or drag on the canvas to specify the context of the comment. Next, we can click on the “Add mention” icon (or hit the @ key) if we’d like to address a specific individual, before choosing them from the drop-down. After that, write the comment—optionally using emoji by clicking on the “Add emoji” icon to reveal the emoji catalogue and then choosing an emoji.

Click on the ↑ icon to submit it (or press return).

Comments can be read and written in Design mode and Presentation mode. Although they’re always there, we don’t need to address them right away, which is what makes them ideal for asynchronous work. Let’s address the comment now anyway, while diving into versioning.

Step 7: Creating a Branch Versioning is a concept and system of tools that allows us to branch a design, sample changes on that branch, and then send the changes to stakeholders for review, who’ll either accept (“merge”) them or reject (“archive”) them. It’s similar to the version control systems (such as Git) that are used by developers. We’ll address the comment by adding a button on a new branch and then submitting the changes for a stakeholder review. But why work on another branch when we know that Figma offers live collaboration that helps everyone work asynchronously? Well, what if the changes don’t work out? We would have to roll back to an earlier version of the design, causing others to lose their work. Or what if other collaborators want to work on the same aspect of the design? Versioning enables us to work non-destructively and without interference.

Start by clicking on the chevron icon next to the document’s name in the horizontal toolbar, and then choose Create branch… from the list. Name it something like “Button experiment” when prompted, and then click on the Create button. The branch will open right away and essentially be a clone of our original document.

Step 8: Starting an Audio Conversion Before we make the changes, let’s start an audio conversation (which requires “can view” access) and allow others to edit the design (which requires “can edit” access). Unlike comments, these “multiplayer” features are for synchronous collaboration, and in this tutorial we’ll use them with our team to address the comment. Start by clicking on the Share button in the horizontal toolbar so that we can update the Invite settings to award “can edit” access. We’ll have more control over these settings from the “main” document, but don’t worry about that for now. Invite via email, making sure to select “can edit” from the drop-down.

We’ll know when collaborators are in the document because their avatars will appear in the horizontal toolbar and their multiplayer cursors will appear on the canvas.

Next, click on the “Start conversation” icon (which looks like headphones) next to the avatars. Then we confirm that we’re okay with Figma recording our voice. Once collaborators have clicked on this icon, they’ll be able to hear us and speak to us.

Additionally, Figma has a new feature that lets others “spotlight” us, which enables them to follow us around the document so they know what we’re talking about. We can click on the “Minimize” icon in the conversation widget, click on our avatar, and then click on the Spotlight me button to send a request.

There will be a short window of opportunity for collaborators to “Ignore” the request. Should they choose to do so, they’ll still be able to spotlight us by clicking on our avatar. If we’ve managed to invite stakeholders currently (and they’ve joined the audio conversation and accepted the spotlighting request), they’ll be able to watch us address the comment and communicate with us about the best way to do so. (“Editors” can even help with the design.) Awesome, right? Whether we have some collaborators with us currently or not, let’s address the comment now. Underneath the image, create a Rectangle shape: change the “H” to 48 and the Horizontal resizing to “Fill container”. Next, Group the Rectangle and then create a Text layer (that says “Button”) inside it. After that, click on the icons “Align horizontal centers” (option + H / alt + H) and “Align vertical centers” (option + V / alt + V) in the Design panel to center the Text layer in the Group. The result is pictured below.

Does it look okay? Let’s find out.

Step 9: Reviewing (and Merging?) the Changes Finally, let’s have the changes reviewed. After clicking on the chevron icon again, choose Review and merge changes. From here, we can also update the branch (if changes have been made to the main document) and traverse the entire version history (including the main document and any other branches). However, we don’t need any of these options for now.

After that, we’ll ordinarily want to click on the + icon next to Reviewers before nominating team members to review, and then click on the Request review button. However, since we’ll also want to learn how to merge changes ourselves, we can skip those steps for now. Instead, let’s click on a Frame to see its changes (acting as if we’re the reviewer).

A side-by-side before and after view is shown. (Switch to “Overlay” view if this helps visualize the changes more easily.) When we’ve finished reviewing the changes, we can click on the × icon in the top-right corner of the modal.

Reviewers will typically approve the changes, or suggest more changes, but not merge them. Only once everyone approves should we (or the final reviewer) click on the Merge branch button to archive the branch and merge the changes into the main document. We can just go ahead and do that now.

Hypothetically, if we were to abandon the branch, we’d want to click on the chevron icon and select Archive branch manually. This will hide the branch from the version history, but not delete it.

Lastly, switch back to the main document, click on the comment, and then click on the “Resolve” icon to indicate that the comment has been addressed. As an alternative, reply to the comment to say that it’s been addressed and leave it up to the commenter to mark it as resolved. Each team can make up its own mind about that.

Summary All in all, Figma is light years ahead of other UI design tools when it comes to design collaboration. By now we should be able to work asynchronously using comments and versioning and synchronously using multiplayer, audio conversations, and spotlighting. Hopefully this tutorial has provided you with a lot of hands-on experience with the collaborative features (even if you don’t have any stakeholders to invite right now).

Chapter 3: High-fidelity Prototyping In this third chapter, we’ll focus on high-fidelity design, which is often regarded as the fun aspect of UI design—where we can be creative as we style our design. However, it’s important that we maintain consistency by reusing styles when it makes sense to do so, speeding up our high-fidelity design workflow as an added benefit. To that effect, we’ll learn how to create and use Styles and Components, and how to create Design System Libraries to hold them. (We’ll also create documentation that explains how to use them correctly, since Libraries enable other design documents, teams, and even our entire organization to use them too.) We’ll also take a deeper look at images and interactions. Let’s begin.

Step 1: Creating a Color Style We’ll start things off by styling the logo’s Fill (that is, its color). After that, we’ll save the color as a “Color Style” so that we can reuse it easily and maintain consistency.

However, before we do this, we should create a new document, which we’ll turn into a Library later in the tutorial. We’ll compartmentalize our design’s reusable elements (that is, Components, Color Styles, and Text Styles) in this Library for better organization, and then we’ll import them into our design for use. In fact, an additional benefit of Libraries is that they can be imported into multiple documents to help maintain consistency across various designs and products. It’s important to remember that Styles and Components created in a document (such as our design) can’t be ported over to a new document (such as a Library) later on, which is why it’s always a good idea to start a Library when moving into the high-fidelity design phase. It’s difficult to predict how complex a design will end up and whether or not we’ll ever use its Styles and Components in other projects in the future, so it’s best to think ahead and create a Library for them. There are some other benefits, but we’ll go into those later. Libraries are for paid plans only, so if you’re not on a paid plan you can either read through the steps without following them or create your Styles in the main document instead. Start by clicking on the main menu in the horizontal toolbar and navigating to File → New design file.

Next, create a Text layer called “Standard text”, click on Fill in the Design panel, and then apply any color to it.

After that, click on the “Style” icon in the Fill section, and then click on the “Create style” icon.

When asked, name the Color Style “Interface/Text”, and then click on the Create style button. The “/” sorts “Text” into a collection called “Interface”.

Step 2: Creating a Text Style Next, let’s style the typography. Apply the following: Font family: Fira Mono (Figma has Google Fonts built in) Size: 24 (the design is quite minimal, so there’s room for the font size to be more than 16, which is the minimum font size needed to remain accessible) Line height: 36 (the spacing between lines, which should be at least 1.5x the font size) Letter spacing: 0.12 (the spacing between letters, which should be at least 0.12 ) Paragraph spacing: 48 (the spacing between paragraphs, which should be at least 2x the font size)

NUMERICAL INPUTS

Numerical inputs in Figma can calculate mathematical equations, so when specifying the “Paragraph spacing”, for example, we could type 24*2 (that is, the font size × 2) instead of having to work it out ourselves and typing 48 .

Next, click on the “Style” icon in the Text section, click on the “Create style” icon, name it “Standard/Regular”, and then click on the Create style button.

EFFECT AND GRID STYLES

When needed, we can also save Effect Styles (which can include Drop Shadows, Inner Shadows, Layer Blurs, and Background Blurs) and Grid Styles (Rows, Columns, and Grids) in the same way.

Step 3: Creating more Text Styles Next, create three more Text layers and turn them into Text Styles. Each Text Style will be used for a heading (or generic large text) of a different size: Use these settings for the first Text Style: Copy: “Large text” Font family: Fira Mono Size: 36 Line height: 54 Letter spacing: 0.12 Paragraph spacing: 72 Text Style: “Large(r)(st)/Large” Use these for the next: Copy: “Larger text”

Font family: Fira Mono Size: 54 Line height: 81 Letter spacing: 0.12 Paragraph spacing: 108 Text Style: “Large(r)(st)/Larger” And these for the next: Copy: “Largest text” Font family: Fira Mono Size: 81 Line height: 121.5 Letter spacing: 0.12 Paragraph spacing: 162 Text Style: “Large(r)(st)/Largest”

Step 4: Reuse the Color Style Next, let’s reuse our Color Style on our new Text layers. Select the layers, click on the “Style” icon, and then select Text under the Interface option.

Step 5: Taking a Closer Look at Components Now let’s create a reusable button Component. Create a Text layer named “Action”, Frame it, apply Auto layout, change the Vertical Resizing to “Fixed” height, the “H” to 72 , the “Horizontal padding” to 36 , the “Corner radius” to 21.6 , apply center alignment, and then rename the Frame to “Button”.

Next, change the “Fill” to 00B2FF (Hex) and then make it a Color Style named “Brand/Primary”.

After that, select Action, apply the “Standard/Regular” Text Style, and then change the “Fill” to FFFFFF . (There’s no need to make it a Color Style, since we’re not reusing it.)

Next, let’s take a look at Component Properties—customizable options that can make Components more flexible. Boolean Properties are used to toggle the visibility of certain Layers within a Component. Instance Swap Properties are used to swap “nested” instances for other instances. Text Properties are used to customize text content. The upside of using Properties is that we can customize them at the Component level instead of selecting individual Layers and “overriding” them. In this tutorial, we’ll set up a Text Property to make the button text easier to customize, and a Variant Property that provides the Component with a hover state. Then we’ll look into Booleans and Instance Swaps in a later tutorial. Before starting on this, though, convert “Button” into a Component, then select the Action Layer. Next, click on the “Apply text property” icon in the Design panel, choose Text, type “Label” into the Name field, and then click on the Create property button.

After that, select the button Component, click on the “Create component property” icon in the Design panel, and then choose Variant.

Next, double-click on Property 1 (under the “Properties” heading in the Design panel) and rename it to “State”.

After that, click on the “Add variant” (+) icon underneath the Variant itself to create a secondary Variant, and then change its name from “State2” to “Hover”.

Next, click on the “Detach style” icon (next to “Brand/Primary” in the Design panel) to detach the Color Style from the Layer.

Create a new Color Style named “Brand/Primary (Hover)” after changing the “Fill” to 1FBCFF (Hex). Finally, select the Default Variant, switch to the Prototype panel, click on Interactions, and then change “On click” to “While hovering”, “None” to “Change to”, and of course, “Default” to “Hover”.

Step 6: Exploring Documentation Next, let’s begin documenting the use cases of our Components and Styles, because it’s one thing to make elements reusable, but it’s another thing to know how to reuse them suitably and document this so that others can do the same. Components, Styles, and Documentation combined make up what we call a design system—a single source of truth for designers and developers that includes both visual and code examples for complete context and clarity. Since we already have a Library set up, we already have the perfect foundation for a design system. Figma is actually the most used and best rated tool for design systems, but it doesn’t have any features for writing documentation, so teams using Figma often use Storybook as a secondary tool. However, Notion is friendlier to use, despite not actually being a dedicated design system documentation tool, so let’s take a look at that. Create an account and a new document, then begin documenting the use cases of the button Component. If you’re sure not where to start, you’re welcome to copy the example below into a Notion document: Title: Buttons

In , buttons should be used to initiate acti

# States ## “Default” state Since is fairly simple, only one button col ## “Hover” state So that hover states behave similarly for buttons *an

Next, let’s try embedding our Component into the Notion document for added visual context and clarity. Right-click on the Default Variant and then navigate to Copy/Paste as → Copy link to copy a direct link to that specific Layer to the clipboard.

Paste it into the Default section of the Notion document, choosing the Paste as preview option when asked, then do the same thing for the “Hover” state.

Developers can also add code snippets, as pictured below.

Finally, let’s link to the documentation from the Component so that stakeholders can access it easily. Start by clicking on Share in Notion, and then click on Copy link after specifying some suitable sharing options—similarly to how we’d do it in Figma.

Next, select the Component in Figma, click on the “Component controls” icon in the Design panel, and then copy the link into the “Link to documentation” input field. When including documentation, we can leave the “How to use this component” field blank.

TOOLS FOR HANDLING DESIGN SYSTEM MANAGEMENT

We’ll revisit design systems at the end of the book, but if you’re eager to check out some tools that can handle design system management a little better now, take a look at zeroheight, Zeplin, or Storybook.

Step 7: Publishing the Library Next, let’s publish the Library so that we can use its Styles and Components in our actual design. Start by clicking on the arrow icon next to the document’s title in the horizontal toolbar and choosing Publish styles and components (option + 3 / alt + 3).

If asked to, follow the on-screen instructions to move the document into a Team/Project folder. This awards everybody in the team access to the Library. Next, in the “Optional description of changes” field, explain what the changes are about. I don’t recommend leaving this field empty (as it’s never ideal to keep teammates in the dark), but in this case we can simply type “Initial”. After that, check all of the checkboxes (meaning, yes, we want to publish everything in the Library). Finally, click on the Publish styles button.

Step 8: Enabling and Using the Library Great! Now let’s enable the Library. Switch back to the actual design, switch to the Assets panel, click on the “Team library” icon, click on the Your teams tab, and then click on the toggle next to “Untitled” (there’s no need to rename it right now).

Next, we can take our time applying the Styles to the relevant Layers. We won’t be able to “apply” a Component, so for the button we’ll need to remove it from the design and then insert the “Button” Component that we built in the Library. To do this, drag it from the Assets panel onto the canvas where we want it to appear (or hit shift + I). It should look as shown below.

Let’s now see the Component Property we set up earlier in action now. With the instance selected, locate the Label Property in the Design panel and change its value from “Action” to “Buy the nice thing”. This is much easier than having to dive into individual Layers, especially when it comes to complex Components with many Properties.

Step 9: Updating the Library Next, let’s change the Fill of our Color Style, a change that will automatically reflect in any Layer that uses this Color Style in the Library and non-automatically otherwise. Switch back to the Library, ensuring that we don’t have anything selected so the Library’s Styles show in the Design panel, click on the “Edit style” icon next to the Interface → Text style, and then change the “Fill” property to 000000 (Hex).

As we can see, Styles can help us maintain consistency, as they’re easy to create, reuse, and update in a document. However, for these updates to reflect in any documents linked our Library, we’ll need to publish the updates and then accept them in the linked document. This is to ensure that we don’t break or make real-time changes to the linked design. We can publish the updates whenever we’re ready.

When ready to update the design with the Library changes, switch back to the design, click on the “Team library” icon in the Assets panel, and then switch to the Updates tab (a “Review/Dismiss” notification will appear in the bottom-right corner too). From here, either click on the Update buttons to accept specific changes or click on the Update all button to accept them all. Since there should only be one update, click on any one of them.

Step 10: Taking a Closer Look at Interactions Next, let’s take a closer look at Interactions—by animating the hamburger icon into a “Close” icon (×). Focusing on the “Open” Variant, select the top Rectangle shape and change the “Rotation” to -45 , and then select the bottom Rectangle shape and change the “Rotation” to 45 .

After that, select both Rectangle shapes simultaneously, and then click on the “Align vertical centers” icon in the Design panel.

If we test the Interaction in Presentation mode, we’ll see that the animation feels a little stale, so let’s fix that. Select the “Hamburger icon” Group, switch to the Prototype panel, and then open up the “Interaction details” that we established in the first tutorial. After that, click on the Ease in drop-down, where we’ll see a list of easings and springs that can “reshape” the animation. The best way to understand how these work is to experiment with them. However, there’s also some documentation that explains them in more detail, and even covers how to create custom animations. (Chances are we’ll never use this feature, but it’s worth reading about it just in case.) I went with “Bouncy” and left the timing at 800ms .

Step 11: Taking a Closer Look at Images A few years ago, it was still normal to use Photoshop for certain things, but that’s not really the case anymore. We can do a lot more with UI design tools now, including removing an image’s background. We’ll need to use a plugin for this, though. Select the image, click on the “Resources” icon in the horizontal toolbar, switch to the Plugins tab, do a search for “Icons8 Background Remover”, and then click on the Run button. Viola!

If the image isn’t suitable for background removal, change its Fill to that of a new image by clicking on the Choose image button. If we need to edit the image (such as changing how it fits into the bounding box, or rotating it, or fine-tuning its exposure), we can also do that from here.

Summary In this tutorial, we started a Figma design system and then used it to turn our low-fidelity design into a high-fidelity one. We also explored Components and Interactions a little more, and acquired some acutely underrated skills in Figma for ensuring tidiness and organization.

Chapter 4: Handoff In this fourth chapter, we’ll learn how to clean up our (relatively simple) design, check its accessibility, export its assets, and generally just make sure that it’s ready to be “handed off” to developers. Handing off is the process of getting our designs ready to hand over to developers, and ultimately, to end users. It goes without saying that designs should be clean and organized, so that developers are able to translate them easily into code, and accessible, so that users are able to use them easily. Figma has an excellent set of inbuilt design handoff features, meaning that we won’t need to subscribe to any additional tools. These handoff tools translate layer properties to developer-ready code, and also facilitate quick and easy image exporting. Let’s dive in.

Step 1: Cleaning Up the Design Before we think about handing off our design to developers, let’s make sure that it’s clean and organized so that they’re able

to dissect it without issue. This review process is something we should do even if we’ve developed the habit of cleaning up as we go along. The first thing that we’re going to do is ensure that our design doesn’t have any redundant layers. This is to make it easier for developers to do things like traverse the design’s layers when inspecting their properties. Click on the “Resources” icon (command + I / ctrl + I) in the horizontal toolbar, switch to the Plugins tab, search for “Clean Document”, click on the Run button, and then choose Delete Hidden Layers, which will delete any hidden Layers that aren’t locked.

Since our design is relatively simple, we might not expect there to be any hidden Layers, but the Clean Document facility will find and delete one, which just shows how important cleaning up is. Now, run Clean Document again, this time choosing Ungroup Single-Layer Groups, which will essentially delete any Groups that aren’t actually Grouping anything.

Next, make sure the Layers are aptly named so that both we and developers can traverse them with ease. Doing this also provides images with suitable filenames when exported. There’s no specific step that we need to take here (especially since we named the majority of our Layers along the way). Just make sure that the Layer names are short and descriptive. Developers might have specific requirements when it comes to naming certain Layers, but we’ll look at those a bit later. Finally, let’s ensure there aren’t any inconsistencies in our design’s property values. (Examples of this include slightly incorrect font sizes and slightly “off” colors that don’t appear anywhere else in the design.) If we’re reusing Styles, we shouldn’t expect to find many of them (if any at all), but even one or two inconsistencies can stall the handoff workflow, so it’s best to make sure. After selecting Navigation, run the Design Lint plugin. This will highlight any Layers that aren’t attached to Styles (as shown in the image below). For each one, we can choose to attach a Style (if needed) or ignore it. Anyone who made the same mistake as I did will need to apply the “Interface/Text” Color Style to both of the Rectangles that make up the hamburger icon, as indicated by the “Missing fill style (4)” error. Click on the … icon

and then choose Select All (4) to select the Rectangles before applying the Color Style.

Right away, Design Lint will say “All errors fixed in the selection”. There shouldn’t be any other errors in this Frame or other Frames, but if there are, feel free to fix them in a similar fashion before moving on. The Colors Were Correct! Any readers thinking that the Rectangles were the correct color already are, of course, quite right. They were indeed. However, they still should have had the right Color Style applied.

Step 2: Checking the Accessibility When it comes to accessibility, there’s a lot to consider: labeling form controls, using discernible links, establishing a heading hierarchy, optimizing typography for readability, designing optimally sized touch targets, and so on. However, these considerations aren’t difficult. They don’t require many tools; they’re simply things to consider alongside usability. To ensure that colors are accessible, we’ll need to use a color contrast checker, because it’s impossible to check otherwise. Luckily, this can be done in Figma using the Stark plugin. We’ll focus on the button Component, as it’s the only aspect of the design with questionable color contrast.

After creating a Stark account, navigate to our Design System Library and locate the “main” version of the Component. Next, select the button text and button background (of any Variant) simultaneously, and then run the Stark plugin.

Next, click on Contrast, and then log in when asked to do so.

After logging in, Stark will make it clear that the colors don’t meet the minimum accessibility requirements for normal text, so we’ll need to edit the background color, which Stark Pro users can do by clicking on any of the “Suggestions”.

If we don’t have access to Stark Pro, we’ll have to edit the Color Style manually (don’t forget the hover state too). Tap esc to unselect the Layers, click on the “Edit style” icon next to the “Primary” Color Style, and then choose a new color from there. Confirm with Stark that the new color is accessible and then repeat these steps for the “Primary (hover)” Color Style. Go with 0072A3 for “Primary” and 007DB1 for “Primary (hover)”.

When we’re ready, we can click on the chevron icon next to the document name in the horizontal toolbar and then navigate through the usual “Publish styles and components” workflow.

Switch back to the design and Review the changes (and update them).

Next, let’s make sure that our design looks okay for those with color vision deficiencies (CVDs). Run Stark again, this time clicking on Vision Simulator and then the Simulation tab. After that, use the “Artboard” and “Simulation” settings to switch between our design’s different Frames and types of CVD to make sure that everything looks suitable to everybody.

Stark has other useful features, some of which are free and some that are only available to Pro users. (Interestingly, the macOS app offers all of the features for free.) But I wouldn’t call these features essential. We addressed color contrast and CVDs using Stark because it’s inconvenient to address them using external tools, but other aspects of accessibility don’t require any tools. That being said, Stark is the most comprehensive accessibility tool by a wide margin, so it’s definitely worth exploring. There’s one more aspect of accessibility to address that you won’t naturally address through visual design, and that’s the labels and alternative text descriptions (or “ alt attributes”). As designers, we should provide developers with alt tags for images (which makes them accessible to those using screen readers and when the images fail to load). Similarly, we should also provide label text for unlabeled form controls and sections/landmarks that don’t have headings (again, for those who use screen readers). We’ll use comments for this. As we did in the second tutorial, click on the “Add comment” icon (C) in the horizontal toolbar, click on the canvas where you want the comment to appear, type the comment into the input field, and then click on the ↑ icon to submit it (or press return).

Here’s some suggested text for each comment: For the navigation: “Primary navigation” For the navigation icon: “Open navigation/Close navigation” For the image: “A whimsical illustration of an astronaut casually walking through space, surrounded by space matter”

Step 3: Specifying the Export Settings As designers, it’s unlikely that we’ll need to export assets. Developers will not only do this themselves as needed (they’ll only require “can view” access for this), but they’re also best equipped to know which export settings to use. That being said, if we’re savvy about developer needs, it’s a huge win if we’re able to help out, so let’s see what we can do. Let’s start by specifying the export settings for the “Desktop - 1” image. Select it, then click on Export at the bottom of the Design panel. The first setting sets the asset’s resolution. The default setting is 1x , which means that the asset will be exported at its current size, which is what we want.

OTHER EXPORT OPTIONS

Options for 512w and 512h also appear in the list. These mean that the asset would be 512px wide or 512px tall respectively (maintaining aspect ratio for the opposite dimension)—which is useful for assets such as favicons that are usually exported at a variety of specific sizes. Also, we can type a custom width, height, or resolution into the field.

Skipping the “Suffix” for now, change “PNG” to “JPG”, since it’s a non-transparent bitmap image that will have a smaller file size when exported in JPG format.

Next, click on the nearby + icon to add another export setting. By default, the resolution should be 2x , which happens to be what we want, and which means that this export will be double the size—which is ideal for screens with 2x resolution. Figma automatically adds the @2x Suffix to the filename. Mobile operating systems require this specific suffix format in order to serve the image at the correct resolution, whereas with websites it’s just for semantic clarity and differentiation. Also, make it a JPG.

When developers (or we) are ready to export the image, they can click on the Export button to save it into the default save location of their computer. The file name will match the layer name, so if it’s not suitable, we may want to consider changing that now (“splash-image-1” sounds suitable). We’re not developers, so let’s skip the actual saving/exporting for now.

Developers can navigate to the source of Unsplash images by clicking on View image on Unsplash from within the Plugins section (directly underneath the Export section), if needed.

Now let’s establish the export settings of the hamburger icon. Select it, then click on Export, just as before. Leave the resolution at 1x , but change the format to “SVG”, since the image doesn’t contain any bitmap elements. SVGs are vectors, meaning they’ll scale to any size without degrading the quality (hence why we only need to export them at 1x ). Developers can also transform them, so they’ll be able to animate the hamburger icon SVG into an x/close icon programatically.

Developers might want to export all assets marked as exportable at once, which they can do by navigating to the “Main menu” icon and in the horizontal toolbar and choosing File → Export… (shift + command + E / shift + ctrl + e). As a bonus, they can also save different assets into different folders of their codebase using a simple Layer renaming trick. Depending on how involved we want to be with the design handoff workflow and how well we’re able to communicate with developers, this is also something we can assist with. Rename “Hamburger icon” to “icons/icon-navigation” and the splash image to “images/splash/splash-image-1”.

This will result in the following file structure: - icons - icon-navigation - images - splash - splash-image-1 If a folder doesn’t exist, it will be created automatically. Developers will need “can edit” access to rename Layers.

Step 4: Seeing How Inspect Works As designers, we won’t be “inspecting” the design—that is, seeing how it translates to code. However, we should still see how it works. In addition, there’s one thing we do need to worry about, and another thing that we don’t, so we’ll discuss those briefly. Start by selecting any Text layer, then switch from the Design panel to the Inspect panel. Right away we’ll see everything there is to know about this Layer: size, fluidity, position, content, typography, color, interactivity, and so on. This panel helps developers to code the designs.

The thing we need to worry about is Auto layout. When we don’t use it, developers don’t get the right information about layouts and fluidity—that is, the “Spacing between items”, “Fill container”, “Hug contents”, and so on. The thing we don’t need to worry about is the color format used. In the Colors section, developers can use the Hex dropdown to convert colors to other formats (RGB, CSS, HSL, and HSB), so we can use whatever color format we like.

Summary In this tutorial, we cleaned up our design and checked its accessibility. Design handoff isn’t a one-and-done process, but it certainly can become tiring when developers constantly feel like they’re not getting what they need and have to make several unnecessary round trips to end up with a finished design. We also learned a little bit about image exports and what developers might need from us in terms of export settings and layer names. And finally, we also learned how our designs translate into code. It’s not a lot of code—only styles—but in the next tutorial we’ll take a look at some more sophisticated Figma workflows— one of which is an advanced design system management workflow where designs are more tightly integrated with complete code components.

Chapter 5: Advanced Workflows In this final chapter, we’ll take a look at some advanced Figma workflows. We’ll explore some totally new concepts, but also expand on some of the concepts explored in earlier tutorials. We’ll look at data syncing in more detail, as well as Components and design systems. We’ll also dive straight into the deep end of typography, drawing, and usability testing. Along the way, we’ll look at how to use a few Figma plugins too.

Requesting Data from an API Pulling data from an API into a Figma Layer is one of the coolest, most useful things we can do using Figma. If we were working on a mockup for Airbnb, for example, and we wanted to insert apartment data into it, we’d want to use the Airbnb API for speed, realism, and realtime updates. In this first step, we’ll use the Data Sync plugin, which enables us to request JSON, XML, or CSV-formatted data from Google Sheets and APIs, and then insert it into our mockup. Start by selecting the Text layer in “Desktop - 1” with the “Larger” Text Style applied, then run the Data Sync plugin.

Now let’s assume that what we’re designing tells users what their IP address is. We’ll use the ipify API to find out what ours is and insert it into the Layer. Paste https://api.ipify.org/? format=json into the text field and then click on the Load button, which will request the data from the API before switching us to the Connect tab. (This is an open API, so we don’t need to include any authentication credentials.)

We’ll see the data returned by the API right away, which in this case is our IP address. Click on it and then click on the Insert button to replace the Layer’s content with the data.

Change the content of “Heading” to “Your IP address is…”

SETTING UP APIS

Most APIs require authentication and request options, so unless we’re using an open API like the one above, it’s best to reach out to one of our team’s developers for help setting up APIs in Figma. That being said, data returned by APIs can be reformatted in Figma using JavaScript, so it might be worth learning some JavaScript to make it easier to work with APIs.

Creating a Variable-font Logomark Figma supports variable fonts (that is, fonts with customizable axes such as “italic” and “optical size”). Let’s customize the logo into a logomark using a variable font. Start by selecting the “Logo”, then click on the “Detach style” icon in the Design panel (since we no longer want to use its Text Style).

After that, change the content to “IPFind” and the font to “Fraunces” (a variable Google font with various customizable axes). Next, click on the “Type settings” icon in the Design panel, switch to the Variable tab, and then apply the following settings: Weight: 900 Soft: 100 Wonk (makes some letters less uniform): 1 Optical size: Set optical size automatically

While almost 100% of web browsers support variable fonts, it might be more performant to export the logo as an SVG to avoid serving an extra font file to users unnecessarily, so click on the Export button in the Design panel and then change “PNG” to “SVG”.

Creating a Button Icon Iconography is a lost art. Illustration is super time-consuming, and there’s an abundance of resources out there already. So it’s not always worth reinventing the wheel. But we may need a specific art style, or the icon framework we’re using may not have the icon we want, so it’s worth diving into how illustration works in Figma a little bit. In this step, we’ll learn how to draw and manipulate vectors in Figma as we create an icon to accompany the button. Start by switching to our Design System Library (as this is where we’ll create the icon) and then creating a 16×16 Frame, which will be the bounding box for our icon. Paul Wilshaw explains why it’s best to use 16×16 in his write-up on icon design.

Next, click on the + icon next to “Layout grid” in the Design panel to add a Grid to the Frame, click on the “Layout grid settings” icon, and then change the “Size” to 1 to make the individual square pixels clearer. To ensure the icon displays clearly at most sizes and screen resolutions, the objective will be to align the icon with the grid lines as much as possible.

Now for the icon itself. Start by creating a Rectangle shape and specifying the “W” as 16 and “H” as 10 , and then click on the “Independent corners” icon before specifying the corner radii as 0 , 5 , 5 , and 0 in that order (that is, clockwise starting from the top-left corner).

Next, duplicate the Layer and change the “Rotation” to 90 .

After that, snap the Layer to the left edge of the Frame and the other Layer to the bottom edge of the Frame, and then, with both Layers selected, click on the “Union selection” icon in the horizontal toolbar to fuse the Layers into a single Layer.

Change the “Rotation” to 45 —and that’s the heart shape done.

Before we make the heart shape fit into the Frame, add a Stroke (border) by clicking on the + icon next to “Stroke” in the Design panel, choosing 2 for the “Stroke width”. Later on, this will offer us the opportunity to use outlined icons as well as filled icons.

DISPLAYING ICONS AT DIFFERENT SIZES

To display icons at a different size, it’s best to scale them rather than resize them. The difference is that the Scale tool—under the “Move tools” icon in the horizontal toolbar (K)—also scales sizes such as Stroke width proportionally, whereas resizing doesn’t affect sizes such as Stroke width.

Next, right-click on the icon, and then choose Flatten (command + E

/ ctrl + E). We’ll see that, while the Rotation is no longer in

effect, the Layer remains how we set it, which means that we can now resize it horizontally and vertically instead of diagonally (which yields an odd effect).

After that, click on the “Constrain proportions” icon in the Design panel, set the largest dimension (which should be “W”) to 16 , click on the “Constrain proportions” icon once more (so that the dimensions are no longer constrained), round the “H” down to 14 (so that the icon only fills full pixels), drag-snap it into the center of the Frame, and then click on the — icon in the Fill section to remove the Fill.

When designing icons, we should try to use all available Frame space so that multiple icons can be aligned horizontally or vertically if needed. However, this isn’t always feasible, so it’s okay to resize icons slightly when necessary. Doing so doesn’t affect Stroke width, so we won’t need to worry about them looking inconsistent. To ensure that an icon scales with a Frame when we resize the Frame, change the “Left” and “Top” to “Scale” in the Design panel (in the Constraints section).

Finally, select the Frame and then click on the “Resize to fit” icon to trim the negative space, thus resizing the Frame.

Icon Design We can also try our hand at drawing from scratch and/or using shapes and editing them. However, it does require quite a bit of skill and time to learn. Icon design itself is also very timeconsuming, especially when there are so many free design resources out there. Figma has a video tutorial that walks us through this, but the Font Awesome plugin is probably the best solution for implementing icons today.

Adding Icons to the Button Component In this step, we’ll add an icon to our button Component and then Component Properties, which will enable us to use any icon in a button instance or not use an icon at all. This makes our button Component more flexible. Start by renaming “Frame 1” to “icon/icon-heart-outlined”, and then remove the Layout grid and Fill (since we don’t need them any more and don’t want them to show up in any instances).

Next, select the icon itself, change the “Stroke fill” to FFFFFF , then create a Color Style from it called “Interface/Text (Alt)”, since we happen to be using this color elsewhere.

After that, switch to “icon/icon-heart-outlined”, duplicate it, rename the duplicate to “icon/icon-heart-filled”, and then select the actual icon within it before applying the “Interface/Text (Alt)” Color Style to the Fill and Stroke Fill, thus creating two versions of the icon—one outlined, one filled. It should appear as shown below.

Finally, turn both versions into Components with Auto layout.

AVOIDING COLLABORATION ISSUES

If we’re collaborating on design systems and we don’t want collaborators to accidentally publish the Styles or Components that we’re currently working on to any design documents that use the design system, simply rename them to include a “.” at the beginning of the Layer’s name. This wasn’t necessary above, because we’re not collaborating, and converting the icons into Components was the final step we took, but it’s certainly something that’s worth remembering when working with others.

Now that we have some icons, let’s use them in our button Component. Copy (command + C / ctrl + C) “icon/icon-heart-filled” to the clipboard, select the “Default” Variant of the button Component, paste (command + V / ctrl + V) the icon Component (as an instance), and then tap [ on the keyboard to change the button icon/button text order. It should look like the image below.

After that, click on the “Create instance swap property” icon in the Design panel (next to the instance name), call it “Icon symbol”, and then click on the Create property button— enabling us to choose which icon is displayed at the Component (instance) level. “Instance Swaps” don’t support Component Variants, which is why our icons are two separate Components.

A GOOD HUG

We can create button instances with icons of any size thanks to the default “Hug” settings of Auto layout, which we applied a few moments ago. Thanks to this trick, Instance Swaps don’t require the instances to be the same size.

Next, click on the “Create Boolean property” icon in the Layer section of the Design panel, call it “Icon”, and then click on the Create property button—enabling us to create instances of the button without an icon.

Before we move towards seeing these Component Properties in action, copy the icon (as before) into the “Hover” Variant.

Organizing the Design System Library Before we publish our Design System Library changes, let’s organize our Library, dive into design systems a little more, and explore some useful plugins for managing design systems. First, let’s split our Design System Library into multiple Pages —“Colors”, “Typography”, “Icons”, “Buttons”, and so on—to make it easier for stakeholders to find what they’re looking for. Start by clicking on the “Page 1” drop-down in the Layers panel before clicking on the + (“Add new page”) icon and calling it “Colors”.

Next, create four Rectangle shapes (organize them 2×2) and then apply a different Color Style to each one. Organize the Color Style categories—“Interface” and “Brand”—vertically, and the Color Styles horizontally, or whatever makes sense. If the design has any notable color combinations, overlay smaller Rectangles to depict this. (For example, our design uses black text on white backgrounds, and white text on blue backgrounds, but it doesn’t use white text on black backgrounds.) So with all of this in mind, we should end up with something like the image below.

We Still Need Documentation Organizing design systems like this doesn’t replace design system documentation. It simply helps to demonstrate what the design system offers in a more visual and accessible way. So in this case, if somebody were to need a bird’s-eye view of the design system’s colors, they would navigate to the “Colors” page and see the range of colors and color combinations on the canvas. Then, if they needed more information, they could find the design system documentation in the Design panel. Similarly, create another page called “Typography” and cut (command + X / ctrl + X) and paste (command + V / ctrl + V) the Text Styles into it. Pretty straightforward.

Do the same thing for the icons, calling the page “Icons”.

Finally, switch back to “Page 1”, rename it to “Buttons”, click on the “Button” Component, click on the “Resize to fit” icon in the Design panel, and then insert all variations of the button Component onto the canvas (go to the “Resources” icon in the horizontal toolbar and choose Components)—again, organizing them in whatever way makes sense.

The navigation Component (which resides within the mockup itself) can stay where it is, as it’s unique to that design. To wrap up this step, click on the down-arrow icon in the horizontal toolbar, click on Publish styles and components, and then click on the Publish button to publish the changes we made.

Next, after switching back to our mockup, click on the Review button in the bottom-right corner, and then click on the Update all button to accept the changes into the mockup.

Tidying Up Aaaand we’re done—sort of. Let’s just resize our Frames (because everything is overflowing right now) and tidy up. First, copy over the “113.161.102.127” and “Your IP address is…” content from the desktop version to the mobile version.

Next, copy the “IPFind” Layer to the clipboard, select both “Logo” Layers in the navigation Component, right-click on one of them, and then select Paste to replace (command + shift + V / ctrl

+ shift + V). Naturally, the instance of the Component in the

mobile version will update accordingly. After that, Paste to replace the image to the mobile version, turn off “Constrain proportions”, change the “H” to 223.33 , and then turn “Constrain proportions” back on. It should appear as shown below.

Also, select the button Component and change the “Label” Component Property to “Upgrade”. On that note, we can change the icon-related Component Properties that we created earlier on in the tutorial if we think the other icon style should be used (or no icon should be used at all). The beauty of Properties is that they can all be defined at the Component level. Next, copy the button Component, select the image in the desktop version, and then paste the button Component. (It will appear immediately after—that is, visually under—the image that’s selected.

Lastly, let’s resize the mockups to fit the content. We’d expect the “Resize to fit” feature to be useful here, but it actually behaves unexpectedly when using Auto layout. If we were to select “Mobile - 1” and then click on the “Resize to fit” icon (don’t do this!), we’d wind up with the monstrosity pictured below.

Resize the Frame manually instead. It’s a vanilla way of approaching it, but it works. Do the same for “Desktop - 1”.

Summary In this final tutorial, we learned how to insert data from external sources into our mockups and how to customize the axes of variable fonts in Figma. We also took a look at how icon design works in Figma, before learning how to make more advanced Components where an optional icon can be used and customized. And then to wrap up, we organized our design system a bit, since it became more complex in this tutorial.

Plugins to Check Out There are lots more Figma plugins and other useful third-party apps that are worth checking out. We’ll end by reviewing a selection of them. Zeroheight and Zeplin are two design system management tools that don’t replace what we need to do in Figma in regards to design systems, but do make it easier (than Notion does) for teams to keep design, documentation, and code in sync. Zeplin is also a design handoff tool that can translate designs to more code languages than Figma can. ProtoPie helps us create interactions that are more complex than those we can create using Figma. Exporting Figma

mockups to ProtoPie is rarely worth the trouble and expense, but if our design is fairly interactive, ProtoPie is considered to be a fantastic tool. Useberry, Maze and Ballpark are research tools. After using them to set some tasks or questions and dropping our Figma document’s share link (there isn’t actually a Figma plugin involved), we can observe and measure how effective our design is. Features typically include surveying, screen/face/voice recording, heatmapping, A/B testing, and analytics, so there’s a fair amount of quantitative and qualitative data to help us improve our design iterations. Haikei.app isn’t a Figma plugin either, but it creates stunning SVG effects—such as blobs and waves—that we can copy into Figma and customize. There are also the Blobs and Get Waves plugins, but the SVGs aren’t as customizable. The Confetti plugin helps us create that cool confetti effect that otherwise requires a fair bit of manual effort. It’s nothing revolutionary, but it’s a common visual effect! Iconify helps us insert icons from 100+ icon sets, for those who aren’t into creating them from scratch—which is quite fair enough!

FigJam is Figma’s collaborative whiteboard app that’s not included in Figma’s subscription, but it does have its own free subscription. We can export Figma Frames to FigJam documents to annotate and talk about them with stakeholders. Aaaand, that’s it! I hope you’ve enjoyed this tutorial. If you have any questions or feedback, don’t hesitate to reach out on Twitter.