Figma Code Connectでネストされたインスタンスのプロパティにアクセスする

この記事の概要

FigmaのCode Connectにおいて、コンポーネントをネストして作成している場合の書き方が若干複雑（というかドキュメントを読んだときにパッと分かりづらい）気がしたので記事にしました。

環境

コード側はReactです。
また、Code Connectのバージョンは1.2.1です。

前提

こういった2つのコンポーネントがあるとします。

Button	Card

Cardの中にはButtonのインスタンスがあります。
このとき、Buttonインスタンスのテキスト（labelという名前のプロパティ）をacrionというpropsとして受け取り、Dev Mode上で変更を見たいとします。

結論

今回でいうと

import figma from "@figma/code-connect";
import { Card } from "./Card";

figma.connect(
	Card,
	YOUR_FILE_URL,
	{
		props: {
			// 他のprops
			action: figma.nestedProps("Button", {
				label: figma.string("label"),
			}),
		},
		example: ({ action, ...props }) => (
			<Card action={action.label} {...props} />
		),
	},
);

一般化するとこういう書式です。

figma.nestedProps({Figmaコンポーネント名}, {
	{Reactコンポーネントのprops名}: figma.適切なFigmaConnectAPI(Figmaコンポーネントのプロパティ名)
})

最後に

Figmaでのプロパティ名とReactでのprops名が完全に揃っていても、どの位置になんと書くのかが若干複雑な気がして、整理してみました。

とは言えまだCode Connectに色々な変更が入っていそうで、そのうちもう少し分かりやすくなるのかもしれません。
例えば1.2.0ではfigma.instance()にgetPropsという関数が生えていて、便利になりそうな気がしています。

今後も期待です。