Why Vivid?

Motivation

Figma has changed how the design function operates. Features like autolayout, components, variants - features corresponding to specific CSS properties - have encoded a lot of the logic of UI traditionally handled by a developer within a design file. Writing CSS on a team often boils down to an imperfect, manual transfer of information from Figma to code.

This is a waste of engineering time and an underutilization of a designer's effort.

With Vivid, you can pull all the styles encoded in a Figma design into your components and extend them at will.

Why separate styles from anatomy?

The first pass solution to this problem is to generate React components that look exactly how a poorly prompted ChatGPT might try and write them. Throw a bunch of CSS classes in-line into a React component file and have developers go in and fix anything incorrect. This generated code looks something like this (when using Tailwind CSS):

import { Arrow } from "./Arrow";
import { Option } from "./Option";
import { Divider } from "./Divider";
export const Dropdown = ({
  override,
  status,
  text,
}: {
  override?: React.CSSProperties;
  status: string;
  text: string;
}) => {
  switch (status) {
    case "Idle":
      return (
        <div
          className="overflow-hidden flex justify-between items-center px-1.5 py-1 rounded-md w-40 h-7 border-solid border-neutral-300 border bg-[rgb(251,_251,_251)]"
          style={override}
        >
          <p className="text-[rgb(70,_70,_70)] text-xs font-normal">{text}</p>
          <Arrow />
        </div>
      );
    case "Active":
      return (
        <div
          className="flex flex-col justify-center items-center gap-[1px] rounded-md"
          style={override}
        >
          <div className="overflow-hidden flex justify-between items-center px-1.5 py-1 rounded-md w-40 h-7 border-solid border-neutral-300 border bg-[rgb(246,_246,_246)]">
            <p className="text-[rgb(70,_70,_70)] text-xs font-normal">{text}</p>
            <Arrow
              override={{
                height: "3px",
                width: "7px",
              }}
            />
          </div>
          <div
            className="overflow-hidden flex flex-col justify-center items-center rounded-md w-full border-solid border-[rgb(226,_226,_226)] border bg-white"
            style={{
              boxShadow: "0px 0px 16px rgba(0, 0, 0, 0.15)",
            }}
          >
            <Option
              color="Gray"
              text="Not Started"
              override={{
                height: "fit-content",
                width: "100%",
                justifyContent: "flex-start",
                alignItems: "flex-start",
              }}
            />
            <Divider
              override={{
                height: "1px",
                width: "100%",
              }}
            />
            <Option
              color="Orange"
              text="Ongoing"
              override={{
                height: "fit-content",
                width: "100%",
                justifyContent: "flex-start",
                alignItems: "flex-start",
              }}
            />
            <Divider
              override={{
                height: "1px",
                width: "100%",
              }}
            />
            <Option
              color="Green"
              text="Completed"
              override={{
                height: "fit-content",
                width: "100%",
                justifyContent: "flex-start",
                alignItems: "flex-start",
              }}
            />
          </div>
        </div>
      );
    default:
      return null;
  }
};

This code is a good starting place if you were going to build this component yourself. But what happens once you start making edits to fix the styling or add functionality? It very quickly becomes nearly impossible to keep that code up-to-date when the Figma is changed. Automatically parsing the generated code once it can be infinitely modified by developers to correctly update conditional styling is extremely error-prone.

Vivid completely isolates the styling pulled from Figma into a Vivid-managed "style file" for each component. Vivid keeps this file in sync with your Vivid designs whenever the designer makes a change by opening a PR in your repository with the new styles. The developer can call and extend these styles in their React component for full customizability.

How it works

For each component in your codebase, Vivid separates your component definitions into two parts: styles and anatomy. For each component exported from your Figma design, Vivid will generate a style file, which contains the CSS for a series of HTML elements, each corresponding to a Figma frame. For an in-depth look at how that styling is structured, check out Variant-Aware Divs.

Vivid also generates a first pass React component that calls those styles. Developers can modify those React components at will without breaking the sync with Figma.

The benefits

• Developers have to handle CSS far less frequently, allowing them to focus on frontend functionality
• Design systems are synced across design and code, reducing friction
• Well-organized Figma design systems automatically become custom, modular UI libraries