react-figma

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

React Native Easing

RN

React Native docs:

• Dimensions
• useWindowDimensions

#384

• Doc
• Example

Demo:

Code example:

import * as React from 'react';
import { Page, View, Text, StyleSheet, useFillPaintStyle, useStrokePaintStyle, useTextStyle } from 'react-figma';

const styles = StyleSheet.create({
    root: {
        backgroundColor: '#76ff1c',
        borderColor: '#ffffff',
        borderWidth: 5
    },
    heading: {
        fontFamily: 'Roboto',
        fontWeight: 'bold',
        fontSize: 24,
        color: '#000000'
    }
});

export const App = () => {
    const rootFillStyle = useFillPaintStyle(styles.root, {
        name: 'root/background'
    });

    const rootStrokeStyle = useStrokePaintStyle(styles.root, {
        name: 'root/border'
    });

    const headingTextStyle = useTextStyle(styles.heading, {
        name: 'heading'
    });

    return (
        <Page name="New page" isCurrent>
            <View>
                <View style={{ width: 200, height: 100, ...styles.root, ...rootFillStyle, ...rootStrokeStyle }} />
                <Text style={{ ...headingTextStyle }}>Local styles</Text>
            </View>
        </Page>
    );
};                                                                                    

#377

The doc

It's possible to enable a CSS-like inheritance.

Available under the flag process.env.REACT_FIGMA_STYLE_INHERITANCE_ENABLED.

An example:

<View style={{ fontSize: 50, fontWeight: 'bold', fontFamily: 'Roboto' }}>
    <View style={{ fontSize: 48 }}>
        <View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
        <Text style={{ color: '#ffffff' }}>text</Text>
    </View>
</View>

The text got a combined style:

({fontWeight: 'bold', fontFamily: 'Roboto', fontSize: 48, color: '#ffffff' })

#369

#367