🛩️

Figma からコンポーネントのコードを生成！Overlay のレビュー

2021/02/09に公開

CSS

2021/04/11 追記

他サイトに行って生成するという体験が個人的に残念だったため自作しました。

Figma からそのまま使えるコンポーネントのコードが生成できたら…。

そんなことを夢想する方もいらっしゃるのではないかと思いますが、実は Figma 自体の Auto Layout が進化してきていることによって意外と現実的なものになってきています。

それを実現してくれる Overlay という Figma から React のコンポーネントなどを生成するツールについて紹介いたします。

Figma の Auto Layout とスタイルの取得方法について

はじめに、これなら確かに自動生成できそうだ！という期待感を持ってもらうために、すごいざっくり Auto Layout とプラグインなどを通じたスタイルの取得についてお話しします。

Auto Layout をザクっと説明すると、こんな感じで要素の寄せ方を直感的に指定できたり space-between な配置を指定できたりと CSS の flexbox に近いものになってきています。

また、こうやって Auto Layout で指定した情報は CSS としても取得できるようになっており、これらの値はプラグインや Figma の REST API を通じて取得することができます。
ここからもなんとなくレイアウトの部分も合わせてコード生成できそうだという期待が高まるのではないでしょうか。

Figma Plugin API reference から引用

要件

それでは、具体的にどんなアウトプットが得られれば嬉しいか、個人的な定義をしておきたいと思います。
Figma 上でのコンポーネントにプラグインを実行したら、レイアウトも含めた HTML と CSS のコードが返ってくる
ことが達成できたら嬉しいです。

個人的にはスタイリングは大きく "見た目" のスタイルと "レイアウト" のスタイルに分かれるのではないかと思っています。

"見た目" のスタイルに関するコード生成は至極簡単で、Figma では Node 毎にスタイルを持っているので、それを取得すればいいだけです。しかしレイアウトのスタイリングは要素間の関係性にもよりますし、ちゃんとレスポンシブなものにしようとするとハードルが比較的高いです。

Auto Layout 登場以前は Figma では全てが Frame 内での absolute な配置で、コード生成系のツールも基本的に absolute なまま出力していたように見受けられるので、中々「生成されたものそのまま使える」という感じではありませんでした。

Overlay の紹介

実はこれを実現するのに有望そうなサービスとして Overlay というものがあります。

https://overlay-tech.com/

Design to "clean" code

いい響きですね。まさに私が求めているものです。
具体的に Figma との使い方を見ると次のようになります。ちなみに無課金だと月に４コンポーネントまで Export 可能で、それ以上は料金がかかります。

アカウントとプロジェクトの作成

Overlay のサイトでアカウントを作ってプロジェクトを作成します。

プロジェクトを作る時は、デザインツール、 React, Vue, HTML + CSS のいずれか、CSS の表現形式を選ぶことができます。

Figma 上でプラグインの実行

まずは Overlay のプラグインをインストールします。

そして、コード生成をしたいコンポーネントを選んで Overlay のプラグインを実行します。
※ 注意点ですが、Component Node になっていないと実行できません。

実行するとログイン画面が出てくるので、先ほど作ったアカウントでログインします。
Figma プラグイン内でログインする、新しい体験です。

ログインすると、名前が設定されてなかったりすると「つけた方がいいんじゃない？」とサジェストしてくれます。今回はそのまま Export します。

するとこんな感じの画面が出て Overlay のダッシュボードに遷移します。

React と Styled-components の CSS が出力されているのが見て取れます、
１００% そのままとまでは行かないかもしれないですが、ちょっといじれば実装にそのまま使えそうです。

導入する上での課題・もう一声ほしいところ

Auto Layout を厳格に使う必要がある

レイアウトのスタイルを生成するためには Auto Layout が必須です。なのでデザインを作っていく上では Auto Layout を必ず使う必要があります。

もっとも Auto Layout を活用していくことはデザイナーにとっても長期的にデザインファイルのメンテナビリティが上がったり、エンジニアも意図が汲み取りやすくなるので、このコード生成の文脈がなくともしっかりやっていきたいところではあります。

Component である必要がある

これがちょっとネックになりそうな気もしているのですが、 Overlay を使う場合には、コード生成する対象は Component node である必要があります。
実際デザインしていて何でもかんでも Component にするわけではないので、出力するだけ一瞬 Component するみたいな運用になったら少し面倒だな〜という予感がしています。

SCSS と Styled-components しか対応していない

なので CSS Modules の人と styled-components の人はOKですが、 Tailwind なり他の記法を用いていると書き換え必要なので微妙かもしれません。

もっと言うと、 styled-components も一つ一つの要素に styled 宣言しているので、ルートに styled して子要素はクラス名とかタグ名指定でスタイルあてる派の人(私です)にはちょっと気に食わないかもしれません。(その場合は React じゃなくて HTML + CSS として export する設定にすればいい気はする)

ただ、将来的には他の Option も追加していくつもりではあるようです。

複数の margin の値は設定できない

これは Overlay というより Figma の制約なんですが、 Auto Layout を使った時子要素間のマージンを個別に設定することはできません。個別に設定したい場合は次のような Spacer コンポーネントなどを作る必要があります。

個人的にはデザインもコードも全部 Spacer コンポーネント使う方針で統一していいんじゃないかという気がしてきました。

Component の import は解決してくれないっぽい

ちょっと無理を言いますが、共通コンポーネントのディレクトリのパスをプロジェクトに設定しておいたら、 export したい Component 内に他の Component があったら import 文自動で挿入してくれると嬉しいなと思いました。

以上がパッと思いつく課題ですが、逆に言うとこの辺クリアしていれば十分使えそうな気もします。純粋な View の部分の工数削減にはいいお供となってくれそうなので、費用感も合いそうならぜひ試してみてはいかがでしょうか。

おまけ: FigmaToCode も面白そう

こちらは OSS でプラグインも提供されています。

レイアウトのスタイルの最適化のために一回独自の表現形式に変換してからコードを生成しています。(でもこれ Auto Layout 発展以前に作り始めたからこうしてるのかな？)

こっちの発展にも期待。