Skip to main content

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).

Vivid generates a first-pass anatomy file when a component is first generated, and this file can be edited by developers just like a normal React component.

Anatomy File​

import { Checkbox } from './Checkbox.style'
 
const CheckboxComponent = () => {
  return (
    <Checkbox.Root size = {props.size} isChecked = {props.isChecked}>
      <Checkbox.Control />
      <Checkbox.Label>{props.labelText}</Checkbox.Label>
    </Checkbox.Root>
  )
}

export { CheckboxComponent as Checkbox };

Modifying the anatomy file​

Vivid's anatomy file can be treated just like any ordinary React component. You can add any functionality to the component just as you normally would.

Sometimes, styles from Figma will be incomplete and you might need to add additional styling. That styling should be included in your anatomy file. You can do this using the CSS framework of your choice! The provided example uses styled components. 

import { Checkbox, type CheckboxProps } from './Checkbox.style'

const CheckboxControl = styled(Checkbox.Control)`
  &:hover {
    background-color: rgb(41, 41, 41);
  }
`;
 
const CheckboxComponent = (props: CheckboxProps) => {
  const [numClicks, setNumClicks] = useState(0);

  const clickHandler = (e: Event) => {
    e.preventDefault();
    setNumClicks(numClicks + 1);
  };

  return (
    <Checkbox.Root size = {props.size} isChecked = {props.isChecked} onClick = {clickHandler}>
      <CheckboxControl />
      <Checkbox.Label>{props.labelText}</Checkbox.Label>
    </Checkbox.Root>
  )
}

export { CheckboxComponent as Checkbox };

TypeScript support​

Vivid's generated anatomy file will import a type interface from the corresponding style file. This interface can be extended with any additional props related to functionality or styling that Figma doesn't include. 

import type { CheckboxProps } from './Checkbox'
 
type CheckboxComponentProps = CheckboxProps & {
  children: React.ReactNode
  value?: string
  onChange?: (value: string) => void
}