はじめに

Figmaに新機能「開発モード」が追加されました。この機能を使うと、Figmaで作成したデザインをコードに変換できます。この記事では、iOSアプリ開発者を対象に、Figmaデザイン→SwiftUIコードの変換でできること・できないことを記録していきます。ただし、2023年7月6日時点の情報であり、今後変わる可能性があります。

できること

グラデーション

グラデーションのコード生成は可能みたいです。
綺麗なグラデーションの色味を調整するのは難しいので、この使い方は便利そうです。

Figma

実行結果

影

影のコード生成も可能です。
Figmaの方が直感的に影の設定ができるので、こちらも役立ちそうです。

Figma

実行結果

レイヤーブラー

レイヤーブラーのコード生成もできました。

できないこと

背景のぼかし

背景のぼかしはコード生成できませんでした。
これができればグラスモーフィズムのようなデザインが簡単に作れると思ったのですが、残念です。

FigmaのVector→SwiftUIのPath

FigmaのVectorをSwiftUIのPathに変換することはできませんでした。素直に書き出してImageとして扱いましょう。

おわりに

Figmaの開発モードはこれからも進化していくと思うので、今後も注目していきたいです。また新しい発見があれば追記していきたいと思います。この記事が参考になったと思った方は、いいねとフォローしていただけると励みになります。