Figma Checklist

Use these checklist for your project and component Files

Icon Checklist

  • Make sure your icon vector file layer name is “Shape”
  • The shape should have the constraints of Center/Center
  • Icons should be single colour and use the colour variable Icon/Fill
  • Icons outer frame size should be one of the dimensions listed; 16px or 24px
  • Component names should have Capital Letters and spaces
  • Use a hyphen to indicate related components e.g. “Check Square - Filled”, include a space either side of the hyphen
  • Icons should be in the correct list position alphabetically
  • Icons should be contained in the correct frame, 16px/24px etc, so they are published in the correct suite

 

Icon Checklist Example

Icon Checklist Example

Adding to Compound

Any new icon files must be added to compound via the design system team. It is the responsibility of the creator to complete the following tasks

  1. Raise a ticket on the Design System backlog and add it into the Compound slack channel
  2. Export the SVG file as a single path SVG
  3. Attach the optimised svg to the Jira ticket with a note of the icon name and size(s)