Introduction:
Sync your Figma designs with your codebase by generating and updating your UI code automatically.
Added on:
Jan 20, 2025
What is Vivid
Vivid is a tool that bridges the gap between design and development by automatically generating and updating UI code from Figma designs. It ensures that your codebase stays in sync with your design changes, allowing developers to focus on functionality while maintaining design consistency.
How to Use Vivid
- Generate code: Submit your designs directly in Figma and receive code for each component as a pull request.
-
Make edits: Add functionality to the generated
divsand modify styles or structure as needed. - Sync changes: Regenerate code when design changes occur, ensuring your code updates while preserving your edits.
Features of Vivid
-
Style
Vivid generates styles for each element in your design, controlled directly from Figma. Styles are variant-aware, meaning they change dynamically with props, and the code auto-updates to track Figma changes.
-
Anatomy
Vivid creates an anatomy file that calls styled elements from the design file. Developers can overwrite styles, add functionality, and minimize style clutter to focus on logic.