Good Housekeeping
Figma now provides a tool to rename layers automatically
- Avoid generic frame names, such as Frame 201.
- Follow the naming conventions where appropriate.
- When using a frame to group items, name it Layout
- Do not use groups; frames provide more functionality in controlling their child elements
- Follow the guidelines for setting up page structures consistently
- Use version history in addition to branching, as it provides a solid rollback should issues arise, particularly when collaborating with others
- Where possible, use the design tokens, shared styles and component libraries
Example of using styles
- Remove any files or assets no longer needed. Figma allows archiving projects so they remain available for a limited time. Clearer organisation profiles and files make searching and working easier
- Remove any unused styles manually or with a plugin
- Keep Figma and component libraries up to date when prompted
Screenshot of updating components
- Finally, if any information is missing from this document, please suggest a change through the contribution process
Naming Conventions
Following the same naming conventions across Figma files creates a consistent experience for people collaborating on files. It is also generally good practice to keep files tidy and maintainable.
General
- Name all layers relevantly, not with defaults like "Frame", "Layer", "Rectangle"
- Use UK English for language
- Reset the text layer names to match the content. Hit delete on a layer name to reset it or run this plugin
- All layers should:
- Start with a capital letter on each word, for example, "Primary Button"
- Use spaces to break up words
- Use spaces between hyphens, for example, "User - Logged Out"