はじめに
Figmaに新機能「開発モード」が追加されました。この機能を使うと、Figmaで作成したデザインをコードに変換できます。この記事では、iOSアプリ開発者を対象に、Figmaデザイン→SwiftUIコードの変換でできること・できないことを記録していきます。ただし、2023年7月6日時点の情報であり、今後変わる可能性があります。
できること
グラデーション
グラデーションのコード生成は可能みたいです。
綺麗なグラデーションの色味を調整するのは難しいので、この使い方は便利そうです。
Figma
実行結果
影
影のコード生成も可能です。
Figmaの方が直感的に影の設定ができるので、こちらも役立ちそうです。
Figma
実行結果
レイヤーブラー
レイヤーブラーのコード生成もできました。
できないこと
背景のぼかし
背景のぼかしはコード生成できませんでした。
これができればグラスモーフィズムのようなデザインが簡単に作れると思ったのですが、残念です。
FigmaのVector→SwiftUIのPath
FigmaのVectorをSwiftUIのPathに変換することはできませんでした。素直に書き出してImageとして扱いましょう。
おわりに
Figmaの開発モードはこれからも進化していくと思うので、今後も注目していきたいです。また新しい発見があれば追記していきたいと思います。この記事が参考になったと思った方は、いいねとフォローしていただけると励みになります。