Styles Panel

The Styles panel lets you create reusable text, color, effect, and grid styles. Apply consistent styling across your designs and update everywhere at once.

Style Types

The panel has four tabs for different style categories:

Text Styles

• Font family and weight
• Font size and line height
• Letter spacing and paragraph spacing
• Text decoration and case

Color Styles

• Solid colors
• Gradient fills
• Can include opacity

Effect Styles

• Drop shadows
• Inner shadows
• Blur effects
• Multiple effects combined

Grid Styles

• Column grid configurations
• Row grid configurations
• Combined layouts

Creating Styles

From Selection

1. Style an element as desired
2. Select the element
3. In Properties, click the style icon next to the property
4. Choose "Create Style"
5. Name the style

From Panel

1. Open Styles panel
2. Go to desired tab (Text, Color, etc.)
3. Click the + button
4. Configure the style properties
5. Name and save

Applying Styles

1. Select element(s)
2. In Properties, click the style picker
3. Choose from available styles
4. Style applies immediately

Editing Styles

1. In Styles panel, find the style
2. Right-click and choose "Edit"
3. Modify properties
4. All instances update automatically

Style Organization

Folders

• Use "/" in names to create folders (e.g., "Heading/H1")
• Drag styles between folders
• Collapse/expand for organization

Search

• Search bar filters by name
• Also searches descriptions
• Works across all tabs

Library Styles

Styles from linked libraries appear in the panel:

• Grouped by library name
• Library icon indicates source
• Updates when library updates
• Toggle visibility with library filter

Import/Export

Export Styles

1. Click export button in header
2. Choose format (JSON, CSS, etc.)
3. Select which styles to export
4. Save file

Import Styles

1. Click import button
2. Select file to import
3. Review imported styles
4. Styles added to document

Best Practices

• Create styles for repeated elements
• Use semantic names (heading-primary, not big-bold)
• Organize with folders for large projects
• Document style purpose in descriptions
• Link to design system for consistency