Skip to content

v0.5.0

Choose a tag to compare

@dannote dannote released this 18 Jan 18:14
· 218 commits to master since this release

Added

  • render --examples — full API reference for JSX rendering

  • Main CLI help now mentions JSX rendering and points to render --examples

  • defineComponent for reusable components

    const Button = defineComponent('Button',
      <Frame style={{ padding: 12, backgroundColor: '#3B82F6' }}>
        <Text style={{ color: '#FFF' }}>Click me</Text>
      </Frame>
    )
    // First usage creates Component, subsequent create Instances
    <Button />
    <Button />
  • defineComponentSet for component variants

    const Button = defineComponentSet('Button', {
      variant: ['Primary', 'Secondary'] as const,
      size: ['Small', 'Large'] as const,
    }, ({ variant, size }) => (
      <Frame style={{ 
        padding: size === 'Large' ? 16 : 8,
        backgroundColor: variant === 'Primary' ? '#3B82F6' : '#E5E7EB' 
      }}>
        <Text>{variant} {size}</Text>
      </Frame>
    ))
    // Creates ComponentSet with all variant combinations
    <Button variant="Primary" size="Large" />
  • Proper auto-sizing support (hug contents) for frames with flexDirection

  • ComponentSet creates real Figma ComponentSet with isStateGroup=true

Fixed

  • Auto-layout sizing mode now correctly set to FIXED when explicit dimensions provided
  • TEXT nodes render with correct height (lineHeight encoding fix)
  • Alignment fields use correct names (stackPrimaryAlignItems, not stackJustify)

Technical Notes

ComponentSet instances are created via Plugin API instead of multiplayer because
Figma reassigns GUIDs on receive, breaking symbolData.symbolID references within
the same batch. See component-set.tsx for detailed explanation.