🧸🧸🧸 Figma から SwiftUI のコードを生成するツールを作りました 🧸🧸🧸 - ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

Figma => SwiftUI

Figma から SwiftUI のコードを生成するツール、Sigma を作りました。Swift愛好会のイベントで年末に発表しました。

Figma のデザインファイルから SwiftUI に変換するプラグインを公開しました

スターくださいhttps://t.co/b2JknFeGHD #love_swift
— ＼(🎅)／ (@_bannzai_) 2021年12月21日

ただ、プラグインとしてリリースする作業をすっかり忘れていました。

プラグイン自体の公開は待ってください。スターが星あまりに忘れてました#love_swift pic.twitter.com/fIKDbpIw2c
— ＼(🐯)／ (@_bannzai_) 2021年12月21日

そして、プラグインの審査を通して先日無事にリリースされました 🎉

www.figma.comhttps://www.figma.com/community/plugin/1055606842094169320/Sigma

スターください

どんなの

こんなの

www.youtube.com

メカニズム

ドキュメントでも軽く触れてますが改めて

FigmaのPluginではデザインファイル上でレイヤーをPluginのAPI経由で取得できます。その中から選択中のステータスも取得でき、Sigmaでは選択されたレイヤーから子供のレイヤーを見て、種類や構造ごとにSwiftUIのViewにマッピングする処理が書かれています。

ただ自由レイアウトで置かれたものを解析してそれらをSwiftUIの VStack や HStack に割り当てる。といった処理は現実的ではないので、Figma の Auto Layout を設定しているプロジェクトで使用できます。

www.youtube.com

どう便利になるか

まず、Figma の Auto Layout について軽く触れます。FigmaのAuto Layoutは言ならばSwiftUIの VStack や HStack と同じように垂直・水平方向に要素を並べるためのフレームです。Jetpack ComposeやFlutterだとColumnやRowになります。なので、昨今のUIフレームワークにとっては、Figma の Auto Layout でデザインされているものは理論上コードで表現することが可能です。逆に言うと実現が困難なものをデザインのプロセスで気づくことができます。

チーム開発だとエンジニアはデザインのレイアウトの意図を汲み取りやすく、実装されたものとデザインの乖離が防げて確認等の後からのコストが下がることも期待できます。

Sigmaはそこから一歩踏み込んだツールとして捉えることができます。つまり、実装が実現可能になっているのならコード生成できるだろう。と言う意図です。

レイアウト(配置)について中心に触れましたが、もちろんTextであればフォントサイズやテキストカラー、ドロップシャドウや角丸といったものもサポートされています。

従来のXibでやっていたようなビルド無しでのレイアウト確認ができるような価値に似た価値もあると思います。デザインをビルド無しでプレビューしつつ、実際に動くもの(SwiftUIのコード)ができてたら最高だな。って考えています。

苦労したところ

良さそうなところばかり書きましたが悩んでいる部分も。実際はデザインツール上での表現と実際のコードの表現ではギャップがありその点が悩みの種ですね。目的が違うので当たり前なのですが。

例えば FigmaのTextはデザインツール上に矩形として表示領域が確保されていますが、これに背景色やボーダーをつけたりはできません。コード上で Text.background(color) と表現するのが一般的なものであっても、デザインツール上では何かしらTextを包む枠を用意して、その枠に対して背景色をつけることになります(私がFigmaのこと知らないだけかも)。これはコード生成時に Text.background(color) とはできないのでもやっとポイントですね。

他の例では Grid 表示は VStack と HStack の組み合わせと区別できなかったりします。なので Sigma ではレイヤーの名前をスペシャルな処理を行うためのマーカーとして利用するアプローチをとっています。詳しくはドキュメントも見てみてください。

アプローチの仕方やサポートの範囲は変わる可能性がありますが、今はレイヤーについている名前から該当する処理をしているものもあるのでSigmaを使う場合は一度ドキュメントも見てみてください

サポートされているもの

ドキュメントに随時更新中: Supported Component

現時点でサポートされているSwiftUIのコンポーネントは下の通りです

VStack
HStack
LazyVGrid
LazyHGrid
Image(systemName:)
AsyncImage
Text
TextField
Button
Divider
Spacer
ScrollView
List

参考

React で同じようなものを作っている方もいるので興味ある方はこちらも覗くと面白いかもですね。SigmaでもFigma Plugin の UI部分(Copy to Clipboardの部分)も公開されているソースコードを大いに参考させていただきました。ソースコード公開されているの最高にありがたいですね。

作ろう！自分だけの Figma コード生成機✨

今後

iOSだとNavigationBarやTabBarもそのうち何かしらのアプローチを考えてサポートを行いたいなあ。と思っています。あと SwiftUIなのでmacOSやiPadOSのアプリでも使えると思っています(未確認)

完璧にコード生成できるものを目指すと言うよりは Sigma 単体ではデザインファイルから見た目を生成して、そこから編集して開発速度を上げる用途が良いと考えています。

元々は個人のアプリ開発でFigmaでデザイン作ると同時にデザインについて確認する。そこからコード生成してアプリの開発速度を上げる。がモチベーションだったりするのでこれからアプリいっぱい作っていきたいですね。上述したようにFigmaのAuto Layoutとして開発の効率化したいチーム開発者の方も使う上でマッチしていると思います。あとデザイナーの方でiOS アプリ開発したいという声も届いているのでそう言う方にも良いかもしれないですね