経緯
https://studio.design/ja/figma-to-studio
公開されて話題になってて、気になる！
みんなで触ってみようぜ！
実践！！
1. STUDIO 登録
STUDIO アカウントがない人は、登録からです。
2. Figma のプラグインインストール
Figma 側でプラグインをインストールをします。
3. FigmaからSTUDIOへログインする（連携）
プラグイン側でログインを済ませると、こんな画面が出てきました。
4. Figmaからのデータコピー
Frame を選択してみました。すると、こんな感じにプレビューが出てきました。
レイアウト崩れてますが、真ん中にあるボタンでクリップボードにコピーできるみたいです。
レイヤーが多すぎると、ここで固まります🥶
5. STUDIO へのペースト/インポート
いよいよSTUDIOへペーストします。
みんなの感想
※ Figmaのデータの作り方などみなさん異なると思うので、あくまでざっと触ってみた各個人の感想です🙏
😁
・画像とかフレームのインポートの手間を省ける
・クライアントの都合で、急遽STUDIO実装に変更になった泣 みたいなときに助かる
・草案段階や、Figmaでデザインを練りたい時に便利
・シンプルなレイヤーならパッとコピーでインポートで来て楽
😭
・文字が段落ちしたり、AutoLayoutのカラム落ちがペシャンコになることがある
・instance の解除をしたら治った（？）
・マークアップは拾ってくれないので、STUDIOで手動設定
・ソースコード見ると、コード書いて直したい気持ちに...（コード書けない人には便利なのかも）
・想像してたイメージ：ワンタッチでインポート→できた！
現実：コピー終わらな･･･ウッ…崩れ…ぐぬぬ何が悪いんだインスタンス切り離してみるか？
・TOPページのなんでもない普通の文章セクションが、<form>に変換されちゃって手動でも変更できない
・階層が深すぎると結構な確率でうまくいかない
・Figma側で細かいレスポンシブの挙動を設定しても、すべては反映されない
6. 手動でちょい修正
#マークアップ
ソースコードみてみたら色々違ったので、手で直します。
ほとんど <div>でレンダリングされたので、一個ずつ直していきます。
#コンポーネント化
Figmaのコンポーネントまでは拾ってくれないっぽいので、手動でコンポーネント化する必要あるみたいです。
まとめ
手動には敵わないところはまだありますが、夢のあるプロダクトでした！
アクセシビリティとかの取り組みも発足してるみたいだから、これからの改善に期待です！
コード書けない人でも webサイト作れる未来が来てますね〜👍👍
A11yについての取り組み↓
https://blog.studio.design/ja/posts/a11y-attributes