🖼
Designing in Savvy
Quick guide to get started into styling flow components.
Some specific things like tags and a few component options are set on the Options Tab, but all of the styling itself gets done in the Design Tab. Here you'll find a detailed explanation of the Design Tab and its different areas.
- Select the component you want to add styles to
- Go to the Design Tab on the Right Sidebar
- "Choose an element" will allow you to affect different parts of the component
- Go to the Options Tab on the Right Sidebar
- Below the parent container dropdown, you'll see the component tags
- No tags? Just write a new tag for it
- Go to the Design Tab
- Choose whether to apply the styles to:
- This particular component
- All components with the same key
- All components with the same tag
- Etc.
- Keep scrolling on that Design Tab until you get to the Styles List.
- Make your components beautiful.
Here you can add custom styles that are not included in the common styles list.
- At the bottom of the "Choose an Element" area, there's a "Use states" Toggle.
- Toggle it!
- This will let you style different states of the component such as hover, selected, etc.
Not all types of components have states, this feature is only available for components that do.
Last modified 11mo ago