Figma: All you need to know

Figma is a collaborative interface design tool that’s taking the design

world by storm. Unlike Sketch, which runs as a standalone macOS
app, Figma is entirely browser-based and therefore works not only
on Macs, but also on PCs running Windows or Linux, and even on
Chromebooks. It also offers a web API, and it’s free!

Figma

Another major benefit of Figma is that it enables real-time sharing

on the same file. When using traditional offline applications such as
Sketch and Photoshop, if designers want to share their work, they
usually have to export it to an image file, and then send it via email
or instant messaging.
In Figma, instead of exporting static images, we can simply share a
link to the Figma file for clients and colleagues to open in their
browsers. This in itself saves significant time and inconvenience in a
designer’s workflow. But more importantly, it means that clients and
colleagues can interact more richly with the work, and review the
latest version of the file.

Today’s learning objectives

 Getting Started

 Designing with Figma

 Styles

 Components

 Auto Layout

 Prototyping in Figma

 Sharing and Writing with others

Let’s dive In!!!

1. Getting started

Getting started in Figma is as simple as going to www.figma.com,

clicking “Sign up”, and entering your details. Once you’ve done that,
Figma will open up with a start screen like this. Click on “New File”
and we’ll get started!
Getting Started

The look and feel of the Figma interface are quite minimal, but it
belies a set of powerful features. Here’s an explanation of the
interface’s main areas (labeled above):

Menu: Unlike regular desktop design apps, Figma’s menus can be

found by clicking the hamburger button in the top-left of the screen.
Take a minute to browse around these menus and see what’s there!
You can also search for the specific command you need. Start typing
in “rectangle” and you’ll quickly find the Rectangle Tool, complete
with a handy reminder of its keyboard shortcut (it’s R, by the way).
Menu

Tools: Here you can quickly access the tools you’re likely to use
most often: frames, shapes, text, etc. (We’ll cover all these tools in
the next couple of days!)

Options: This area shows extra options for whichever tool you have
selected. When no object is selected (as shown above), Figma
displays the file name. When an object is selected, contextual
options appear here.

Layers: Where every element in the file is listed, organized into

Frames and Groups.Canvas: This is where you create and review all
your work.

Inspector: The Inspector shows contextual information and

settings for whatever object is selected. In the image above, we’re
seeing options for the Canvas itself. Note that Figma gives us
separate tabs in the Inspector (Design, Prototype, and Code) — we’ll
cover these later in the week.

Now that you’ve found your way around, let’s start making stuff!
Note that we’ll be referring to keyboard shortcuts a lot in these
tutorials. It’s worth getting in the habit of using these shortcuts right
from the off because they’ll significantly speed up your workflow
further down the line.

2. Designing with Figma

2.1 Setting up new frames (aka artboards)

If you used Sketch, this will all be quite familiar to you.

Press A or F to see all frame options in the properties panel
on the right-hand side and pick the size you wish to work with or
simply draw your own frame. As in Sketch, you can work
at 1x (meaning the actual pixel size) as there is no quality loss when
resizing. You can still export assets any larger size you
might need.
Press “F” to set up new frames

Unlike traditional artboards, you can nest frames within

each other. This allows you to create more complex designs that
interact with each other. More about this later.

2.2 Grid and layout columns

For mobile, you can use a standard 8 point grid. For Web, it’s less
about spacing and more about layout grids so you can start on the
safe side with a popular 12-column bootstrap grid. Or a little
more modern with my personal favorite, a custom CSS Grid.

Adjust the grid in the grid properties menu on the right-hand

side. You can switch from grid to columns or rows and also make
it fixed or fluid and set margins and gutter to your needs.
create grid, columns & rows

The great thing about grids and columns in Figma is that you
can set up multiple grids and store them in your styles (we
will talk about styles in-depth later). This is a handy feature for
adapting your layouts to a range of devices, share them with team
members, or simply re-use them in other projects.

2.3 Layers and groups

As with Sketch, on the left-hand side of your screen, you find the
layers panel.
Layers panel on the left-hand side

 Layers → every new element your add creates a layer

automatically. You can rearrange layers by drag and drop.

 Group layers → Make sure to group layers (select layers and

press cmd+G) to keep your file organized. It also helps you to
quickly move and copy those groups across frames. To select an
element within a croup press cmd and click on the item.

 Pages → You can set up different sections or areas of your

design. There are no rules on what or how to use them. I usually
have separate pages for messy brainstorming, wireframing, and
interactions up to the final version.

 Assets → Your components are kept here, and you will find your

library button in this section (more about the library,
components, and instances at a later point)

 Nested Frames → In Figma, you can also nest frames. This

comes in handy when structuring and prototyping.
2.4 Vector shapes

Figma uses something called Vector Networks, allowing the

creation of complex shapes. Bye-bye Illustrator!

Creating shapes with Figma

For default shapes, pick from the top menu or simply

hit R(rectangle) L(line), or O(ellipse) and start drawing your
shape. Hold shift to keep proportions in place. Each shape
automatically creates its own layer.

To make your own, more complex shape, hit P, or pick the pen from
the top menu. Once finished, simply press enter. No need to
connect and close paths! Nice! You can change properties and
manipulate vector shapes at any moment during your design process
via the properties menu on the right-hand side. Vector Networks are
very powerful if you want to know more. I recommend this in-depth
tutorial from Design+Code.
2.5 Images

Drag the image onto your work area. If you are used to Sketch here
is where you need to adapt to a new format. In Figma, images are
always placed inside a shape (like a mask). To change the
behavior of the image go to Fill on the right-hand properties
window and open the image properties.

Images in Figma

In the dropdown you can choose:

 Fill → the Image will fill the container.

 Fit → As we resize image will never be cropped or hidden

 Crop → the image to the size and selection you need. Note, you
don’t lose the rest of the image as in photoshop, you are only
masking the image.
 Tile → Repeats the original images as necessary, and you can
adjust the size of the tile.

Furthermore, Figma allows adjustment of properties such as

color and saturation. Note that they are always re-adjustable and
you will not lose the original image properties at any time.

2.6 Typography

Figma comes preloaded with fantastic google fonts! In case

you prefer using local fonts, you either need to install Font
Helper or the Desktop App for Figma. Also, make sure everyone else
accessing the file has the same fonts installed.

Press T, to draw a text window, or simply click and start typing. You
can set all text properties on the right-hand side properties menu.

Text in Figma
Text box behavior such as auto width, auto height, and fixed-size
will be relevant once we talk about auto-resizing later.

3. Styles

Styles may be used to describe the color, text, and effects applied to
objects, as well as the form and appearance of pattern grids.

Styles can be created for the following

Paints and colors: fill, stroke, background-color

Paint and colors

Text: font family, size, line height, spacing

Text

Effects: drop shadow, inner shadow, layer blur, background blur

Effects

Layout grids: row, column, grid

Layout grids

When you change a style’s attributes, such as changing the color of a

text style from red to blue, Figma can add those modifications to all
items that use that style.

Types, like modules, can be exchanged by adding them to the team

library. This makes it simple to create and retain standardized styles
throughout the team’s projects.

4. Components

Components are elements you can reuse across your designs. They
help to create and manage consistent designs across projects.
Components make your design (and later programming) consistent
and allow for easy updating and scaling and will save you a lot of
work!

Components

You can create components from any layers or objects you’ve

designed. These could be a whole range of things like buttons, icons,
layouts, and more.

There are two aspects to a Component:

1. The Main Component defines the properties of the Component.

2. An Instance is a copy of the Component you can reuse in your

designs. Instances are linked to the main Component and receive
any updates made to the Component.

You can create components to use within a single file. Or, you can
use Team Library to share components and Styles across files and
projects.

5. Auto Layout

Auto layout is a property you can add to frames and components. It

lets you create designs that grow to fill or shrink to fit, and reflow as
their contents change. This is great when you need to add new
layers, accommodate longer text strings, or maintain alignment as
your designs evolve.

There are lots of ways to use Auto layout:

 Create buttons that grow or shrink as you edit the text label.

 Build lists that adapt as items are added, removed, or hidden.

 Combine Auto layout frames to build complete interfaces.

Auto layout is a powerful feature with many moving parts and uses.
In this article, we’ll show you how to add an Auto layout to a frame,
and how each of its properties works.

Add Auto layout

You can add an Auto layout to a frame or a selection of objects. This

includes:

 New or empty frames

 Frames with existing content

 Components and Component sets

 Groups or other selections of layers and/or objects

Note: Auto layout is only supported on frames. If you select objects

that are not in a frame, Figma will create an Auto layout frame
around them.
You can add Auto layout to a selected frame, component, or
component set from a few places:

 Use the keyboard shortcut Shift A.

 In the right sidebar, click the next to Auto layout with a frame
selected.

 Right-click on the frame or object and select Add Auto layout.

Tip! You can add Auto layout to components. You will need to add
an Auto layout to each component individually.

Auto layout properties

Frames with Auto layout have different properties to regular frames.

When you apply an Auto layout, you’ll see some changes in the right
sidebar.

You can’t do the following to Auto layout frames:

 🚫 Add Layout grids to that frame

 🚫 Apply Constraints to any objects within an Auto layout frame

 🚫 Use Smart selection on any objects within the frame

Auto layout

Direction

Direction describes the way the auto layout frame will flow.

 Choose Vertical to add, remove, and reorder objects along the y

axis. For example objects within a list, or posts within a newsfeed
or timeline.

 Choose Horizontal to add, remove, and reorder objects along the

x-axis. For example a row of buttons, or icons in a mobile
navigation menu.

Figma currently supports only one direction at a time, horizontal or

vertical. To build designs that use both directions, you will need to
combine or nest Auto layout frames. In the example below, we’ve
nested a horizontal Auto layout frame within a vertical Auto layout
frame to create a card with a title, description, and showtimes.
Direction

Spacing between items

You can control the spacing between items in an Auto layout frame.

Unlike smart selection, there isn’t a way to adjust the spacing on the
canvas. Instead, use the spacing fields in the Auto layout section of
the right sidebar:

 Horizontal space between

 Vertical space between

Enter a number in the field, nudge the values using your arrow keys,
or scrub the field using your cursor.
Spacing

Padding

Padding controls the empty or white space between the child objects
and the boundary of an Auto layout frame. You can set padding
uniformly, or have different values for top, right, bottom, and left
padding.

Note: Negative padding values are not supported.

Padding

Tip! Press the tab key to navigate between the top, right, bottom,

and left input fields.

Alignment

Choose how to align child objects within an Auto layout frame. Both
the direction of the Auto layout frame and the distribution will
determine what alignment options you have available.

Unlike objects in a regular frame, you can’t control the alignment of

the objects individually. For that reason, you set the alignment of the
child objects on the parent Auto layout frame.
Use the interactive grid to select from nine layout options for the
children in a frame.

Alignment

If your distribution is set to Space between, you have three options

for each direction:

 vertical Auto layout: Left, Center, Right

 horizontal Auto layout: Top, Center, Bottom

If your distribution is set to Pack, you have the same nine options for
each direction:

 Top left
 Top center

 Top right

 Left

 Center

 Right

 Bottom left

 Bottom center

 Bottom right

Note: When one or more resizing properties are set to hug contents,
some selections won’t result in visually different layouts on the
canvas. This is because hug contents remove any extra space around
the child's objects.

Distribution

Once you’ve set alignment rules for child objects in a frame, choose
how those objects will be distributed within that frame.

In the alignment panel, click the arrow to select between:

 Packed: Objects in a frame will be grouped. Use this option to

keep objects in a frame as close as possible and aligned together.

 Space between: Objects in a frame have the space between them

equally distributed along the direction and alignment set for the
frame. Use this option to stretch objects across a frame.
Distribution

Resizing

One of the most powerful functions of Auto layout is its ability to

control the dimensions of the objects in an Auto layout frame.

Set resizing behavior for parent Auto layout frames to adapt to

changes to their children's objects. Resizing settings can be applied
for objects on both the X and Y axes individually using the
dropdown menus and the resizing panel.
Resizing

Note: Text layers also have their own resizing properties. Within an
Auto layout frame, this may produce some useful results.

If you want your Auto layout frames to be completely fluid, we

advise against using fixed-size text boxes in your Auto layout. Fixed-
size text layers won’t resize to accommodate your text, which may
cause overlap between layers in an Auto layout frame.

6. Prototyping in Figma

Figma’s prototyping features allow you to create interactive flows

that simulate how a user may interact with your designs.
Prototypes are a fantastic way to:

 Preview interactions and user flows

 Share and iterate on ideas

 Get feedback from collaborators

 Test interactions with users

 Present your designs to stakeholders

Create connections

1. Select the hotspot for the connection.

2. Click the to create the connection

3. Drag it to the destination

Create connections

Create interactions and animations

1. Open the Prototype tab in the right sidebar

2. Create interactions

3. Set interaction details

4. Apply an animation

5. Preview your animation

Create interactions and animations

Adjust Prototype Settings

1. Select a Device and Model

2. Preview your prototype

3. Select Background color

4. Set the prototype’s Starting Frame

Adjust Prototype Settings

7. Sharing and working with others

Every file and prototype in Figma has a unique URL. In an
organization, members can copy this link to quickly share designs
and prototypes with other members of the organization.

Members can interact with a file based on the file’s link sharing
permissions, regardless of whether they’re a member of that team or
project. If public link sharing is enabled, members can also share
files with people outside the organization.

Invite people by clicking the blue share button in the top menu
and enter an email address or copy the link and send it.
sharing in Figma

Other designers and copywriters → Set to EDIT

MODE. Provides access to all features. You will see other user's
avatars and cursors and can work alongside in real-time in the
same file!

edit mode

Developers → set to VIEW MODE. This will show them all specs
(toggle CSS, iOS, and Android code). They can also access your
prototype in action and can download any assets in the size
needed.
view mode

☝Note: If you are sharing with the developers while still working
on the file, it’s best to set up a page in your design clearly labeled as
the latest tidy versions for the dev team to avoid confusion.

Cheatsheet, when to export what:

 SVG → use for vector files, such as logos and icons. SVGs are
scalable to any size without losing quality. Make sure to export a
png fallback.

 Jpg → use for all sorts of rectangular images and photos

with no opacity needed. Make sure to supply actual size(1x) as
well as retina resolution (2x).

 Png → Use, if an image or photo needs a transparent

background. Also 1x and at least 2x export required.
 1x, 2x → 1x is the actual size, 2x twice the size. 2x
is needed for crisp images on retina displays. Note that 2x, 3x,
etc. comes with a Suffix of @2x, @3x which will be relevant
identifying and calling the right image when coding.

 w & h → You can also set a width, e.g. 300w = image with
a width of 300px. Same for height=h

 pdf → used if you want to export a whole page, e.g. for

mailing it or adding it into a presentation and need high
quality.