Comment by james_marks

11 hours ago

Nice work!

How does it do applying styles from an existing codebase?

We have style guides, strong base css, etc. If that was represented when it built in Figma, that could be interesting.

1 comment

james_marks

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.