How to keep Figma files clean

Today I want to talk about a skill that many designers overlook: Figma Hygiene.

Or how to keep your Figma files clean and organized.

The benefits are:

1. Easier to stay organized.

2. No matter who views your file, they’re less likelier to get lost.

3. Developers have easier time navigating the file.

4. Easier to find assets.

5. If you abandoned the file for a bit, and come back to it later — you wont be lost.

How to keep Figma clean:

1. Name the layers, frames, and sections.

• Get in the habit of using CTRL + R or CMND + R every time you create a new layer, frame, and groups.

• Naming your work makes a world of a difference, your future self and colleagues will thank you later.

• You can try this AI plugin to help you rename layers easier
  https://www.autoname.org/

• Or try SuperTidy plug-in:
  https://www.figma.com/community/plugin/731260060173130163
  

2. When naming layers, be consistent.

• You can group items by categories such as buttons, page titles, cta, etc.

• This includes spelling, either stick to British or American spelling.

• Example: colour vs color.

3. Use “/” in your naming conventions.

• Why? When exporting files, it will automatically break them into folders.

• Example: Home Pg/ Mobile / Default or Button / Primary

4. Use auto-layout whenever possible.

• If you’re not comfortable with it, its time to learn.

• For me, it was game changer.

• SHIFT + A is the shortcut to create auto-layout.

• Tutorial I found helpful: https://www.youtube.com/watch?v=IPLbPOYFTHw

5. Leverage section feature to organize your pages even further.

• SHIFT + S is your go-to keyboard shortcut for this.

• Example: Happy path is one section, edge case can be another.

6. Leverage pages feature to organize your work, instead of plopping everything into one page.

• Example: I’m building out a Design System right now, the file has pages such as buttons, call to action, nav, and more.

7. Don’t be afraid to create blank pages called “*****” or “______” or “ — — — “ to visually create chapters.

• Example: In the DS file I have two chapters so far: Style Guide and Components.

8. Pay attention to the pixels.

• Example: avoid having 2.3410 instead round them up or down whenever possible.

• In this case, probably 2 pixels will be your best bet.

9. Use a grid and spacers whenever possible.

• My favourite is 8 point grid. Meaning spaces in between objects is always in increments of 8 points.

• This will create cleaner UI design.

10. Create styles whenever it makes sense.

• Are you finding you’re using the same colour, typeface, or shadow more than once?

• Its time to create a style for it.

11. Document your decisions using annotation kits.

• It keeps your work clean and organized

• Easy to read your notes

• One of my favourite resources for it is here: https://www.figma.com/community/file/1144713033273069477

12. Document ticket information

Include information of the ticket and the link to it next to your designs.

Why? It makes things easier to track. Especially for your Product Owners and Developer friends.

13. Whenever possible, build out components and create variations within it.

14. Always create a cover or thumbnail page for your file.

In Figma Design file:

1. Open the design file and find the frame you want to use as the thumbnail.

2. Figma will scale the selected frame so it fills the thumbnail. We recommend setting the frame’s dimensions to 1920 x 1080 for a proper fit.

3. Right-click on the frame in the canvas.

4. Select Set as thumbnail from the options.

In FigJam file:

1. Create the cover page in Figma Design file

2. Convert it into a frame

3. Copy the frame
   CTRL + C or CMND + C

4. Open FigJam file

5. Paste the frame
   CTRL + V or CMND + V

6. Right-click on the frame in the canvas.

7. Select Set as thumbnail from the options.
   

15. Do you have multiple versions of the same file or component?
Its time to save history, add notes, and name it accordingly.

• Mac: ⌘ Command ⌥ Option S.

• Windows: Ctrl Alt S.

• View a version to pan around and see a snapshot in time.

• Restore previous versions to edit layers and export assets.

• Duplicate versions to create development-ready files for handoff.

• Share a link to a specific version with other people.

• Create versions to make it easier to view and access a set of changes.

• Add names and descriptions to autosaved versions.

• More on it here: https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#:~:text=Open%20the%20menu%20and%20select,Windows%3A%20Ctrl%20Alt%20S
  

16. Finally, whenever resources permit, create high-fidelity designs.

• It might feel like it slows you down in the moment, but long term it will save you time.