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