- Component: Component has a name (consistent with the chosen naming conventions)
- Variants: Are all properties and values named correctly and in order
- Description: The component description box is filled out and the use case explained
- Link: to documentation is added (if applicable)
- Documented: All naming is documented at first sight (e.g. sticker sheet)
- Layers: All layers are named
- Nested Components: All nested components are named
- Code alignment: Is all naming aligned and discussed with development (if applicable)?
- Color: All colors are defined as styles (and if not documented and agreed upon)
- Text: Is all text defined as an appropriate style
- Contrast: Sufficient contrast as defined at least in the WCAG 2.1 AA standards
- Grid: All grids are saved as styles and applied to the correct frame size
- Visibility: Are all layers visible, can invisible layers be deleted?
- Layers: All layers are in order and in the right format?
- Spacing: Does the component follow 8pt spacing conventions?
- Alignment: Are all elements aligned correctly?
- Text: Is the text formatted correctly (auto height, fixed-width etc.)
- Auto-layout: Is auto layout applied where necessary
- Constraints: Are constraints applied where necessary
- Adaption: Are there adaptions for different breakpoints (e.g. grid adaption or change of entire component design). If so, are they documented correctly?
- Text: Is the text formatted correctly (auto height, fixed-width etc.)
- Little content: does the component work with little content
- Medium content: Does the component work with medium content
- Large content: Does the component work with large text
- Missing content: Is there a fallback for missing content or errors?
- States: Are all necessary states represented (active, hover, inactive, etc)
- Interactions: are interactions/prototyping set up
Source: https://www.figma.com/community/file/1117518363362257693