6 Figma rules to keep your work clean

Figma is one of the amazing design tools and if you use it as your daily design app, you need to learn this things to keep your work clean.

Feb 10, 2022 - 11:39

Dec 30, 2023 - 19:41

0 122

Figma is one of the amazing design tools and if you use it as your daily design app, you need to learn this things to keep your work clean.

1. Add a cover photo to your Figma file

When managing various different projects and Figma files at a glance it can be frustrating finding the project we’re looking for.

Setting a cover photo is really a simple thing all you have to do is

Create a frame and rename it cover .
Add your branding and File name.
Right click on the frame and set it as a Thumbnail.

2. Give names to all Pages systematically

Every page should have a name and also like a logo or something to help you and your teammates recognize the project.

Easy Steps you should follow:

Click on “Plus icon” to add a new page
Double click on page to rename it.
Copy a emoji from google or some ither source and paste it and type a page name against it.

3. Use styles for everything

When we design using styles and decide we want to test different variations of colors, stroke , font styles, and so on — one quick change and the design will update all instances where that style is referenced.

Instead of using eye dropper to fill the color, I recommend to use the color style which will help to update the changes as faster as possible.

A hidden shortcut to create a color style superfast:

Before you start, Install a plugin called called “Styler”
Rename all your layers

→ cmd/ctrl R

→ Type the color group name(e.g Primary) followed by/$N0

3. Go to plugin

→ Type Styler

→ Hit generate styles

and boom there you have it.

4. Use of Components

If we have a large set of variants for buttons, input fields, it will cost us tons of precious time.

A Main Component defines the properties of the Component.

An Instance is a copy of the Component you can reuse in your designs. Instances are linked to the main Component and receive any updates made to the Component.

Easy ways to create components:

Create a single component

There are a few ways to create a component. First, you’ll need to select the layers you’d like to include in the component.

Select the layers you’d like to be included in the component.
You then have a few different methods for create a component:

Click Create component in the toolbar.
Right-click on your selection and choose Create component.
Figma will nest the layers within a special component frame. Identify components in the Layers panel using the purple icon.
In the right sidebar, add a Description and Documentation link for collaborators. Collaborators and developers can view this information in the Inspect panel.

Create components in bulk

Select the layers you want to create components from,
Click the “Shevron Icon” next to “Create component” in the toolbar.
Select Create Multiple components from the options.
Figma will create a component for each frame, group, boolean operation, or path.

5.Create flow diagrams from your screens

As our design files keeps increasing, things can get confusing for your teammates or outsiders like clients who may not be having the figma knowledege. So we should keep our flows neat and clean.

Simple way : Give a arrow headed lines in between the frames to show the flow by using pen tool.