|
|
|
|
|
by dannote
158 days ago
|
|
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. |
|