目次
1. まずはFigmaでPCデザインを作成
「SPは？」と疑問に思われる方もいらっしゃるかもしれません。Studioはボックスレイアウト（箱を積み重ねるようにレイアウトしていく方法）を採用しているため、SPから作り始めると幅やフォントサイズの調整などに工数がかかってしまいます。
PCデザインを作成後、Studio上でスマホデザインをデザインしていく流れがやりやすいです。
また要素は固定幅にするとレスポンシブ時に余分な余白が開く可能性があるので、
figma上では内包や拡大などを活用しましょう。
2. 画像データの名前の頭に＜img＞をつける
オートレイアウトは言わずもがな、Studioに持ってくるために必要な手順がいくつかあります。その一つが画像データに「＜img＞」を追記すること。 これがないとStudioが適切に画像を認識できず、読み取れないこともあります。
3. 固定幅は必要なところのみにする
Studioの利点は、１画面ずつではなくリアルタイムにレスポンシブデータを作れるところ。
要素が固定幅だとレスポンシブ時に要素が小さくなりすぎたり、変な余白が開いたりします。
Studio上でも調整可能ですが、Figma上でやっておくと楽です。
4. プラグイン「Figma to Studio」を起動+クリップボードにデザインをコピー
取り込みたいfigmaデザインを選択した状態でプラグインを起動させます。
起動時、Studioへのログインを求められるので対応しましょう。
ここで最も重要なのが「一気に取り込まないこと」。一気にやろうとすると確実にフリーズします。
最大でもセクション単位で選択して取り込むことをお勧めします。
特に画像が多い場合は読み込みに少し時間がかかるので、どうしても読み込まない場合は画像箇所をグレーボックスにして、Studio上で差し替えると良いでしょう。
取り込み時プレビューが表示されますが、
もしプレビューの段階で崩れてしまっている際はFigmaで調整してもOK。
5. Studioに移動→command Vでペースト
先ほどコピーしたデザインをペーストします。
別のセクションで同じアイコンや画像を使っている場合に、画像を重複して読み込むことがあります。
取り込んだ画像素材はこまめに整理すると管理が楽です。
6. Studio上で微調整
レスポンシブ対応も含めてデザインを微調整していきます。 フォントがうまく取り込めていない可能性もあるので文字周りにも注意が必要です。デザインチェックは実寸サイズでデザインを確認できる「ライブプレビューモード」を活用しましょう。
特に4Kなどの大きい画面やスマホの320pxなど崩れが見られやすいです。
コツを掴めば使いやすいツール
一気に読み込めなかったり画像の読み込みに命名ルールが必要であったりと若干癖のあるツールですが、
Figma慣れしているユーザーにとっては効率的なサイト構築の味方になります。
