Capturing Design Intent in Figma Through Naming Conventions
1. Icons are content with a different role from components
Even when Figma represents both as component assets, icon artwork and UI components need different handling.
- Use a dedicated icon prefix, as in `DE Icon asset / heart`.
- Automation tools can distinguish icons from general components, extract SVGs, and build an icon catalog for code to reference.
2. Capture subcomponent ownership in names
Naming conventions communicate which parts belong to which component.
- Connect parent and subcomponent names, as in `Action list / Item`.
- Reflect that relationship in specifications and generated code, and distinguish example assets through exclusion rules.
- Names alone cannot prevent a subcomponent from being used elsewhere.
- Conventions that express relationships need tools that check for invalid compositions alongside them.
3. Make image handling explicit
Establish a shared convention between placing an image in a fill and passing an image source property in code.
- Define a dedicated image component and a property name such as `source` or `imageSource`.
- Automation tools can interpret these conventions to extract images and make them available for reference in documentation, stories, and tests.
4. Collect the rules and check for silent omissions
In a name-dependent structure, a rename can break a connection even when the design still looks correct.
- Collect authoring conventions in one configuration file and check for omissions with tools such as linters.
- Look for icons missing from extraction or subcomponents that have lost their ownership relationship.
- As the original article’s slot-constraint example shows, native features can replace conventions when support becomes available.
