Figmaでデザインを効率化するために「ライブラリ化したコンポーネント」を活用している方も多いと思います。
しかし、ライブラリが二重構成になっている場合（小さなパーツライブラリと、それを組み合わせたレイアウトライブラリ）に、最新の変更が反映されないというトラブルが起きることがあります。
この記事では、その原因と対処法をまとめます。
目次
トラブルの状況
- ライブラリA：ボタンや入力欄など、小さなパーツのメインコンポーネント
- ライブラリB：ライブラリAのパーツを組み合わせたレイアウト（フォーム、カードなど）のメインコンポーネント
- 画面デザイン：ライブラリBのインスタンスを利用してレイアウトを構築
この構成でライブラリAを修正した際、画面デザインには変更が反映されないという問題が発生します。
原因
ライブラリAでの修正は、ライブラリBに直接伝わりません。
そのため、ライブラリBが古い状態のままになり、最終的に画面デザインに反映されないのです。
解決方法
反映させるためには、2段階の更新作業が必要になります。
- ライブラリA（パーツ）を修正して公開
- ライブラリB（レイアウト）を開き、Aの更新を反映して再公開
- 画面デザインでライブラリBを更新
運用上のポイント
- 階層構造が深いと更新作業も複雑になるため、「小さなパーツライブラリ」と「画面で直接組み合わせる構成」に寄せるとシンプルです。
- チーム開発では「パーツはライブラリ化」「レイアウトはプロジェクト内で直接組み合わせる」運用ルールを決めると混乱が減ります。
まとめ
Figmaでライブラリ化を多層構造にすると、更新が自動で反映されないことがあります。
その場合は 「2つのライブラリを順に更新」 する必要がある、という点を覚えておくと安心です。
Figmaを効率的に運用するためには、ライブラリの分け方や運用ルールをあらかじめ設計しておくことが重要です。