Comment by dannote

Thanks! Right now it doesn't parse CSS directly, but you can bind colors to Figma variables:

  figma-use variable create "brand/primary" --collection <id> --type COLOR --value "#3B82F6"

Then reference them in JSX render:

  figma-use render ./Button.figma.tsx

  const colors = defineVars({
    primary: { name: 'brand/primary', value: '#3B82F6' },
  })

  export default () => (
    <Frame style={{ backgroundColor: colors.primary }}>
      <Text style={{ color: '#FFF' }}>Button</Text>
    </Frame>
  )

So if you map your design tokens to Figma variables first, components will reference them. Parsing CSS/Tailwind configs automatically could be a good feature though.