Figma to STUDIOやってみた

社内LT大会にて発表したFigmaのプラグインである「Figma to STUDIO」の紹介スライド

Transcript

1. Figma to STUDIOやってみた プロダクト本部 プロダクト開発部 プラットフォーム開発1G　駒井 平
2. 自己紹介 駒井　平　プロダクト本部 プロダクト開発部 プラットフォーム開発 1グループ • 2022年10月入社 • 新卒銀行員→エンジニア • 趣味：ランニング、サッカー • 5月にキャンプ行ってから焼き芋にハマってます • 最近コーン茶にもハマってます
3. とある日、友人から
4. うちの会社のホームページ新しくしたいんだよ ね、作ってよ！ いいよ 友人 僕
5. 制作手段 定期的に更新したいコンテンツがあるって言ってたな、 となるとCMSが必要だな • CMS機能がついてるWeb制作ツール • フルスクラッチ • その他
6. 色々調べた結果、STUDIO（スタジオ）を選択
7. STUDIO（スタジオ） • ノーコードでWeb制作ができるツール • CMS、フォーム機能 • ホスティング 中でも特に便利そうな機能が、、
8. Figma to STUDIO • Figmaのプラグイン • FigmaデータをSTUDIOにインポートできる • 自動レスポンシブ設定 • 画像・カラー・フォント等も自動追加
9. いずれの方法でもデザインはしないといけないから、 デザインをそのままインポートすれば作成できるの便利すぎる！
10. ということでやってみる
11. こちらからインストール https://www.figma.com/communit y/plugin/1274345780965443906/fi gma-to-studio
12. やってみた（ヘッダー&ヒーローイメージ編） Plugins→Figma to STUDIOをクリック
13. やってみた（ヘッダー&ヒーローイメージ編） すると、インポートする範 囲がモーダルで見れる。 必要に応じて範囲選択を してクリップボードにコ ピーを押すと、、
14. ・・・
16. タイムアウトしとるやん
17. 原因 調べてみると、大きな画像や選択範囲が広い（複雑なデータ）の時にタイムアウトするこ とがあるらしい。一方でシンプルで画像が少ないデータは比較的サクッとインポートでき るとのこと。 なのでこのような場合、小分けにしてインポート するとうまくいく。 もしくは大きな画像のみSTUDIOで直接アップロードするとか。
18. 次
19. やってみた（カード編） クリップボードにコピーし、 STUDIOのデザインエディタで ペーストすると、、
20. やってみた（カード編） STUDIOでペーストした内容 が確認できる。 PCは大体良さそうだが、SP はレスポンシブ（縦並び）に なっていない
21. 原因 Figmaでデザインする際に Auto layoutが適切 に設定されていなかった。 Auto layout 指定したフレームの中に存在する要素を単一 方向（縦・横）へ規則的に並べたり、要素間の padding/margin等のルールを設定できる機 能。 https://wentz-design.com/post/figma-how-t o-use-auto-layout/ 特にFixed・Hug・Fillの 使い分けが重要
22. Hug・Fixed・Fillを使い分ける Auto layoutの子要素はwidthやheightに Hug・Fixed・Fillの3つの値を選ぶことが出 来る。 • Hug：子要素に合わせて可変 • Fixed：親や小要素に関わらず固定 • Fill：親要素に合わせて可変 画像等は下記から引用 https://qiita.com/kabechiyo13/items/370d810ac4a4 179ff85e
23. • そもそもFigmaを深く学ばずなんとなくで 作ってたので、いざインポートしようとし た時にほとんどのデザインが意図した通 りにインポートされなかった • その結果、作ったデザインデータのほと んどをAuto layoutで組み直し 適切に設定すればちゃんと縦並びになる
24. Figma to STUDIOを使う時のポイント • 小さなレイヤー単位でインポートする • Figmaでデザインを作る時点で綺麗に作る（特にAuto layout）と、STUDIOでイン ポートした時の精度が高い • また、リンクにしたいような箇所（ヘッダーのナビゲーションとか）は普通にインポー トしてもSTUDIOではリンクとしてインポートはされないため、STUDIO上で手直しし てあげる必要がある。 https://help.studio.design/ja/articles/8277073-figma-to-studio
25. まとめ Figma to STUDIOをうまく使うためにはちょっとしたポイントを押さえる必要があるが、使 いこなせれば強力なツール とにかくFigma上でのデザインだけである程度完結できるのはとても便利！
26. おわり