Skip to main content


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.