Introduction to Figma Figma is a UI design and Prototyping tool. It is primarily web-based with addition to offline features for its Desktop Applications for Windows and MacOS. Its mobile app allows us to interact with Figma Prototypes in real time on mobile devices. Although it includes tools for both vector graphics and raster images, it is intended for creating User Interface and User Experience Design with a focus on real time collaboration. Figma is free to use and doesn’t require a high end computer, graphics card, processor or RAM; all it needs is a web browser.

2. Tips for Creating Design
Systems in Figma
Figma is a UI design and Prototyping tool. It is
primarily web-based with addition to offline
features for its Desktop Applications for
Windows and MacOS. Its mobile app allows us
to interact with Figma Prototypes in real time on
mobile devices.
Although it includes tools for both vector
graphics and raster images, it is intended for
creating User Interface and User Experience
Design with a focus on real time collaboration.
Figma is free to use and doesn’t require a high
end computer, graphics card, processor or RAM;
all it needs is a web browser

3. Tips for creating Design
Systems in Figma
Append your System Colors
and Fonts
• When adding new colors, effects
or fonts to your project, it is wise
to define them in styles. This
eliminates the need of having to
manually define every time you
create an object, a button for
example. You can define styles
by clicking the “+” icon in the
sidebar to add it to your style
palette.

4. Naming Components
and Styles
• It is better to use slash “-”
separated naming convention
for styling and in components.
Figma will group them in the
instances and style menus. This
will make it easier to find them.

5. Use Base
Components for
Designing Variants
• When the base is used to
bind the variants to a single
component it ensures
structure and consistency
for the whole set. Base
comps are useful for UI
components having more
than one state or types
such as buttons, inputs etc.

6. Swap Instances to avoid Detaching
Components
• We can find or replace a
component or a nested
element using the instance
menu in the right sidebar.
Plan your components in a
way that they can replace
any detail with other
components. It makes the
design more flexible while
designing.

7. Use a Quick Insert
Menu to search
through your
System Contents
• Figma has shortcut keys like
[ Shift + I ] for which you
can find any components in
a second. This is very useful
and quick to drag the
needed components
without switching to the
Assets Tab.

8. Avoid Manual Customization When possible
• Figma has various plugins
for different tasks. Similar
is a plugin “Batch Styler”
which uses bulk update
color and text style. This
will save the times of
repetitive clicks and save
time consumed in the
process.

9. Split Big Design Files
into Multiple Libraries
• When dealing with larger
projects it is challenging
when with many
components and styles to
grow your library
simultaneously. If we break
our project / system into
smaller parts such as Styles,
Components, Layouts etc
which will ease the workload
with your designs.