FIGMA DESIGN TOOL REVIEWER

The Figma Design Tool

Vector Network
Figma introduced a powerful new way to design vectors. Instead of connecting paths
one to one, you can create web-like connections, making the whole process of
creating shapes more flexible.

Styles
In Figma, most of the foundation elements are set in the Styles, which
contains Colors (including gradients and images), Text, and even Effects. You can
make them readily available as a Library. As you design, you can set these styles
in your Inspector, for things like Text, Fill, Stroke, and Effects.

Components
Components are building blocks for any design project. These are collections of
elements put together in a reusable way, such
as buttons, forms, navigations, cards, cells, and overlays. 

Variants
Variants work slightly differently from components as they have a different naming
system to organize everything. It's very important to keep in mind that only use
variants when necessary if not stick to components.
 


 
 
 
 
 
 
Team Library
Team Libraries allow you to share your components, styles and assets across your
whole team. You can enable and disable these libraries by clicking
the ON/OFF toggle anytime you want.

Auto Layout
Auto layout is a feature that lets you create designs that grow to fill or shrink
to fit, and reflow as their contents change. This makes it possible to adapt to the
changing needs of your work and helps ensure that your designs are consistent
across the various screen sizes they will appear on.
• Parents are frames that contain elements and objects of your design
• Children are the elements and objects inside the Auto Layout frame
PARENT
The parent has four properties. Understanding these properties is essential. It
will help you understand how your layout works and help you implement Auto Layout
in the best way!
 
Direction: allows your design layout either to be in Columns (Horizontal) or Rows
(Vertical)
Padding: determines the whitespace around your objects (Children)
Spacing: controls the spacing between your objects
Resizing: Lets you have a dynamic or fixed width


 
CHILDREN
The Child layout has very few and less complex properties compared to the parent!
These properties are essentially alignment and positioning controls (based on the
Parent direction).
1. Alignment - align objects along one axis
2. Absolute position - easily position items within auto layout frames using
precise controls.
3. Resizing - Lets you have a dynamic or fixed width.

 
Constraints
Constraints in Figma are the same as Sketch. They allow you to set distances from
the parent container. It also enables you to scale or align elements.

 
Real-Time Collaboration
Figma truly is the Google docs of design tools. Once you start collaborating with
fellow designers, developers, and clients in real-time on a design project, you’ll
never want to go back. You can share your design with anyone, and they can watch
your progress, comment, and even participate as you bring your pixels to life.

Version Control
In Figma, everything you do is automatically saved in history for free. You can
also manually commit (Command + Option + S) versions to keep things in a neat
timeline. You don’t have to think about branches because real-time collaboration
allows you to ensure that nobody is stepping on each other’s toes.

 
Live Embeds
You can embed your Figma Frames in your Website by getting the iFrames HTML code.
This allows you to get live access to your designs.

Prototype
Prototyping is an important process of design. Creating a prototype helps your
engineers understand how the interactions and animations should work in the final
product.

 
 
Inspect
Any document in Figma can be shared with anyone. More importantly, developers can
come in and inspect design elements to get the color properties, sizes, and
distances. They can select any asset and export it to PNG, SVG, or in code
using Swift, Java, or CSS.

 
The Editor in Figma
 
Getting Started
Once you've created an account, you'll be redirected to the Figma dashboard which
contains the details as well as different tabs. This is where you can create new
files, import files, go through your recent files or search through the existing
ones.

 
The Editor
The editor is where you end up once you create a new file.

Toolbar
The first section we'll talk about is the toolbar. It has tons of options. Let's go
through those options one by one. Starting from the left:
1. The hamburger menu gives you access to a lot of different options such
as Preferences, Plugins, Libraries, Account settings, Different Options,
and Customizations.

 
2. Next up is the Select Tool which gives you two options - Move and Scale.

3. The Frame Tool allows you to create new artboards. You can either create a
custom or select from one of the default options on the right panel. This tool also
gives you access to the slice tool, which allows you to specify the region you'd
like to export.

 
 
 
4. The Shape Tools give you the ability to create basic pre-defined shapes.

5. The Pen Tool allows you to create custom shapes using vector anchor points. The
Pencil Tool is also available in the Pen tool dropdown.

 
 
6. The Type Tool is what you'll use to add text elements to your design.

7. Hand tool comes in handy when you want to move around in your design file
without activating hover lines, selecting elements, or accidentally moving the
same.
8. Now, let's move on to the Comment tool which gives the user the ability to add
comments throughout the design file, view said comments, and reply to the same.

 
 
9. On the right side, we've User Profile Avatars which allow you to see who is
viewing the file at any point in time.

10. Right next to it is the Share button which provides you with a link or an embed
code that you can share. It also opens up share settings.

11. The play button allows you to view the prototype, if you've any.

12. Lastly, you've the zoom settings as well as other options such as grids,
rulers, outlines, etc.

File & Project Names
• The middle of the Toolbar contains the name of the file, which is 'Untitled' by
default. Simply click on it to edit.
• The project name, which is 'Draft' by default contains the particular file. You
can change the project name to move the file to another project.
 
Panel
There are two panels located on either side of the editor.
Layers Panel: the panel to the left is the Layers panel. It contains Layers, Assets
and Pages that have been added to the file.
Properties Panel: the one on the right side is the Properties panel. Here, you can
customize the Frame Size, Positions, Colors, Strokes, and Effects. You can also
view the code of an element here.

Pages
When you're working on a huge design project you may need to put different design
elements in different places, not just in a single page. You can create multiple
pages in Figma and put similar elements in a single page.

 
Assets
On the left side of the Figma editor, there's the Assets panel. Assets are the
elements you save as Components. It can include
buttons, forms, navigations, cards, cells, and overlays. Assets are extremely handy
when it comes to re-using design elements.

 
 
 
Basic Tools
Frame
The frame tool is what allows you to create frames on the canvas. You can nest
frames inside each other as well. Let's start by adding a frame.
Grids
Grids are essential to understanding the negative spacing when you're designing for
iOS, Android and Web. For mobile, it’s common to use an 8-point grid. For Web, it’s
a little less about spacing and more about division, like the 960 grid. It's good
to have some grid in place, like the default 10-point grid. This ensures that all
the elements fall on clean pixels, avoiding half pixels as much as possible.
Shape Tools
Next up are the Shape tools. You can access all the basic ones via the Shape tools
in the toolbar. The shapes available include - Rectangle, Line, Arrow, Ellipse,
Polygon and Star. 

Alignment
The top of Properties panel contains various alignment options. Provided below is
the list of all the options as well as their keyboard shortcuts:
• Align Left (Alt + A)
• Align Horizontal Centers (Alt + H)
• Align Right (Alt + D)
• Align Top (Alt + W)
• Align Vertical Centers (Alt + V)
• Align Bottom (Alt + S)

 
 
 
Resize
You can resize any layer by selecting it and then, dragging the corners. Hold Shift
to keep the same aspect ratio and hold Option to resize from center in order to
keep the same alignment. Alternatively, you can change the 'W' (width) and 'H'
(height) values in the properties panel. Make sure to click the Constraint
Proportions option so that it scales proportionately.

Image
In Figma, images can be edited on the fly after importing. You can control settings
like Exposure, Contrast, Saturation and much more without having to leave the
design tool.
 
 
Color Picker
Click on the Fill to start customizing the background. As with most design tools,
you can change the color by clicking the color on the wheel or via the eyedropper
tool. Alternatively, you can input the HEX code or choose from one of the preset
colors. The opacity value can also be changed from here.

 
Gradients
Figma also gives you the option of replacing the solid colors with gradients. There
are multiple gradient options. You can find the gradient options in the color
picker. You can play around with different combinations of colors, the opacity as
well as the direction of the gradient!