Figma Docs 📖

This is a doc for using Figma effectively

Table of Contents 📚

About
Overview
Figma Design
- Header
- Layer Manager
- Create Design
- Prototyping
- Demo
- Export
FigJam
- Header
- Toolbar
- Interactivity
- Creating
Sharing/Collaborating
Helpful Commands/Shortcuts
Pricing
Fonts
Misc
Resources
License

About

Figma is a design platform that resembles that of Adobe Illustrator but is easy to share and collaborate. Figma has two main products, Figma Design file and FigJam file. The main file for UX/UI design will be with the design file while the FigJam is more for brainstorming. Currently as of writing, FigJam is in beta testing

Overview

There are new FigJam templates but we will stick with a new blank project file to explore the documents from scratch. To start off, sign in or register for a figma account on figma.com landing screen by clicking on Log in or Sign up button on the top right (see below).

⚠ NOTE: if you are already logged in you will see the overview screen so you can skip this step

Once you are in, you will be presented with the overview screen much like the one below. Of course yours may look slightly different.

Navbar

Starting from the top navigation bar going from left to right

If you click your name or email it will open a dropdown to your account(s)	Search bar to search by files, teams or people	If you click on the bell icon you will see notifications

If you click on you profile picture

Sidebar

Moving on to the sidebar, you can see in order of top to bottom

your recent files (will be default to this page)
current drafts
explore community templates and plugins
advert to upgrade to figma
a list of teams you are in or have created and the projects belonging to that team (ie for the above example (red) Team project is a project under my team Calgary heist)
a button to create a new team

⚠ Note: a team can have multiple project which can contain multiple project files

Create new team

If you want to create a new team, click create team from above and follow the prompts

Main Overview

In you main overview (see above), we have options to (from top to bottom):

create a new design or FigJam file or import a figma file (a file with the .fig file extension)
select FigJam template for FigJam file (may have been removed by the time of viewing because FigJam is currently in Beta)
select recent project files with helpful widgets to help you find the files you want, ie a filter, sort by or list view

Figma Design

Figma design file is what most people know Figma for and will the focus of this section. Assuming you created a new blank design file from the previous steps, you will be brought to a page that looks like the following:

We will explore this 1 piece at a time starting with the header strip

Header

First let's name our FigJam file. This is done by clicking on the Untitled text in the header (red section below)

If you want to change the team or project is under, click on drafts and select a team/project or create a new team/project

If you click on the arrow in the red section (see above), you can

see the version history much like the one found in Google Docs
publish this project's styles and components
export currently selected item
duplicate current project file
rename current project file (same as clicking on the project name text)
move project to a different team (same as clicking the current project text (currently Jam Project))
delete file

in the brown section of the header you will find a headphone icon if you've selected a team which will allow you to do a voice chat the team assuming you have the feature enabled by having the Figma Professional tier
other collaborators (and yourself) that are currently viewing the file
share button to share a link for someone else to view or edit [see #share for more info]
play button to enter into the first flow (see #flow)
zoom level

In the blue section we have the Figma icon that opens the options (most of these options can also be accessed through the quick search - accessible by hitting ctrl-p) and the rest are tools we will be doing into more details in [Create Design](#Create Design)

Within the options, we have the options in order of top to bottom:

Back to [recent view](#Main Overview)
Quick action (command palette)

new files
place image (can also be done by dragging images in or using copy and paste from clipboard)
save current board (in a .fig file)
save current version as a named point so you can revert back to this named state later
view history of project
export selected
export all the frames/artboards

The rest of the options like Edit, View, Object, Vector, Text, and Arrange are basically useless as it can be quickly accessible using shortcuts or other places that are more convenient than going into this dialog box

Plugin shows the plugins you currently have installed (these are global to your account) as well as the options to browse for other plugins

Integrations are usually tied to another 3rd party service like live embed in Confluence apps

Preferences have a lot of useful options like snaps

User libraries (shared assets)
Get desktop app will redirect you to the download of the desktop app
Help and account has a bunch of miscellaneous features

Layer Manager

Create

Figma works much like photoshop or illustrator where the canvas is laid out in artboards/frames. To create an artboard/frame click on the # icon in the header. Then in the left sidebar you will see a list of frames under the design tab (see below)

Expanding each one out, you will see different options for each, for example, of the 2 most common one - phone and desktop, select desktop and you will see a variety of options. I will pick MacBook 14". Once you click on it, a new artboard/frame will show up on the canvas

Your artboard will act as the base layer although you can have things outside of artboards.

Alternatively once you # icon in the header, you can draw out a rectangle in the canvas to create a frame.

If you drag or draw a frame in another frame, the new frame will most likely be a child of the parent frame. You can be certain of this if you look in the Layers tab in the left add see the same structure as below

Also note that frames can hold multiple frames and those frames inside can hold multiple frames and so on

Rename

If you want to rename a frame either double click on the frame's header text in the canvas or in the Layers outline

Create Design

To start creating a design (UI part), using the the frame we created previously. First we will create a hero for the website

Text/Image

To create some header text hit the T icon on left in the header, then click on where you want to place it in the design
This will open up a textbox and you can start typing

When you create the text or any other object you will see the changeable bounding box and some helper alignment lines (dotted above)

If you want to change the size of the bounding box, drag the white square handles. In addition if hover just outside the corner of the white squares you can then rotate the object

You will notice that the font size says the same despite changing the bounding box. To actually change the size go to the design section in the right and you will see all the options to change the text including (going line by line):
- font used
- font type (ie bold, light, regular, italics, etc)
- font size
- line height
- letter spacing
- paragraph spacing
- toggle between auto height, auto height, and fixed size (fixed width, but no more)
- text align
- align vertically
- the three dots contain more settings like letter casing, superscript/subscript, etc
You will notice as you move things around, you will get snapping guides to help you align with other objects

If you wish to disable snapping, press ctrl-p and search snap and then uncheck snap to objects
Next if we want to place an image (of jam) we can drag in the image file into the canvas (this includes svg file or gifs)

Objects

Next we may want to create a call to action button
1. To start off, create a textbox
2. next if we click on the rectangle in the header we can see the dropdown for a bunch of shapes and an option to place an image
3. we select the rectangle and drag out a rectangle to our liking
4. If you covered the text, you see it again by changing the ordering of the objects by pressing ctrl-[ with the rectangle selected. This will bring the object behind/back a layer. If you do ctrl-], you will move it forward a layer. This can also be done by moving the object in the layers tab up or down
5. Now we can look at some ways to change the look of the button
6. Now we can explore the design tab in full detail
- Starting from the top (brown section), we have the alignment tickets. This aligns the current objects to the artboard (all items individually unless they are grouped)
- the x and y position of the object, the width/height (and a lock aspect ratio toggle), angle and if it is a shape, there will be a rounded corner option
- constraints to the object (mostly used when resizing artboard/parent element) and if it will be fixed while scrolling
- layer mix type (much like Photoshop's)
- Fill and stroke color (can change if stroke is dotted and the way join edges as well if you hit the 3 dots)
- Effects (also like Photoshop, ie drop shadow)
- Export [see #Export]
1. For our button we need to round the corner so turn it to the max (45 for me). If you want to decouple the corner (ie round on all corners except 1, click on the fullscreen icon on below and change the respective corner [see below])
2. Next we want to select the color to be a cool blue to contrast the red. We select the fill color and will see the color picker pop up.
  
  Within the color picker we can select the color directly or paste in the values. We can also see a quick palette of colors. In addition if we click solid on the top right we can change it to a gradient (currently supported gradients are linear, circular/radial, angular, and diamond)
  
  We can also change the opacity using the slider below the color slider
3. We can then add a stroke by clicking the + icon (this is also the way to add a fill). Optionally add a drop shadow by hitting the + button in the effects section

Grouping

We then want to group the hero components and center it
1. select all the components
2. hit ctrl-g which groups the selected objects
3. align to the artboard center by hitting the second icon in the design panel (see below)
4. now if we want to make edits in the group we need to double click to enter the group and click away/escape to exit the group
5. to ungroup hit ctrl-shift-g

Mask and Vectors

Since Figma is a vector based system, like Adobe Illustrator we can join vector/shape objects (shapes) into 1 object/shape in a variety of ways.

(below is just a circle overlaid on a rectangle)

this is done by selecting two objects/shapes and going to the header to find the two intersecting squares.

The types of operations you can do on the objects are:

Union - join sections

Subtract - subtract front from back object
Intersect - only where overlap
Exclude - opposite of intersect

In addition to vectors we can create masks. This will make it so the object in the back acts like a frame for the front object and anything outside of the back object is cut off. For example:

In addition we can create your own custom object using the pen tool. This is the same pen tool you would find in your photo editors like Photoshop, Gimp, Adobe Illustrator etc.

Pen sketch above

Misc

One other tool is the pencil tool to do free hand drawing. This is found under the pen icon in the header.

⚠ Note: Figma smoothes out your sketches

Components and Library

Figma makes reusing components and assets easy with components and libraries

Library

To add things like color to your library you will usually find the 4 dots in the shape of the square button like below

Once you find the color you like, click the 4 dots, click the plus icon and give it a name

Once it is instanced, we can use this color again by pressing the 4 dots and selecting this color. In addition as seen above, you can get colors from other projects (under your team library).

If you decide to change your time later you can just change the color in the library and all objects using the same color in the library will change accordingly. This is done by going to list view (list icon above and hitting the edit style button beside the color you chose to edit)

If you want to remove a linked color from the library just click the unchain icon

Components

There are times were you will reuse components like a header, footer, button, etc, lucky with Figma it is made easy

To create an instance:

select the instance to reuse
click the rotated 4 square icon in the header
this will then be your master instance and any change to this instance will be reflected on the child instances
to create a child instance you would clone it (either copy and paste it or click drag)
if you would like to detach the instance with the master, hit ctrl-alt-b (or ctrl-option-b on mac)

⚠ Note: In addition other fields like text, effects and more can be instanced to the library

✨Tip 1: If you want to add comments to your design for future reference or for your teammates, you can click on the bubble icon on the left part of the header

✨Tip 2: If you use Adobe illustrator, you can copy and paste directly using the clipboard to transfer objects made in illustrator to Figma

Prototyping

Now we will get into interacting with the Figma file (the UX part)

Interactions

To create general interaction (ie from page to page), we can select what we want, ie a button and go to the Prototype tab and now we should see a white circle on the right most side of the bounding box (will have a plus if we hover over it)

Now we can drag this to another artboard and it will automatically go to the other artboard on tap. Of course instead of navigate we can instead open it as an overlay (like a popup or modal) by clicking on the Navigate to dropdown

We also have the option to scroll to, open link of or go back

Animation

Additionally we can change the animation type when transitioning

These will be similar to ones you find in PowerPoint or Google slides

Micro Interactions

Micro interaction are what can make your Figma demos really special

To appreciate this feature, I recommend looking at this video: youtube.com/watch?v=LnPEGhE90r4

For your app we can create a simple on hover animation but you can do a lot more.

To start create an artboard large enough to house the original and the alternative animation
Drag the object(s) into the artboard
Clone the artboard to somewhere else outside of the artboard (click drag)
Create the changes in the new frame (in this case change the button background color)
Open the interaction and have the exact same settings I have below:

This will overlay the frame called Frame 1 above the current
Now you have created your first micro interaction 🎉

Flow

To create a flow select an artboard, head to the Prototype tab and hit the add button on the Flow start point

Flows are made so you can different starting point when demoing [see #demo]. In fact they can be put into demo mode by hitting the arrow key in the flow.

✨Tip: You can have multiple flows in 1 document, this might be useful if you have a mobile and a desktop version or you just want to start your demo off in different places instead of navigating to the page

Demo

Demos can be used to show potential stakeholders what screens are envisioned and how interactions will work. To enter into demo phase, click the play button on the right of the top header

After clicking on this, you will be launched into the interactive mode on a new window (this can then be shared with other people). Within the demo we can interact with the components we made in #Interactions

Top

Within this screen we can see some options on the top and bottom bar. Let's start with the top portion

In this top portion we can:

comment specifically on the mockup (this will be reflected in the design file)
share this prototyping site [see #Sharing/Collaborating]
options -> is mostly useless options
fullscreen

Bottom

In the bottom portion we can:

change which frame we are on
restart to the first flow/frame

Demo Video

Export

To export a frame or whatever you have selected as svg, png, jpeg, or pdf, all that you want exported selected then go to Design->Export and select the export options

To export you project as .fig (Figma's proprietary file format) click on the Figma icon->File->Save local copy...

You can also export certain sections by using the slice tool under the same dropdown as frame in the header

Congrats on completing your first Design on Figma 🎉

FigJam

🚧 FigJam is currently in beta at the time of writing this 🚧

FigJam are a more recent addition to figma.com and as stated previously, is mostly used for brainstorming ideas. There are many tools in a FigJam file that help in this process. First let's go through the UI layout

First thing to notice is you are open to a canvas with a tool bar at the bottom and a header strip.

Header

First let's name our FigJam file. This is done by clicking on the Untitled text in the header (purple section below)

If you want to change the team or project is under, click on drafts and select a team/project or create a new team/project

If you click on the arrow in the purple section (see above), you can

see the version history much like the one found in Google Docs
duplicate current project file
rename current project file (same as clicking on the project name text)
move project to a different team (same as clicking the current project text (currently Jam Project))
delete file

in the blue section of the header you will find a headphone icon if you've selected a team which will allow you to do a voice chat the the team assuming you have the feature enabled by having the Figma Professional tier
other collaborators (and yourself) that are currently viewing the file
share button to share a link for someone else to view or edit [see #share for more info]
comments
reactions and timer [see #interactivity]
zoom level

Toolbar

The tool bar contains (from left to right):

mouse to select or hand to pan the canvas
pencil to draw on the canvas (has option for highlighting as well)
shapes - they act the same as sticky notes
sticky notes - basically a text box
text box
connector (to show flow of 1 idea to the next)
stamps
other widgets, plugins, templates and more

These can be dragged onto the canvas to be placed or clicked to activate the tool and click on the canvas to instantiate an instance

Interactivity

Since FigJam is more for interacting and brainstorming, there are ways to communicate with your team members like emotes, reactions, text messages

In addition you can set a timer to your brainstorming

Creating

Now we can get to creating! For this we will be creating the start to making strawberry jam 😋

first drag in a sticky note
in the image below you will see options from left to right to
- change the color of the sticky note
- change font style of the text (ie bold, strikethrough)
- hyperlink
- create list (bullet points)
- font size
- toggle if you see author of the sticky note
If you hover over any of the 4 sides of the sticky note you will get a plus icon. If you click and drag the icon you can create another sticky note with a arrow pointing to it
You can also get an arrow to attach to a sticky note by having two independent sticky notes and doing step 3 but drag the would be new sticky note to the already existing one (see below gif)
Chain these interactions together and you can achieve something like this:

Congrats on completing your first FigJam 🎉

Using these simple interactions and the simple building block you can do anything your brain can storm up!

Sharing/Collaborating

To share your Figma file click on the blue share button on the header and it will bring you to this popup.

Here you can invite people to view only or edit the file. Please note that by default anyone with the link can view it and you would need to click on Anyone with the link dropdown to change it to Only people invited to this file. Otherwise you can publish to the community using the second tab on the top ribbon or even embed the figma file as a widget (as HTML) by clicking on Get embed code

Helpful commands/Shortcuts

The most helpful command is ctrl-p to access the quick search menu. Using this you can search for any action/feature you want to perform instead of digging through the UI. The example below shows this feature
Zoom in and out by holding control and using the mouse wheel
Pan the canvas by holding space and dragging

Pricing

Figma has 3 tiers for both Figma and FigJam.

Free tier - usually for groups of 2 or forever alone
Figma Professional - for regular teams and team libraries and private/shared projects
Figma Organization - enterprise edition with SSO and organization level libraries

⚠ Note for STUDENTS OR EDUCATORS, Figma profession is FREE ⚠

Fonts

Figma has many fonts coming from Google fonts. If you have a custom font in mind with the font files (most likely ttf or otf file) you need to:

download the Figma desktop app to edit custom text (although you can view it in the browser version)
or download the font installer here and reload all Figma tabs

Misc

Figma files can be shared via a .fig file format by clicking on the Figma Icon and selecting file->Save local copy...
Also note that Figma has a desktop version (probably an electron port of the website) for MacOS and Windows
Figma is a pretty good alternative to Adobe Illustrator, in fact in some capacities it is more capable
To change the background color of the canvas on Figma, have nothing selected and you will see Background in the Design tab. Here you can then change the color
If you want a grid to better align items, you can select an artboard and there will be a section called Layout grid

Here you can have a grid, column or row overlaid on the artboard and the align the items to your liking
If you are implementing the design of the Figma file, we can go to the Inspect tab of the design file to get the code of how it's visualized. Most useful will probably be the CSS but you can also see the Android or iOS versions of the design