Skip to content

Zeyu-Li/figma-docs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Figma Docs πŸ“–

This is a doc for using Figma effectively

Table of Contents πŸ“š

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

landing-page

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

overview

Navbar

Starting from the top navigation bar going from left to right

navbar

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

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

recent

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

  1. create a new design or FigJam file or import a figma file (a file with the .fig file extension)
  2. select FigJam template for FigJam file (may have been removed by the time of viewing because FigJam is currently in Beta)
  3. 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:

design

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)

header2

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

dropdown

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

  1. 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
  2. other collaborators (and yourself) that are currently viewing the file
  3. share button to share a link for someone else to view or edit [see #share for more info]
  4. play button to enter into the first flow (see #flow)
  5. 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)

options

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

  1. Back to [recent view](#Main Overview)

  2. Quick action (command palette)

file

  • 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
  1. 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

plugins

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

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

pref

Preferences have a lot of useful options like snaps

  1. User libraries (shared assets)

  2. Get desktop app will redirect you to the download of the desktop app

  3. 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)

frame

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

desktop

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

inner

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

rename

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

  1. 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

  2. This will open up a textbox and you can start typing

text

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

  1. 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):

    textChange

    • 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

      typeSetting

  2. You will notice as you move things around, you will get snapping guides to help you align with other objects

    snapping

    If you wish to disable snapping, press ctrl-p and search snap and then uncheck snap to objects

    search

  3. 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

  1. 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

      ordering

    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

    colored

    • 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])

      corners

    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.

      colorPicker

      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

      stroke

Grouping

  1. 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)

      alignCenter

    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)

shape

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

vector

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

  • Union - join sections

union

  • Subtract - subtract front from back object

    sub

  • Intersect - only where overlap

    inter

  • Exclude - opposite of intersect

    exclude

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:

mask


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.

penStrech

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

styles

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

colorStyles

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)

editLib

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

unlink

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:

  1. select the instance to reuse

  2. click the rotated 4 square icon in the header

    instance

  3. this will then be your master instance and any change to this instance will be reflected on the child instances

  4. to create a child instance you would clone it (either copy and paste it or click drag)

  5. 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

comment

✨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)

addProto

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

overlay

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

Animation

Additionally we can change the animation type when transitioning

animate

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.

  1. To start create an artboard large enough to house the original and the alternative animation

  2. Drag the object(s) into the artboard

  3. Clone the artboard to somewhere else outside of the artboard (click drag)

  4. Create the changes in the new frame (in this case change the button background color)

  5. Open the interaction and have the exact same settings I have below:

    hover

    This will overlay the frame called Frame 1 above the current

  6. 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

flow

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.

demoPlay

✨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

play

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

playHeader

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

playBottom

In the bottom portion we can:

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

Demo Video

demo

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

export

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

slice

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

figjam

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)

jambar

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

jambar__dropdown

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

  1. 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
  2. other collaborators (and yourself) that are currently viewing the file
  3. share button to share a link for someone else to view or edit [see #share for more info]
  4. comments
  5. reactions and timer [see #interactivity]
  6. zoom level

Toolbar

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

interactive

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 πŸ˜‹

  1. first drag in a sticky note

  2. 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

    sticky

  3. 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

  4. 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)

    sticky

  5. Chain these interactions together and you can achieve something like this:

    figjamie

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.

share

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

    search

  • 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.

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

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

pricing

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:

  1. download the Figma desktop app to edit custom text (although you can view it in the browser version)
  2. 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

    col

    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

css

Resources

General Figma docs: https://help.figma.com/hc/en-us

Installing Fonts: https://help.figma.com/hc/en-us/articles/360039956894-Access-local-fonts-on-your-computer

Figma micro interactions: https://www.youtube.com/watch?v=LnPEGhE90r4

Figma desktop: https://www.figma.com/downloads/

Pricing: https://www.figma.com/pricing/

Demo Figma Design: https://www.figma.com/file/N6G6bxYLtO6zXVyP0gReRg/Jam-Site?node-id=0%3A1

Demo Figma Design .fig file: https://github.com/Zeyu-Li/figma-docs/releases/tag/1.0 (called demo.fig)

Demo FigJam: https://www.figma.com/file/BV4J8vUTylqb8kx4M9CIgc/Jamming-Out-%F0%9F%8D%93?node-id=0%3A1

Demo FigJam file: https://github.com/Zeyu-Li/figma-docs/releases/tag/1.0 (called demo.jam)

πŸ” Back to Top

License

This tutorial is under License: MIT

Contribute

If you notice an inaccuracy or misspelling, create a PR and I will get around to it soon

Thanks <3