Designing in Figma

by Eugene Fedorenko
On the web: figmabook.com
Please send errors to hello@efedorenko.com
Version 1.1

Copyright © 2020 Eugene Fedorenko

All rights reserved. This book or any portion thereof may not be re-
produced or used in any manner whatsoever without the express writ-
ten permission of the publisher except for the use of brief quotations
in a book review.

Copyedited by Doug Warren

To Natalya and Alisa
Contents
INTRODUCTION  1 BUILDING A DESIGN SYSTEM 108

• Components  110
GETTING STARTED  4
• Styles  126
• State of Design Tools  5 • Team Library  129
• Why Switch to Figma?  7 • Version History  136
• Browser vs. Desktop App  10
• Figma Interface  12 WORKING WITH DATA  139
• Color Space  14
CONCLUSION  146
BASIC ELEMENTS  15

• Move Tools  17
• Shape Tools  19
• Vector Editing Toolset  28
• Boolean Groups  36
• Masks  38
• Fill, Stroke, and Effects  40
• Text  57
• Exports  66

CREATING LAYOUTS  69

• Tidying Up and Smart Selection  71

• Groups and Frames  76
• Constraints  80
• Layout Grid  85
• Rulers and Guides  92
• Auto Layout  94
• Pages  102
• Links  107
Introduction
Introduction 2

My first attempt at using Figma was quite disappointing. After

scoring an invite to the closed beta in March 2016, I played
with it for half an hour. The way it worked in a browser was
impressive, but the app was too rough and buggy overall.

A year later, I gave it another try and was thoroughly im-

pressed by the progress the company had made. The whole
experience was much more polished. Still, I wasn’t ready to
use it for my work.

https://twitter.com/efedorenko/
status/856919804992684032

In 2018 Sketch was my primary design tool, but its ecosystem

and pay-per-computer pricing became annoying. Essential
parts of the workflow, like prototyping, commenting, and
handoff, required 3rd-party services, so things became less
reliable as there were too many moving parts. My colleague
and I split a large design project into multiple smaller files so
we could work on them independently without overwriting
each other’s changes. I also faced issues caused by working on
multiple Macs — app versions and plugins were getting out of
sync, I had to remember to save and close files before switch-
ing to a different computer, and files themselves had to be
stored in the cloud.

During all that time, I occasionally used Figma for random

illustrations and liked it more and more. Finally, at one point,
I imported all my Sketch files with dozens of screens for the
current project into Figma and committed to making it work.

Most people starting with Figma fall into one of two camps —
they are either switching from Sketch or are entirely new to
UI design. This book won’t teach you design and focuses only
on the app, but where appropriate, I try to discuss fundamen-
Introduction 3

tals and best practices. The goal is to help you design effi-
ciently and achieve mastery of the tool.

When switching to Figma in 2018, I looked for a short and

concise manual that I could read in a couple of evenings, but
all I could find were basic introductions and long video cours-
es. They might work for some, but nothing beats a good man-
ual for me. There is just something special in compressing all
the knowledge about the topic or a tool into one book. When
done well, the manual can be an elixir of mastery.

To keep the book reasonably short, I focused only on the

design process and left prototyping and animations out of
scope. They are not as universally used as the design tools, of-
ten require external tools or services, and not easy to explain
in a written form. I may consider working on these topics sep-
arately in the future, but this is still up in the air.

I hope you’ll enjoy the book and learn something new from it!
Getting Started
Getting Started 5

State of Design Tools

For a long time, Photoshop was the primary tool without any
serious competition. A few seasoned designers may recall
Fireworks as the first tool built for screen design, but person-
ally, I met only a few people who used it in the mid-2000s.
Adobe didn’t pay much attention to Fireworks after acquiring
Macromedia and eventually stopped development after the
last release in 2012.

That also was the year when the Sketch app, developed by
the Dutch company Bohemian Coding, won an Apple Design
Award. While still immature and a little buggy, it felt like a
breath of fresh air — the app was specially designed for the
needs of UI designers, worked blazingly fast, and felt light-
weight. Soon, there was a growing market of apps integrating
with it — Craft by InVision for prototyping, Zeplin for devel-
oper handoff, Abstract for version control, and a whole lot of 1 Brown CS Alum Evan Wallace
plugins addressing different needs. Has Been Named An INC 2019
Rising Star
The beta version of Figma was released in 2015. The company http://awards.cs.brown.
edu/2019/11/11/brown-cs-alums-
was founded by Dylan Fields and Evan Wallace, who met at dylan-field-and-evan-wallace-
Brown University 1. In 2012 Evan built a WebGL demo with a named-inc-2019-rising-stars/
sphere in a pool of water that immediately made the power of
the new technology clear to them 2. They began with an idea 2 Interview with CEO of Figma,
Dylan Field
of building a Photoshop-like app in a browser, but soon real-
https://medium.com/blueprint/
ized that a mobile app would be a better place for working on interview-with-figma-ceo-dylan-
photos that primarily were taken on smartphones. field-d9e05bbd9353
Getting Started 6

Evan Wallace, WebGL Water, 2011.

© Figma

After completing several internships at major tech companies,

they got frustrated with the lack of cloud-based collabora-
tive tools for interface design and pivoted in this direction.
The whole focus on cloud-based technology and interactivity
made it a very appealing option both for individual designers
and teams looking to improve collaboration.

Today, there is a sizzling competition between Sketch, Ado-

be XD, Figma, and a few new contenders like InVision Studio
and Framer X. All of them are being actively developed, have
unique strengths, and provide smart solutions to difficult
problems. We can be picky with the options now, but just
a few years ago, we would have been happy with any one of
them.
Getting Started 7

Why Switch to Figma?

Comparing apps feature-to-feature is a sure way to make this
chapter outdated very soon. (Figma and Sketch ship updates
every few weeks, and other competitors are not far behind.)
Instead, I’ll highlight common reasons among teams switch-
ing to Figma.

ENHANCED COLLABORATION

Collaborating in Figma compared to other design tools is like

working together in Google Docs compared to editing a Word
file in a shared folder. Sure, you can take turns editing and
communicate back and forth to avoid overwrites, but the mo-
ment you see multiple cursors working together on the same
document in real-time, there is no going back. Between col-
laborating on the same screens with other designers, sharing
clickable prototypes with shareholders, and having discus-
sions in comments, there is not much more to wish for.

POWERFUL COMPONENTS

I believe Figma has the most powerful implementation of re-

usable components. The system of instance overrides is really
flexible and includes size, visibility, styles, text, and even nest-
ed components. This dramatically reduces the need to detach
instances from the main component. All of that will be dis-
cussed later in the book.

I also prefer the granular sharing of components from individ-

ual documents compared to global Libraries in Sketch. This
provides more flexibility when building a design system, im-
proves organization, and reduces the number of components
available in every individual document.
Getting Started 8

BUILT-IN DEVELOPER HANDOFF

Zeplin, Inspect Mode in InVision, Avocode, Sketch Measure

plugin — there are tons of 3rd-party tools for passing assets
and style-guides from designers to developers, but all of them
require maintenance and syncing. Figma’s approach is more
straightforward — invite developers to your account with
view-only access, and they can reference code snippets and
copy assets straight from your original design system. Fewer
moving parts is better.

BUILT-IN PROTOTYPING

InVision used to be a go-to app for creating and sharing click-

able prototypes, but in 2018 Sketch added their own built-in
solution 3. Still, most people prefer Figma’s approach when 3 An in-depth look at Prototyping
in Sketch
designs are always in the cloud, and there is nothing to upload
https://blog.sketchapp.com/an-
before sharing. in-depth-look-at-prototyping-in-
sketch-942394341f3c

PRICE

Figma’s free plan is very generous and probably explains why

more than 80% of its active users are currently outside the
United States 4. Being browser-based and free for personal 4 Made in Figma, 2019: Design by
the numbers
use makes it a fantastic choice for beginners and designers
https://www.figma.com/blog/made-
in developing nations, which is uncommon for a high-quality in-figma-2019/
professional app. Most people will need to upgrade only when
they ran out of projects, start using it with a team, or decide
to build a shareable item library of components.

Even while the monthly subscription cost for Figma, Sketch,

and Adobe XD is in the same ballpark, most teams won’t need
3rd-party services like InVision, Zeplin, or Abstract anymore
and could significantly reduce the total cost.
Getting Started 9

MULTI-PLATFORM

As Figma lives in a browser, it works on all major platforms,

including Chromebook! Recent updates to iOS and Figura- 5 https://figurative.design

tive 5 app make it usable on an iPad as well, but there is no

official support yet. This is huge for teams where people may
be using multiple platforms and can still collaborate and ac-
cess files.

As you may notice, the majority of the reasons to switch are

related to Figma’s browser-based architecture one way or
another. I believe this is a disruptive innovation in action.
While other apps are trying to catch up with their cloud-based
collaborative tools, most feel like a hack built on top of classic
apps. It’s similar to tweaking and optimizing a combustion
engine, while other manufacturers are shipping electric cars.
Getting Started 10

Browser vs. Desktop App

Figma’s biggest selling point is that it is a browser-based col-
laborative design tool. It’s great that team members don’t
need to install a new app to review designs, comment, or
check values during implementation. But if you’re spending
significant time in the app, at the very least ensure that your
browser is properly configured 6 and install an official Font 6 Configure your browser for
Figma
Installer 7 to make local fonts available in the app.
https://help.figma.com/hc/en-us/
articles/360039828614-Configure-
Better yet, just use their desktop app if you’re on macOS or your-browser-for-Figma
Windows. Here are a few reasons to do this:
7 Figma Downloads
https://www.figma.com/downloads/
• Access to local fonts without running a system service.
• Ability to work in an Unmanaged color space.
• Figma works best in Chrome, but if you primarily use anoth-
er browser, there is no need to run Chrome just for Figma.
• The app is optimized for and the most stable in the version
of Chromium used in the latest desktop app.
• The desktop app preloads editor in the background, so new
file creation is much faster.
• More flexibility when exporting assets, as the browser can’t
save multiple files at once and has to archive them.
• Browser interface doesn’t take up valuable screen real estate.
• You can open multiple windows of the app (Shift-Com-
mand-N on Mac or Shift-Ctrl-N on Windows). This comes
handy when you have multiple displays or working on the
same file at different zoom levels.

My only gripe with the desktop app is its two inconsistent

menus, one on the system level and another in the app, but
this is only a minor annoyance. Besides this, there is no rea-
son to use Figma in the browser, if you can use the app. To
make sure that all links to files will open in the right place,
8 Open Figma links in the Desktop
enable Preferences → Open Links in Desktop App item in the
App
menu. 8 https://help.figma.com/hc/en-us/
articles/360039824334-Open-
Figma-links-in-the-Desktop-App
Getting Started 11

If you’re feeling brave, Figma provides a beta version of the

app with features that haven’t been released yet. It may not be
stable, but you can try it by downloading from the help arti- 9 Beta version of the Desktop App
https://help.figma.com/hc/en-us/
cle 9.
articles/360039823654-Download-
the-Figma-Desktop-App#Beta_
version_of_the_Desktop_App
Getting Started 12

Figma Interface
Just so we’re on the same page when it comes to Figma’s in-
terface, let’s review it and name its different areas.

On the very top of the Desktop App, a Tab Bar provides ac-
cess to the File Browser (the Figma logo), open documents in
tabs, and a button to create a new file. When using Figma in a
browser, a Tab Bar is not displayed as only one document can
be open in a browser tab.

The File Browser shows all your projects and files, which may
be viewed in a grid or list view and opened by double-clicking.
The plus icons in the Tab Bar and the sidebar create a new
draft, while the one in the top-right corner of the File Browser
creates a new file in the open project. You can also import a
Sketch file using the Import icon in the top-right corner of the
File Browser, or File → New from Sketch File… in the “ham-
burger” dropdown menu.

When viewing a file, there is a Toolbar that has a button for

opening a “hamburger” menu, a panel of tools, the file name
in the center with actions dropdown, and viewing, sharing,
and presenting options on the right. The content of the Tool-
bar changes based on what you have selected on the canvas.
A search for menu options can be quickly opened with Com-
mand-/ shortcut.

The Layers Panel on the left can be toggled with Command-|

shortcut. If you have multiple expanded groups or frames,
they all can be collapsed with Option-L shortcut. This panel
also includes Pages and Assets.
Getting Started 13

Properties Panel on the right changes based on a current selec-

tion and includes Design, Prototype, and Inspect tabs. Both
panels and toolbar can be hidden with the Command-\ short-
cut, which is convenient if you’re working with a large mock-
up on a small laptop screen.

The main area in the middle of the screen is Canvas. Its back-
ground color can be changed in the Properties panel. Zoom
level can be changed with a few nifty keyboard shortcuts; if
you have Use Number Keys for Opacity enabled in the Prefer-
ences menu, hold Shift to access zooming shortcuts:

• 0 for zooming to 100%

• 1 for fitting all your content on a screen
• 2 for zooming to selection

The shortcut I often use to place selection in the center of the

screen is Zoom to Selection (2), followed by Zoom to 100% (0).
This can also be achieved by double-clicking on a layer icon in
the Layers panel.

Help → Keyboard Shortcuts (or Control-Shift-?) is a great

way to learn Figma’s keyboard shortcuts. They are nicely or-
ganized, and shortcuts you’ve previously used are shown in
blue — this way it’s easier to see what you’re missing out on. 10 Create keyboard shortcuts for
Keep in mind that other apps may have global shortcuts in apps on Mac
https://support.apple.com/guide/
conflict with Figma. While Figma doesn’t allow customizing mac-help/create-keyboard-
shortcuts, you can create custom shortcuts on Mac 10 or use shortcuts-for-apps-mchlp2271/mac
3rd-party apps like Keyboard Maestro 11 for reassigning them. 11 Keyboard Maestro
https://www.keyboardmaestro.com
Getting Started 14

Color Space: sRGB vs. Unmanaged

If you want colors to look consistent across your Figma files,
exported images, and browsers, you need to pay attention to
color management. It’s a vast topic with volumes dedicated to
it, so I’ll only discuss the bare minimum relevant to Figma.

Every device that can capture or display an image has a color

space describing a range of colors that can be represented in
an image. sRGB is a default or “least common denominator”
standard from 1996 used by a large number of devices and
applications. If you have a recent display or laptop, chances
are it may have a wider color gamut than sRGB. For example,
most devices made by Apple since 2015 have a Display P3 col-
or space, which can show 25% more colors than sRGB.

Figma in the browser is limited to a universal sRGB color

space, but the desktop app can be set to use your display’s
color space by selecting Color Space → Unmanaged in Figma
application menu. That puts you into a dangerous situation:

• Colors may appear differently for your team members.

• Colors may appear differently between your computers.
• Regardless of your color space, all assets will be exported in
the sRGB.
• Every single color format in CSS is in sRGB 12. 12 https://twitter.com/LeaVerou/
status/1220030443069878282
While it’s exciting to design with the whole spectrum of col-
ors a wide gamut display can show, there is no practical rea-
son to do this until Figma supports color profiles in exports.
It can be really disappointing to carefully pick colors in Figma
only to see them washed out when exported or applied to the
web page. Therefore, make sure that your desktop app’s color
space is set to sRGB.
Basic Elements
Basic Elements 16

A journey of a thousand miles begins with a single step, while

the design of any app starts with basic elements. In this sec-
tion, we’ll review all tools at our disposal in Figma’s toolbar
and Properties panel. If you think that basic tools like an el-
lipse or a pen can’t be different from any other design app,
you’ll be surprised.
Basic Elements 17

Move Tools

MOVE TOOL (V)

Move Tool (shortcut V) lets you select, move, and transform

objects. Select one object by clicking on it, or multiple objects
by holding Shift while making the selection. An object can be
excluded from the selection by clicking one more time while
holding Shift.

You can also select multiple objects by holding the left mouse
button and dragging to create a selection area containing the
objects you want to select. If you start the selection in the
wrong place, you can move it before the left mouse button is
released by holding the Space bar key.

Hold Command (Ctrl on Windows) while clicking to select

an object nested anywhere inside a group or frame (“deep
select”), or double-click to select an object one level deeper.
We’ll talk about navigating groups and frames in more detail
later in the book.

The selected object shows a blue bounding box and dimen-

sions. To measure the distance between the two objects, se-
lect one of them and hold the Option (Alt on Windows) key
while hovering the cursor over another. The distance will
show temporarily in red. The Option key is also used for du-
plicating objects — hold it and drag an object to make a copy.

While the object is selected with the Move Tool, it can be re-
sized or rotated. Drag a side or a corner square of the bound-
ing box to resize an object. Hold the Shift key to constrain
proportions while resizing. Move the cursor slightly outside a
corner square (or press the Command while over it) to rotate
the object.

This is not widely known, but objects can be resized from a

keyboard. Select an object and use a combination of Com-
mand (Ctrl on Windows) and the arrow keys to change the di-
Basic Elements 18

mensions one pixel at a time. Hold Shift to change it by 10 pix-

els, which is a default “big nudge” value that can be changed
in Preferences → Nudge Amount. Useful if you need to tweak
the size just a little bit.

SCALE TOOL (K)

While it may seem that a separate Scale Tool is excessive,

considering the possibilities of the Move Tool, there is a sig-
nificant difference between them. Move Tool resizes objects
while keeping their strokes and effects intact, while Scale
Tool will scale them proportionally. It also works for frames,
groups, components, instances, and text objects that may be
resized but not scaled with Move Tool. We’ll talk more about
resizing in a chapter on Constraints.
Basic Elements 19

Shape Tools
Figma groups multiple tools for creating basic shapes under
the Shape Tools menu in the toolbar. These tools include
Rectangle, Ellipse, Line, Arrow, Polygon, Star, and Image.

Some of the tools use common modifiers to change their be-

havior:

• Hold down the Shift key while dragging a cursor to create

perfect squares, circles, polygons, and stars.
• Hold down the Option key (Alt on Windows) to create or
resize the shape from the center instead of from the corner.
This applies to all Shape Tools.
• Shift and Option can be combined to create a shape from
the center with all sides of the same length.
• After you press the left mouse button and start dragging a
cursor to create a shape, hold the Space bar key to tempo-
rarily move the shape without stopping the creation pro-
cess.
Basic Elements 20

RECTANGLE TOOL (R)

Rectangle Tool is used for recreating rectangles and squares.

The keyboard shortcut for the tool is the R key.

Corners can be rounded by specifying a radius in the Inspec-

tor section of the Properties panel. The values can be set indi-
vidually for each corner by clicking on the Individual Corners
icon. The order of the inputs conveniently matches the short-
hand property border-radius in CSS — top left, top right, bot-
tom right, and bottom left.

Alternatively, you can set a radius with a mouse by hovering

over a selected rectangle and moving any of the four circle
handles inside it towards the center. To set corner radius indi-
vidually, hold Option (Alt on Windows) while dragging. If your
rectangle already has individually set corner radiuses, holding
Option will revert the action and set a unified value.

Corner Smoothing is somewhat buried inside the Individual

Corners section. It’s an interesting and unique feature shared
by multiple tools and will be described in detail at the end of
this chapter.

ELLIPSE TOOL (O)

Ellipse Tool (O key) may seem like the dullest tool in the
menu until you discover Arc Tool used for the creation of ad-
ditional shapes like pie charts, rings, and broken rings.
Basic Elements 21

After drawing an ellipse or a circle (with the Shift key), hover

over it, and a single Arc handle will appear on the right-hand
side. By dragging it up or down, you can create a gap in the
circle and change the Sweep measured in percentages. When
that is done, you’ll have three handles — an already familiar
Sweep, Start handle controlling where the arc begins, and
Ratio handle at the center allowing you to change the circle to
the ring.

To make a closed ring, you will need first to drag an Arc han-
dle to create a pie, then drag Ratio handle to the desired size
for the ring, and finish off by moving the Sweep handle to
meet the Start position and close the ring.

LINE TOOL (L)

Line tool (L key) lets you create lines in any direction. You
can hold Shift while dragging to create a line at a 45° or 90°
angle.

It’s better to use a basic Line Tool for drawing simple lines
instead of a more powerful Pen Tool because of its adjustable
properties. The line created with a Line Tool is recorded as a
starting point, length, and angle, while line created with a Pen
Tool is recorded as two points in a plane. Any property of the
former can be changed later, while the latter can be scaled or
rotated only based on its bounding box. It may sound a lit-
tle confusing, but hopefully, the illustration and a chapter on
Vector Tools will make it clearer.
Basic Elements 22

The line created with a Line Tool is recorded as 300 pixels

long at 45 degrees.

The line created with a Pen Tool is recorded as a square ob-

ject with two connected points. The object can be scaled or
rotated, but the line’s properties like angle or length can’t be
changed directly.
Basic Elements 23

ARROW TOOL (SHIFT-L)

The tool that shouldn’t exist and probably was added only to
bring visibility to the feature. It’s pretty simple — you create
a line, and its endpoint is displayed as an arrow. The arrow’s
size depends on a stroke width, which can be inconvenient if
you’re looking to create a thin but large arrow.

Why shouldn’t it exist? Any line created with a Line Tool or

Pen can be converted into a line with an arrow in Advanced
Stroke properties. If you pick Line Arrow or Triangle Arrow as
a Cap, both ends will be turned into arrows. If only one end-
point should have an arrow, you’ll need to select a line, click
Edit Object button in context toolbar, select the point, and
then pick its Cap. This way, you can even create a line with
two different arrows on the ends.

POLYGON

Polygons can have any number of sides between 3 and 60. The
count can be changed either in the Inspector or by selecting a
polygon, then dragging a circle handle on one of the corners.
Basic Elements 24

The bounding box of a polygon extends beyond the shape

itself to keep the size consistent when the number of sides is
changed. It can be snapped to the shape’s true boundary by
flattening (either right-click on the polygon and select Flatten
or press Command-E on Mac or Ctrl-E on Windows). Keep in
mind that at this moment, the polygon converts into a vector
shape, and the number of sides can’t be changed anymore.

A single value for the corner radius can be set either by en-
tering it into the Inspector field or dragging a circle handle
inside a polygon. At first glance, it appears that setting an in-
dividual corner radius is not supported, but in editing mode,
it can be set for any number of selected points. (Hold Shift to
select multiple points.) Editing mode for any vector shape can
be entered by double-clicking on an object, pressing the Re-
turn on the keyboard, or clicking Edit Object in the toolbar.

STAR

Properties of the Star Tool are very similar to the Polygon

Tool, because technically star is a type of non-convex poly-
gon 1. There are two primary differences:
1 Star polygon
1. Stars are defined by a number of points instead of sides, so
https://en.wikipedia.org/wiki/Star_
a default 5-pointed star has 10 sides. polygon

2. The Ratio is the distance of the inner points of the star

from the center. It’s defined as a percentage of the star’s
overall diameter.

Just as in polygons, corner radius can be set as a unified value

for the shape or individually for each corner.

PLACE IMAGE (SHIFT-COMMAND-K)

It may not be obvious what images have to do with the Shape

Tools menu until we see how they are implemented in Figma.
Both vector and raster images can be placed, but they work
differently.
Basic Elements 25

Vector images placed from SVG become a new frame with fully
editable vector shapes. If you’re into web development, there
is a neat trick for copying SVG from an editor or a web page
straight to Figma. In an editor or a browser’s Inspector, select
an SVG code and copy it to the clipboard. Now it can be pasted
straight to Figma without saving to a file.

SVG code in a browser’s Inspector.

Raster images (PNG, JPEG, GIF, TIFF, and WEBP) are supported
as one of the types of the shape’s Fill. When you place a raster
image, a rectangle shape matching the image’s original size is
created, and the image is applied as its Image Fill. This imple-
mentation provides the flexibility of dragging an image file on
top of any shape’s Fill section to create a custom-shaped il-
lustration. That explains why Place Image is part of the Shape
Tools menu.

One common problem is that by default, raster images are

placed in their non-retina size. This is easy to fix thanks to
Figma’s smart input fields. Make sure that Constrain Prop-
erties is enabled and use width or height field as a calculator.
Basic Elements 26

For example, if the original width was 250, change it to 250/2

and press Return. Both properties will recalculate automati-
cally. Alternatively, you can enter 50% or any other percent-
age value. Other math operations are supported as well, so
experiment with them!

If you need less precision, scrubbing a numeric field can be

worth trying. Try hovering over a field label until the cursor
changes to an arrow, then click and move it to increase or de-
crease the value.

WHAT IS CORNER SMOOTHING?

Back in 2013, Apple released iOS 7, where square app icons

with rounded corners were replaced with squircles. To an
untrained eye, they may look the same, but squircles have a
much smoother curvature, like if a regular rounded corner
was finished with sandpaper to smooth over the part where
the rounding begins. The shape looks more natural, resem-
bling a river pebble or a half-used bar of soap. Unsurprisingly,
they are pretty common in industrial designers — just look at
smooth corners of a MacBook or an iPhone.

Regular rounded corners vs. squircles