The Code Preview panel shows generated code for your designs in real-time. Select any element to see its code representation in various frameworks and languages.
Opening Code Preview
- Press
Cmd/Ctrl + Shift + Alt + C - Or access from sidebar panels menu
- Available in Developer tier (enable in Preferences)
Supported Frameworks
Web
- HTML/CSS - Clean, semantic markup
- React - JSX components with inline styles or CSS modules
- Vue - Single-file component format
- Svelte - Svelte component syntax
- Tailwind CSS - Utility classes
Mobile
- Flutter - Dart widgets
- SwiftUI - iOS/macOS views
- React Native - Cross-platform components
Design Tokens
- CSS Variables - Custom properties
- JSON - Token format
- SCSS - Variables and mixins
Code View Features
Syntax Highlighting
- Full syntax highlighting for all languages
- Line numbers
- Code folding for large blocks
Copy Options
- Copy All - Copy entire code block
- Copy Selection - Copy highlighted portion
- Copy as Component - Wrap in component boilerplate
Export
- Export to file
- Export entire frame as project
- Open in CodeSandbox or StackBlitz
Code Settings
Styling Options
- Inline Styles - CSS in style attribute
- CSS Modules - Scoped CSS classes
- Styled Components - CSS-in-JS
- Tailwind - Utility classes
Output Options
- Responsive - Include media queries
- Component per Frame - Split frames into components
- Include Variables - Use design tokens
Naming
- PascalCase - For component names
- camelCase - For properties
- kebab-case - For CSS classes
Live Updates
- Code updates as you edit design
- Changes highlight momentarily
- Toggle auto-update on/off
Code Quality
Generated Code Features
- Clean, readable formatting
- Semantic element choices
- Accessibility attributes
- Responsive patterns
Optimizations
- Reuse repeated styles
- Flatten unnecessary nesting
- Combine similar elements
Tips
- Name layers well for better component names
- Use Auto Layout for proper flexbox output
- Define styles for consistent token usage
- Group related elements for component structure
- Use constraints for responsive code