FigmaのデスクトップアプリのメニューのNew Widgetから作成を始める。

Figma Widgetを選択して、名前を入力する。

目的に応じてテンプレートを選択する。あとで変えられるので、デフォルトのままでもOK。

選択した内容に応じたファイルが作成されるので、そのフォルダをVS Code等で開いて開発をスタートする。

フォルダを開いたら、セットアップを開始。

$ git init
$ npm install
$ npm install --save-dev @figma/widget-typings @figma/plugin-typings

FigmaでWidgetを確認するためには、code.tsxで開発したコードをcode.jsにコンパイルする必要があるので、VS Codeで> Tasks: Run Build Task -> tsc: watch - tsconfig.jsonを実行する。

Figmaから該当のWidgetを呼び出すと表示が確認できる。

やりたいこと

• Component Propertyで管理されたFigmaコンポーネント群を選択したら、プロパティがReactNativeのComponent Propsとして出力されて、型定義が自動的に完了されること
• Figmaのプロパティ名に?がついていたらoptionalになること
• Figmaのプロパティ名・型が自動的にReactNativeにも反映されること
• UIも自動的に作られること

上の例なら、こんな感じに。

type Props = {
  active: boolean
}

const Button = (props: Props) => {
  return (
    <View style={[styles.button, { backgroundColor: active ? 'blue' : 'white' }]>
      <Text>test</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  button: {
    padding: 12
  }
})

コンポーネントプロパティで管理されたNodeはComponentSetNodeが該当する。
https://www.figma.com/plugin-docs/api/ComponentSetNode

componentPropertyDefinitionsを使えば、COMPONENT_SETに使われているプロパティが取得できる

{
    "active": {
        "type": "VARIANT",
        "defaultValue": "true",
        "variantOptions": [
            "true",
            "false"
        ]
    }
}