【Figma】デザイン仕様書を作るときに余白や要素のサイズを書き込むのに便利な「Frame Height→Text Sync」プラグイン

Figmaでデザイン仕様書を作るとき、余白などのサイズを書き込むことはありますか？

「Frame Height→Text Sync」は寸法表示要素の作成を助けるプラグインです。

プラグインUIを起動して「コンポーネントを作成」ボタンをクリックするとコンポーネントが生成されます。

ボタンをクリックしたときの挙動は以下のとおりです。

• そのドキュメントで初めて使う場合：
  メインコンポーネントとインスタンスの両方が生成
• 既にコンポーネントがある場合：
  インスタンスのみ生成

コンポーネントのサイズを変更すると、テキストの数値が自動で変わります。

メインコンポーネントがドキュメント外にあると、テキストが自動更新できません。

以下の手順で、インスタンスのメインコンポーネントを、現在のドキュメントにあるメインコンポーネントに変更してください。

1. コピペしたインスタンスまたはそれを含むフレームを選択
2. プラグインUI下部の「選択したインスタンスを現在のファイル用に変換」をクリック

これで、メインコンポーネントが現在のドキュメントにあるものに置き換わり、自動更新できるようになります。

メインコンポーネントのバリアントのスタイルを直接編集するか、バリアントを追加してください。

フォントは Inter Regularから変更すると多分壊れます。

複数のドキュメントで使う可能性があるときは、バリアントの追加の方が、他ドキュメントに適用しやすくておススメです。