Concepts

Building with Vivid introduces a new mental model for UI development. Components pull their styling from Figma designs and can be extended with functionality just like any other React components. Vivid exposes an interface of 'styled divs' that can be called from React components and modified at-will.

You get to pull all the CSS properties that can be encoded in Figma right into every React component without having to manually write CSS. Any time the designer makes an update to the Figma, you get the changes automatically.

The Structure of a synced Component

Vivid's generated code is structured to allow for a constant design sync with Figma, with all the functionality of React.

📄️ Variant-Aware Divs

The core of Vivid's generated styles are variant-aware divs. Vivid uses PandaCSS's slot recipes to define a set of styled divs that correspond to frames in Figma. Each div has a set of styles conditionally applied to it based on which variant is specified. Vivid defines these variant-aware divs in what we call the "style" file.

📄️ Using Vivid-Generated Styles

Vivid allows you to "call" your Figma designs from your React components. In practice, this means you can simply import and use the styled divs from the "style" file in your React component file (the "anatomy" file).