👏
Figma からコードを生成するツール
はじめに
Figma からコード生成できるツールを調べたのですが、いい記事がなかたので自分でまとめました。
会社のアドベントカレンダーでこの記事をベースにしたブラッシュアップ版を作成しました。
Figma からコードを生成するツールについて
比較
| 名前 | 料金 | デザイン | コード | 一括出力 | HTML | React |
|---|---|---|---|---|---|---|
| 公式 CodeGenerator | 無料 | △ | ◯ | × | × | ◯ |
| anima | 有料 | ◎ | ◯ | ◯ | ◯ | ◯ |
| clapy | 無料 | ◯ | ◯ | ◯ | × | ◯ |
| Builder.io | 無料 | ◯ | △ ※1 | ◯ | ◯ | ◯ |
| Locofy.ai | 無料 | ◯ | ◯ | ◯ | ◯ | ◯ |
※動作確認できなかったものは省いてあります。全て Figma のプラグイン想定です。
※1 Builder はボタンが CSS ではなく画像で出力されてしまう。
公式 CodeGenerator Beta
- デザインの小さい分割単位を React コード生成するツール（小さい分割なので基本はコンポーネント単位）
- 一括で出力できない
- Figma 内部でコードが簡単に確認できる
- 普段の開発には活かせるところはある
anima
- Figma - Export Design to Code - Anima
- 有料
- 一括で出力可能
- 出力結果は全体で一番綺麗
- React と HTML+CSS どちらも出力可能
- レスポンシブ もある程度できる https://persol-service-dev.esa.io/posts/12865#comment-2342385
clapy
- Install the plugin - Docs
- React のコードのみ
- 一括で出力可能
- anima と比較したら結構崩れた
- コード品質は悪くはないしコンポーネントにちゃんと分けてくれている
- Figma デザインから React コンポーネントを生成するツール clapy を試してみた
Figma to React Component
- 基本的に公式とほぼ同じ仕様
- 公式がない状況なら検討の余地がある
Builder.io Beta
- Import Figma designs - Builder.io
- 旧名称：Figma to HTML, CSS, React & more!
- 同社のアプリ版があるがこちらは Figma のプラグイン想定
- 一括で出力可能
- ボタンなどが画像になってしまう
- 無料
- React と HTML+CSS どちらも出力可能
- Figma から React のコードを生成する！「Figma to HTML, CSS, React & more!」 ++ Gaji-Labo ブログ
- Figma『Builder.io(旧 HTML to Figma)』が鬼便利！WEB デザイナー初心者＆プロ必見のコピープラグイン | としブログ
Locofy.ai Beta
- Locofy.ai
- React と HTML+CSS どちらも出力可能
- 一括で出力可能
- anima と比較したら結構崩れた
- デザインからプログラムを生成する Locofy.ai を使ってみたら感動した - Qiita
- GitHub などに連携可能
Figma to React from Quest
- 専用のコンポーネントでデザインしないと変換してくれないのでコードは未確認。 https://docs.quest.ai/quest-docs/getting-started/quick-start-build-your-first-component-from-figma
- 一旦 Quest に取り込んで（要するに中間コード）から出力する仕組み。
- 価格は高くはない 5000 or 7000 円
AWS Amplify STUDIO
- AWS 未契約なので未調査
- 簡単なアプリは作成可能だが、コードを生成はしてくれなさそう
- React が書けない人向けのサービスでコード生成ツールではなさそう
- Amplify Studio でサクッと Web サイトを試してみた
bifrost
- 活動休止
Discussion