Figma to STUDIOを使ったSTUDIO実装で気を付けること
Figma to STUDIOを使ってFigmaからSTUDIOに変換→調整してみた備忘録。
Figma to STUDIOとは
Figma to STUDIOとは、FigmaからSTUDIOにデザインを簡単に移行できるプラグインです。Figmaで作成したデザインをそのままSTUDIOにエクスポートできるため、サイト制作の効率が向上します。デザインをそのままインポートするため、デザインの整合性が保たれ、再現性の高いWebサイトを素早く構築するのに役立ちます。
使い方
1. プラグインをインストール
Figmaで「Figma to STUDIO」プラグインをインストール。FigmaとSTUDIOのアカウントが必要です（無料で作成可能）
2. Figmaでエクスポートしたいデザインを選択
レスポンシブデザインを意識したレイアウトで作成しておくと◎。フレーム全体を選択してエクスポートすることも可能ですが、セクションやオブジェクトごとに分けてエクスポートするとスムーズです。
3. エクスポート
プラグインを起動し、選択したデザインをSTUDIOにエクスポートします。
プラグイン＞Figma to STUDIOを選択→STUDIOにログイン→プレビュー画面が表示され、クリップボードにコピー→STUDIOにて任意のところでCtrl+Vで貼り付ける
4. STUDIOで編集
STUDIOでデザインを確認し、必要に応じて編集や調整を行います。
使用感・感想
STUDIOに持ってくるまでの手順はかなり少なく簡単で、気軽に試すことができました。一気にエクスポートしようとしたり複数の画像を選択しなければ動作もストレスなく、インポートもCtrl+Vでできるなど使用感はとても良いです。
１回目で完成に近いレベルでエクスポートするのは難しく、STUDIOを意識したデザインデータの作成と、調整が前提です。特にレスポンシブに関してはSTUDIOが余白を%など可変の単位を指定できないようなので、流動的なレイアウトが難しく調整に時間がかかりました。そもそものデザインをどのサイズでも崩れにくいレイアウトで考えた方が良いようです。
どのように作成すれば良いかコツをつかむことができればかなり効率良くつくれると思うので、案件でも使用できるのではと思います。
コツ・注意点
・STUDIOでの実装、レスポンシブを意識したデザインデータをつくる
STUDIOはmarginやpaddingの単位に％やvwなど使えないようなので、画面サイズが変わったときに流動的なレイアウトにするのが難しい。特定のサイズに依存しないレイアウトを考える。
レイヤー構造を整理しながら作成する。
・絶対位置を使わないデザインにする
上同様で、絶対位置の単位にも％やvwなど使えないようなので、画面サイズが変わったときに対応しきれなくなる。
・オートレイアウトを使用して作成する
FigmaのオートレイアウトがSTUDIOの考え方に近いので、オートレイアウトを使用して作成するのが良さそう。（オートレイアウト使わなくても可）
・STUDIOのテンプレートをもとにすることも可能
Figmaのデザインをpx単位で再現する必要がないなど、完璧にデザイン通りでなくても綺麗に形にできればいいというような場合、Figmaのテンプレートをもとに部分的にインポートしていけばさらに早く形にすることができる。
・背景画像など重ねているものはシンプルに
STUDIOでは調整難しいため、デザインの段階で不要な部分をマスクしたり、１枚の画像に統合したりしておく。
・Figmaでエクスポートする際、画像のレイヤー名の先頭に<img>をつける
STUDIOが画像として認識してくれる。
・一気にエクスポートしようとしない
崩れたりフリーズしたりするので、セクションごとやパーツごとに分けた方がスムーズ。
・階層を深く作りすぎない
STUDIOに階層の深さに制限があるためあまり深くグループで囲むとエラーが出る。
・PC版から調整をする
画面幅の大きいデバイスのデザインが、小さい画面幅のデバイスにも適用されるため、まずPC版でデザインを作成し、その後順番に画面幅を小さくしていき、デザインを調整する
参考
Discussion