Skip to main content

Get started with Vivid

Vivid is a UI styling tool that syncs your Figma designs with your codebase by generating and updating UI code.

Vivid isolates styles pulled from Figma designs from the structure of traditional React components, so designers can own design while developers can focus on functionality.

Installation​

Plugin​

Vivid pulls Figma styles through a community Figma plugin. You can install the plugin here.

PandaCSS​

Vivid makes use of PandaCSS's styling engine to power its design sync. To install Panda, follow its framework-specific guide here.

Other CSS Frameworks​

Vivid also allows developers to add any non-Figma-controlled styles using the CSS framework of their choice. Any other CSS frameworks can be installed by following their documentation.

Generate your first component​

After installing the plugin, open up a design file in Figma and select a frame. Run the Vivid plugin and hit generate! After a few seconds (up to a minute for extremely large designs), you'll see a link to a CodeSandbox that previews your code.