Guidelines
- Before a review make sure that the version has used the correct 🚦 status indicator.
- Make sure all layers, component properties, component properties etc. are title cased "Small Screen"
- Make sure that the component file has been set up following the setup and structure guidelines
- Be consistent with breakpoint size naming; small, medium, large and extra large
- Check that the guides for building a component have been followed.
- Check spacing conforms to our 8px soft grid. In some instances, we can go down to 4px if required.
- Check that any component with variants follow the guidelines.
- Make sure nested layers have been correctly named.
- Make sure layer and frames are correctly named, see the Guides for Designers.
-
Pages should be named based on how granular the components are required to be.
<Component Name> - If the component can be used across all platforms use the same name for the page as the file name. Figma removes the duplication in the Assets panel to keep the naming more concise.
Web, iOS, Android - If a component is required for each platform. Remove pages as required.
Web, Native - If the iOS and Android components can be shared.
Testing
- Check that tokens and styles; colours, text styles, effects, have been used. Where styles from outside the system have been applied their usage should be justified. Components may require manual dimension size which is accepted
- All colours should use the Figma variables tokens or Figma styles where appropriate.
- For colour use semantic colour variables
- For spacing, radius and padding use the appropriate dimension variables
- Check the component responds to content of different sizes or being manually resized.
Clean up
- Make sure the first component or variant is aligned to X: 0, Y:0. With this anchor point the other variants and frames should be:
- 48px between components, variants or frames in a horizontal direction.
- 24px between components inside a variant.
Documentation spacing example
- Update any child components or styles that Figma flags require updating before reviewing or publishing.
- Reduce the amount of nested layers if possible.
- Lock any layers that should not be edited.
- Add notes or supporting information into the component description field. Use a prefix of “Note” if it is an instruction.
To add the same note to all components quickly, select the variant and add in your description. All components will receive the same note, you can then further adjust specific components one-by-one if required.
- Check any previous comments have all been completed, marked as resolved or deleted.
- Remove any extra files, dummy instances etc that have cluttered up the document.
- Make sure groups have not been used.
- Don't forget the cover - Ensure the cover component has been added and has a thumbnail set and all relevant content is correct.
- Before publishing the component make sure that there is a save point and the correct 💾 status indicator is used.