The Figma Design Tool

In this era of design, there are a vast number of amazing tools available. This handbook
focuses on Figma. It will walk you through the whole Figma interface, at the same time
it provides step-by-step instructions on how you can utilize the features provided by
Figma in the best way possible. If you're our Pro user you'll get access to the asset files
that you can use as a reference.

Design Tools
With the availability of so many design tools, it's easy to get overwhelmed when it
comes to select the best one that fulfills all our needs. Here, I'd like to mention that
there's no such thing called "the best" design tool. Every tool has its own set of advan-
tages and features that makes it stand out, but we can easily search for a tool that
works best for us. Mentioned below are some of the amazing design tools available to us.

Figma
Sketch
Adobe XD
Framer
InVision Studio
Figma
Figma is called the collaborative interface design tool. And it stands out for its collabo-
ration feature. It gives users the ability to share a design file with multiple team mem-
bers and get instant feedback from each other via comments. These days most of the
other design tools have also implemented the collaboration feature but Figma is the one
that first brought this to the table.

Figma also provides a lot of useful resources, plugins, and techniques that make your
workflow smoother.
Why use Figma?
Only a few years ago, in 2016, Figma came out as the first design tool that utilized the
power and accessibility of the Web while promising the same powerful features you‛d
expect from a native app. They surprised everyone with their real-time collaboration
feature. Designers were ecstatic to finally be able to share their designs with their
co-workers and clients with zero friction, and see multiple mouse pointers drawing
shapes simultaneously. It was like magic.

We‛ve come a long way since. Figma has set the bar to the highest level by continuously
improving and implementing new features. Today, everything exists on the Web, and
Figma makes full use of it by bringing everything together for designers and developers.

Let's take a look at some of the special features that make Figma stand out.

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. Theses are collections of ele-
ments put together in a reusable way, such as buttons, forms, navigations, cards, cells,
and overlays. Component elements like text content, colors, and images can be custom-
ized in the Inspector. A button component can be duplicated many times, with different
content and styles.

Additionally, you can have Components within Components, allowing you to customize
even the most complex groups of elements, like icons, states, and complex themes. In
Figma, it's very easy to add different design elements as Component and publish them
as customizable design assets.

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 vari-
ants when necessary if not stick to components.

It's best to use variants when dealing with multiple versions of similar components that
share the same properties, such as state, size, color, etc. Also, when having two distinct
variations like a toggle on/off.
 Team Library
Imagine Abstract, Google Docs and Sketch in a single tool. Imagine a more cohesive and
smoother experience. That‛s Figma. 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.

UI Kits and Design Systems

When discussing top UI Kits and Design Systems for Figma, it's important to consider
both their popularity and functionality. Each UI Kit and Design System offers unique
features and caters to different needs in the design process.

DesignCode UI: This is a comprehensive UI kit known for its clean and modern design.
It offers a wide range of components and is especially popular for its ease of use and
adaptability. It's well-suited for both web and mobile applications.
Apple Design Resources – iOS 17 and macOS Sonoma: This set offers a comprehensive
collection of components, including templates for Home Screen and Lock Screen wid-
gets, tabbed apps, parent/child apps, split views, and sheets.
Uber Base Gallery: The Uber Base Gallery in Figma is likely a comprehensive collection
of foundational design elements that form the core of Uber's design language. It proba-
bly includes a wide range of basic UI components such as buttons, icons, color palettes,
typography, and form elements.
Microsoft Fluent 2 Web: This UI kit on the Figma Community is based on Microsoft's
Fluent design system, tailored for web applications.
Untitled UI — Figma UI Kit and Design System: Known as a highly advanced UI kit for
Figma, Untitled UI is meticulously crafted with features like Auto Layout, variables,
smart variants, and WCAG accessibility.

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. It's important that you know about these!

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 (Verti-
cal)
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).

Alignment - align objects along one axis

Absolute position - easily position items within auto layout frames using precise con-
trols.
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, com-
ment, and even participate as you bring your pixels to life.
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. Figma
makes it super simple to create prototypes using transitions without downloading a
third-party app.

Prototype faster with Figma. Animate transitions with ease, add micro-interactions to
your flow, and use smart-animate to quickly create interactions that look great on any
device.
Version Control
In Figma, everything you do is automatically saved in history for free. You can also man-
ually 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. It‛s actually a relief to not compare this too
much to Git because Figma has made the whole process way less complex than Git.

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

More generally, invited people can be given permission to view or to edit. This means
that you can include virtually anyone in your team, including product managers, clients,
and any person via a link.

Keyboard Shortcuts
The shortcuts in Figma are very similar to Sketch. Some key differences that are quite
important to know:

Command + Option + G creates a Frame for selected elements. A Frame is like an Art-
board.
Control + G to enable / disable Grid.
K for Scale, which allows you to scale elements on the fly.
C for Commenting. Comments are embedded in Figma directly instead of having to go
through a different space.
You can open the Figma Keyboard Shortcuts by clicking the Menu bar, then going to Help
and Account > Keyboard Shortcuts or you can press a shortcut Ctrl+Shift+? on your key-
board.
Figma Mobile App
Preview your designs on any device. Use the Figma iOS or Android app to prototype
interactions that mirror how users might interact with your designs, then share those
prototypes anywhere.

How to view your prototypes from the Figma mobile app:

Sign in to the Figma mobile app.

Use the Recent or Search tabs to find the file or prototype you want to view.
Tap the file or prototype to open it. From the file, press to present the prototype.
Figma Plugins
Plugins are specialized tools designed to help you use Figma to its full potential. They're
made by talented designers and developers who are eager to share their passion with
the greater design community. From image assets to embedding maps into your designs,
plugins make it easy to add life and personality to your designs.

You can switch your account to the community by clicking on home.