Vivid

Vivid — Call your designs from your code is a design-to-code tool that syncs Figma designs with your codebase by generating and updating UI code for you. It enables direct code generation from design changes, preserving developer edits, and structuring styles for maintainable UI development.

How Vivid Works

1. Generate code from designs. Create or update UI code directly from your Figma designs. Each component can have code generated as a PR for review.
2. Make edits to generated code. Add functionality, adjust styles, or modify divs as needed to implement features.
3. Sync changes. Regenerate code when your designs change; your existing edits are preserved.

How It Helps Developers

• Isolates design styles so developers can focus on functionality.
• Styles are organized per element, with Figma control and variant-aware styles that respond to props.
• Auto-updating code always tracks Figma, ensuring your design and code stay in sync.
• Anatomy: styled elements are generated from the design file, keeping a clear link between design and implementation.
• Developer-controlled: overwrite styles and add functionality without cluttering code with design-only concerns.

Core Concepts

• Figma-driven: designs control the structure and styles, while code handles behavior.
• Variant-aware styling: styles adapt based on component props.
• PR-based code updates: generated code is suitable for review and collaboration.
• Incremental edits: edits to generated code are preserved across regenerations.

Safety and Considerations

• Ensure design-to-code changes align with project conventions and accessibility guidelines.
• Review generated code before merging to ensure performance and security best practices.

Compatibility & Scope

• Integrates with Figma and codebases to streamline UI development workflows.
• Focused on UI code generation and synchronization between design and implementation.

Core Features

• Figma-driven code generation for UI components
• Automatic synchronization of design changes from Figma to codebase
• Preservation of developer edits across regeneration
• Per-element styling with variant-aware props
• Structure-focused output to minimize style clutter
• PR-ready generated code for easy review and collaboration
• Developer control to overwrite styles and add functionality