๐Ÿ–ผ
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