6. Figmaデザインのインポート
Figma & Figma Pluginのダウンロードとインストール
1. Figmaをダウンロードする
Figmaデザインからテキストスタイルや画面を取り込むには、まずFigmaアプリ（またはWeb版）が必要です。
- Figma公式ダウンロードページ: https://www.figma.com/downloads/
- 対応環境: WindowsまたはmacOSのデスクトップアプリ、あるいはChromeなどのWebブラウザ
2. インストール方法
- 上のダウンロードリンクから、お使いのOSに合ったインストーラーを入手します。
- ダウンロードしたインストーラーを実行し、案内に従ってインストールを完了します。
- インストールが終わったらFigmaを起動し、アカウントでログインします。（アカウントがない場合は、先に登録が必要です。）
すでにFigmaがインストールされている場合は、この手順を飛ばして、下の3番（プラグインのインストール）から進めてください。
3. Figma to LucyStudioプラグインのインストール
Lucy Studioにテキストスタイルを取り込むには、FigmaからテキストスタイルをJSON形式で書き出すプラグインが必要です。
- プラグインのダウンロード: www.figma.com
- 上のリンクからプラグインをダウンロードします。
- Figma下部のメニューバーでActionボタンをクリックします。
- Plugins and widgetsを選択します。
- Figma to Lucy Studioを検索します。
- Figma to Lucy Studioを選択し、Runをクリックします。
Figmaから画面を取り込む
Figmaでデザインした画面をフレーム単位でまるごと取り込み、Lucy Studioの新しいページとして作成できます。
STEP 1. Figmaで画面をコピーする
-
「Figma to Lucy Studio」プラグインを実行します。
-
プラグインウィンドウが開いている状態で、取り込みたい画面（フレーム）をクリックして選択し、[</> Copy Code]をクリックして、選択した画面をJSON形式でコピーします。
STEP 2. Figmaでコピーした画面を貼り付ける
-
Lucy Studioで新しいページを開きます（または新規作成します）。
-
キャンバスをクリックして貼り付け（Paste、macOS: Cmd+V / Windows: Ctrl+V）すると、先ほどコピーした画面がそのままウィジェットとして追加されます。
STEP 3. 取り込み後に確認すること
色（Color）
取り込んだ画面で使われている色は、プロジェクトに登録されたカラーテーマと自動的に連携します。
ただし、その色があらかじめプロジェクトのカラーテーマに登録されている場合にのみ自動的に連携します。まだ登録されていない色は固定の色値として入るだけでテーマには連携されないため、画面を取り込む前にカラーテーマを先に取り込んでおくことをおすすめします。
テキストスタイル（Text Style）
テキストスタイルは画面の取り込みには含まれません。Text Styleエディターの[Import Figma Text Styles]機能で別途取り込む必要があります。
レイアウト（Layout）
FigmaのAuto Layoutの方向（横/縦）に応じてRow/Columnに変換され、自動折り返し（Wrap）がオンになっている場合はWrapに変換されます。フレーム内に絶対位置（Ignore Auto Layout）で配置された要素がある場合、残りの要素は元のRow/Columnの流れをそのまま保ち、絶対位置の要素だけがその上に重ねて配置されます。取り込んだあとに元のデザインと余白や配置が異なって見える部分があれば、レイアウトのプロパティをもう一度確認して調整してください。
何重にも入れ子になった透明な背景/グループフレームは取り込みの過程で自動的に整理されるため、Figmaのレイヤー構造とLucy Studioで作られたウィジェットツリーの構造が完全に同じにならないことがあります。
トラブルシューティング
- 貼り付けても何も反応がない場合 → Figmaで形式に合った値をコピーしたか確認したうえで、STEP 1からやり直してください。
- 取り込んだ画面の余白や配置が元と異なる場合 → Auto Layout/絶対位置の設定をもう一度確認してください。
- 色が固定値で入ってしまった場合 → カラーテーマにその色が先に登録されているか確認してください。