Figma best practices

Tips, tricks and guidelines that make handoffs easier and keep your design files clean.

Quick links

Text Case

Naming convention

Symbols & Emojis

Naming convention

Props and Variants

Naming convention

Naming Figma layers

Naming convention

Patterns library overview

File structure

Reviews & versioning

File structure

Adding placeholders

Utilizing slots

 

Design team automations & tools

Slotnick

Take full advantage of slots in our components and patterns.

Automator

Build custom automations that do time-sensitive Figma tasks for you in one click.

Our automations

You can import these Figma scripts into Automator Plugin to simplify various repetitive tasks.

 

Summary

Do
  • Use PascalCase for components and camelCase for props and variants.
  • Use 🗾 and 🧩 to name shared patterns and mockups.
  • Use ⚙️ to prefix smaller components used inside patterns.
  • Use / nesting for building blocks in third or fourth level of hierarchy, f.e. ⚙️ Building blocks / NavigationItem.
  • Use ◇ to prefix instance slots users can swap with their own content.
  • Use ↳ to visualise hierarchy of parent and child component properties.
  • Use 🚧 to prefix pattern or component that's unfinished or in maintenance.
  • Use terms like Container, Flex, Grid and Stack instead of Frames.
  • Prefer semantic names (Title , Description) over DOM hierarchy (H1, H2) when naming text layers.
  • Use ◇ slots and instance swap properties to let users reconfigure or change content inside the component.
  • Use our Slotnick plugin to cut and paste placeholder slot into your local file for easier manipulation.
Don't
  • Avoid combining multiple cases in props and variants - it can negativelly impact their legibility.
  • Avoid using different emojis from the ones listed in guidelines.
  • Avoid adding many hidden elements inside your components. This drastically reduces stability and performance.
  • Avoid using multiple emojis and long strings in variants and properties - they clutter the Figma properties panel and make components hard to use.
  • Avoid non-descriptive property names and negative connotations, f.e. Element, Inactive, notDisabled.
  • Avoid misplacing the order of child and parent properties in a component
    HasIcon = boolean
    ◇ S1 = Card
    ↳ ◇ Icon = Home
  • Avoid publishing entire user journey as variants of the same component. This has extremely negative impact on stability and performance of our design libraries.
  • Avoid composing patterns from blocks existing outside of Nucleus. Migrate all of your custom ⚙️ building blocks next to the main pattern.
  • If possible create multiple iterative branches instead of single big one. Figma can be quite limiting when it comes to merging big changes.
  • If you're making a complete library overhaul move everything to duplicate file instead of branch.