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.

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"

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