Technical comments
Guidelines on creating new components
These are guidelines for designers creating new components that might be useful for your team as well.
- Prefer composability.
- Use generic text like “Label” or “Value” in components for text.
- Use spacing variables within components for any spacing values to keep consistency where possible.
- Use the Obra Spacing Variable Fixer plugin to keep spacing values consistent.
- Use border radii variables for any border radius variables to keep consistency
- Use the Obra Border Radius Variable Fixer plugin to keep values consistent
- Any variables, components or styles that refer to another library are strictly forbidden in this file
Figma slots
Wrapper components such as cards, dialogs, sheets etc. are using Figma slots (released March, 2026). You’ll find these purple editable slots across the file, which function simply as markers that something is editable. The general workflow is to delete these and put your own content.
This section is no longer relevant from 1.8.0 onwards, as Figma has since released native Slots, which we now use throughout the kit.
Wrapper components such as cards, dialogs, sheets etc. present an interesting problem: we want to be consistent in our styling, but we also want to customise the content.
We are not a big fan of slot components, but also not a big fan of detaching. We’re hoping Figma takes note and finds some form of solution for this in the future, some kind of “native” slots?
Update January 2026: We are eagerly awaiting for Figma to release slot components.
To promote consistency, we went for slot components but this might take some time to wrap your head around. This video can help you to understand the concept.
In practice, most “slot content” in this file is marked with a ”.” in front of the layer name so it doesn’t get published. For the select & combobox component, the slot content is managed in a hidden layer that authors unhide while editing and then hide again once they are finished working. A similar approach is used in the example screens.