Introduction
Compound components built in Figma are aligned with the developer components in Compound UI pattern libraries for parity.
This enhances consistency between design and development, and facilitates the use of tools like Code Connect.
Figma does not match every aspect of a code component, but this guide outlines guidelines for creating components that are as consistent as possible.
Breaking out components
Figma variants do not have the same logic as built components. In some cases, separate components are more appropriate.
Property naming conventions
Follow the naming conventions below. Component properties vary; apply the following hierarchy
In general, names should:
- Match the coded component properties where possible
- Be descriptive but concise
- Use unique property names when naming Boolean properties
Component hierarchy
Components have multiple property types that perform specific actions. This section outlines a consistent hierarchy and naming convention to create familiarity.
Key points
- If the component inverts, set the boolean switch as the first property
- Follow the hierarchy of the component from top to bottom
- Group relevant properties together; these can be mixed types
- Follow the naming conventions for icons
- Expose default nested instances or preferred values where relevant
- Add notes to the component docs if they assist the user
Hierarchy
- Invert (boolean false as default)
- Variant
- Size
- Orientation
- State (If Required)
- Other properties (If Required)
- Instance swaps (If Required)
- Boolean (If Required)
Component properties
- Boolean properties.
- Instance properties
- Text properties
- Instance swaps
Component properties explained
To improve usability, these properties should be clearly and consistently named in the following hierarchy.
Invert
Invert refers to the use of contrasting surfaces to highlight key areas.
- False (Default)
- True
Size
This property refers to the viewport size
- Small
- Medium
- Large
- Extra Large
- 2 Extra Large
Variant
Clearly highlighting the different style of the main component. Figma may not always be able to match all the variants of a coded component; therefore, separate it into a separate component if required.
Examples:
- Primary, Secondary, Accent
- List, List + Icon, List + Tag
Orientation
These indicate if a component's layout can be manually changed, ie. Horizontal, Vertical.
Selected or visible
If you require a selected state or to show/hide an element, use a boolean property as explained below.
Components that have a selected state should always use a Boolean property and appear above the state properties.
State
The current naming convention can be applied to display the state.
|
Web |
React Native |
|---|---|
|
Default |
Default |
|
Hover |
isHovered |
|
Focus |
isFocused |
|
Active |
isPressed |
Icon naming
Name icons in reading order and inline with component properties.
- First icon or icon on the left - Icon Prefix/Left
- Last icon or icon in the right - Icon Suffix/Right
Boolean properties
Multiple boolean properties may exist. Boolean properties should consistently be named as follows:
- True.
- False.
Component Properties Explained
Component properties were recently introduced to simplify the creation and use of variants. This feature maintains the same variant structure while streamlining use.
Boolean
This property controls the visibility of a layer. If finer control of a component is needed when a layer is hidden, create a new variant.
Instance
Simplifies the process of changing variants such as icons, pictograms, or more complex components like button groups.
Expose instance properties that are likely to require frequent changes.
Instance properties may not appear if a Boolean property hides their layer.
Text
Adds a text field in the variant panel for editing text.
Place text component properties at the end and follow the component order to maintain a consistent position.
Known limitations to be aware of
- Spacing values differ when a boolean property hides a layer; a separate variant is required.
- Component properties can only be reordered within their own groups, not freely between groups
- Instance property settings apply globally and cannot be customised for each nested component