React Figma Versions Save

An example:

<Page name="New page" style={{ backgroundColor: '#ff0000' }}>
    <View>
        <View style={{ width: 200, height: 100, backgroundColor: '#ffffff' }} />
    </View>
</Page>

Add useStyleByKey hook which allows one to pass in specific textStyleId, fillStyleId, etc.

        const ViewComponent = () => {
            const fillStyle = useStyleByKey('testStyleId');
            return (
                <View
                    style={{
                        fillStyleId: fillStyle && fillStyle.id
                    }}
                />
            );
        };
        const TextComponent = () => {
            const textStyle = useStyleByKey('testStyleId');
            return (
                <Text
                    style={{
                        textStyleId: textStyle && textStyle.id
                    }}
                />
            );
        };

Added useEffectStyle new props

The useEffectStyle hook creates (or updates) EffectStyle and returns an object that contains effectStyleId and can be consumed in style prop.

• Text component got hyperlink prop supporting.
• All components over Figma Nodes go onNodeId callback supporting. onNodeId returns Figma Node ID.

An example:

<View>                                                                                 
    <Text                                                                              
        style={{ color: '#308eff', marginBottom: 50 }}                                 
        hyperlink={{                                                                   
            type: 'URL',                                                               
            value: 'https://react-figma.dev/'                                          
        }}>                                                                            
        React Figma website                                                            
    </Text>                                                                            
    {nodeId && (                                                                       
        <Text                                                                          
            style={{ color: '#308eff', marginBottom: 50 }}                             
            hyperlink={{                                                               
                type: 'NODE',                                                          
                value: nodeId                                                          
            }}>                                                                        
            Rectangle link                                                             
        </Text>                                                                        
    )}                                                                                 
    <View onNodeId={setNodeId}>                                                        
        <View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />       
    </View>                                                                            
</View>                                                                                

Example:

<View
  style={{
    shadows: [{
      shadowColor: 'rgba(0, 0, 0, 0.2)', shadowRadius: 1
    }, {
      shadowColor: 'rgba(0, 0, 0, 0.3)', shadowRadius: 2 
    }]
  }}
/>

A new prop has added in the Instance component:

detach: boolean;

When detach=true an instance detached through detachInstance method.

Thanks, @n0ruSh!

Component and ComponentSet got publishable props supporting:

Introduced in the Figma API Version 1, Update 23