Key Concepts
Reference
🖼
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.
Component and Element Selection
- 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
Tagging Components
- 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
This is helpful and good practice if you are going to apply the same styles to similar components in the flow
Applying Styles
- 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.
Setting Styles
- 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.
Using States
- 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.
Useful Links
Last modified 3mo ago