Styles are configured on the component where you can add 4 different sections (position, dimensions, layout, and styles). All stylable sections automatically bind to the first stylable instance inside a composed component, for code components, a className property is passed
Provides position options. Usually, you’ll want this in all your composed components.
Input to define the
Height values of the component. Usually, you’ll want this in all your composed components
Gives layout options, NOT recommended for a composed component unless you’re building a primitive like Box.
This Layout feature will work similarly to the auto layout feature that Figma uses.
To add layout styles you will need to first select the
+ to add your styles.
The layout editor provides a set of options for setting the layout of your components using CSS flexbox.
Free-form option where you can add CSS properties and rules as you see fit.
NOT recommended to be used with a composed component unless you’re building a primitive element component.
Add CSS property is an auto-complete input. When you begin typing a list of options you are looking for will show up as a selection.
Styels section will override any
Layout options you have set. For example, if you have set the
Height in the dimensions section, and then you set the
Height in the
Styels section. The component will use the properties from the
Watch an overview of properties panel
To learn more about CSS, visit MDN documentation
Updated 5 days ago