Guidelines
- Before a review, ensure the version uses the correct 🚦 status indicator
- Title-case all layers, component properties, etc - for example, "Small Screen"
- Ensure the component file follows the setup and structure guidelines
- Use consistent viewport size naming: small, medium, large and extra large
- Check that the guides for building a component have been followed
- Check spacing conforms to the 8px soft grid (spacing can be reduced to 4px if required)
- Check that any component with variants follows the guidelines
- Name nested layers correctly
- Name layers and frames correctly - refer to the Guides for Designers
- Name pages based on component granularity - use the same name as the file name if the component works across all platforms (Figma removes duplication in the Assets panel to keep naming concise)
Testing
- Use tokens and styles for colours, text styles, and effects - justify any styles applied from outside the system (components may require manual dimension sizes)
- Check the component responds to content of different sizes or being manually resized
- Use Figma variables, tokens or Figma styles for all colours where appropriate
- Use semantic colour variables
- Use appropriate dimension variables for spacing, radius and padding
- Use typography tokens to style text and create a hierarchy
Clean up
- Align the first component or variant to X: 0, Y: 0 with 48px between components, variants or frames horizontally and 24px between components inside a variant
Documentation spacing example
- Update any child components or styles that Figma flags as requiring updates before reviewing or publishing
- Reduce the number of nested layers if possible
- Lock any layers that should not be edited
Add notes or supporting information to the component description field using a "Note" prefix for instructions (select the variant to add the same note to all components quickly, then adjust specific components individually if required)
- Complete, resolve or delete any previous comments
- Remove any extra files, dummy instances, or clutter from the document
- Ensure groups have not been used
- Do not forget the cover - ensure the cover component is added with a thumbnail set and all relevant content is correct
- Before publishing the component, ensure there is a save point and the correct 💾 status indicator is used