Component, Instance, createComponent

Wrapper for the Figma Component.

Props

PropTypeDefaultNote
nameStringThe name to be displayed in the Figma Layers List
childrenNode
styleStyleNot all props
onSelectionEnterFunctionSelection enter event callback
onSelectionLeaveFunctionSelection leave event callback
onLayoutFunctionEvent is fired once the layout has been calculated

Also, most of the ComponentNode fields are supported as props.

Instance

Wrapper for the component.createInstance method.

Props

PropTypeDefaultNote
nameStringThe name to be displayed in the Figma Layers List
componentFigma Component Node
overridesObjectOverrides nested elements' props by name
styleStyleNot all props
onSelectionEnterFunctionSelection enter event callback
onSelectionLeaveFunctionSelection leave event callback

createComponent

Factory method for creating linked Component and Instance. Returns

{
Component: React.Component,
Instance: React.Component // with `component` prop defined
}

ComponentSet

Wrapper for the Figma ComponentSet. It allows defining component variants.

Props

PropTypeDefaultNote
nameStringThe name to be displayed in the Figma Layers List
childrenNodeOnly Component nodes
styleStyleNot all props

Examples

Simple component

<Component name="Comp">
<Text>Hello world!</Text>
</Component>

Creating component instance

const Rect = createComponent();
...
<>
<Rect.Component name="rect-component">
<Rectangle
style={{
width: 200,
height: 100,
backgroundColor: "blue"
}}
/>
</Rect.Component>
<Rect.Instance style={{ marginTop: 20, width: '100%' }} />
</>

Overriding elements inside instance

const Rect = createComponent();
...
<>
<Rect.Component name="rect-component">
<Rectangle
name="rect"
style={{
width: 200,
height: 100,
backgroundColor: "blue"
}}
/>
</Rect.Component>
<Rect.Instance style={{ marginTop: 20, width: '100%' }} overrides={{
rect: {
style: {
backgroundColor: "red"
}
}
}} />
</>

Text content overriding:

const Txt = createComponent();
...
<Txt.Component name="text-component" style={{ marginTop: 20 }}>
<Text name="text" style={{ fontSize: 24, width: 200 }}>
Some text
</Text>
</Txt.Component>
<Txt.Instance
style={{ marginTop: 20 }}
overrides={{
text: {
characters: 'Overrided text'
}
}}
/>

Using variants

<ComponentSet name="Button">
<Component name="variant=Primary">
<PrimaryButton text="Primary" />
</Component>
<Component name="variant=Dangerous">
<DangerousButton text="Dangerous" />
</Component>
<Component name="variant=Secondary">
<SecondaryButton text="Secondary" />
</Component>
</ComponentSet>