Figma からコードを生成するツールについて #techtekt Advent Calendar 2023

この記事はtechtektアドベントカレンダー2023の25日目の記事です🎁

はじめに

こんにちは。

HR forecasterというプロダクトの開発をしている松本です。

hr-forecaster.jp

HR forecasterのデザイナーチームが作成したFigmaを元に、ランディングページのコードを自動生成できないか調べたので、結果を共有したいと思います。

この記事のターゲット

Webエンジニアの方
Webデザイナーの方
ランディングページを作成したい方

Figmaとは

Figmaは、デザインとプロトタイピング界隈で人気のツールの一つです。

主にフロントエンドのUI/UXデザインを行うクラウドベースのツールで、リアルタイムでデザイン作業を共有することが可能です。

これによりスムーズなコラボレーションやコミュニケーションが実現します。

エンジニアの私はFigmaをWebサイト構築の元データとして参考にしています。

今回コードを生成するFigmaプラグインを導入していくのですが、それには編集権限が必要です。

背景

HR forecasterではデザイナーチームがFigmaを使ってWebアプリやランディングページのデザインを作成しています。

年明けにHR forecasterのランディングページを新しくすることになったので、ランディングページの開発体制について検討していました。

その際に、すでに資産としてあるFigmaデザインからコードを綺麗に生成してコスト削減をしたいと思い、調査を行いました。

Figmaデザインからコードを作成する利点

利点は以下の２点です。

自動的なコード生成により、開発者は時間と労力を節約できます。
デザイナーは自身の得意分野ではないプログラム領域の作業を削減できます。

総合的には時間的なコストカットによる恩恵が大半です。

後で記載する問題点がなければ他にも

一致性の自動確認
職能をまたぐスムーズなコラボレーション

なども利点に入ってくる可能性があります。

多くのFigmaプラグインは無料なのでプロダクト初期の段階では利用する利点はあると考えられます。

Figmaデザインからコードを作成する問題点

最大の問題点は完全なデザイン再現度で生成されるわけではないことです。

元のFigmaデザインにもよると思うのですが、今回私が生成したHR forecasterの新ランディングページではデザインの再現性が100%というわけにはいきませんでした。

他の問題点としては今述べたデザイン再現度に起因することが多く

デザインと一致させる為に生成されたコードの手直しが必要
コードを手直しする必要があるので２回目以降自動生成を継続的に行うことが困難

などがあります。

各ツールの総合的な比較

私の主観により以下の項目に分けて各ツールを比較しました。

料金：ツールの利用料金

デザイン：デザインの再現性

コード：エンジニア視点でのコード品質

フレーム出力：Figmaのフレーム単位で出力できるか(一部のツールはコンポーネント単位でしか出力ができません)

HTML：コードをHTMLとして出力できるか

React：コードをReactとして出力できるか

名前	料金	デザイン	コード	フレーム出力	HTML	React
公式 CodeGenerator	無料	△	◯	×	×	◯
anima	有料	◎	◯	◯	◯	◯
clapy	無料	◯	◯	◯	×	◯
Builder.io	無料	◯	△ ※1	◯	◯	◯
Locofy.ai	無料	◯	◯	◯	◯	◯

※動作確認できなかったものは省いてあります。全て Figma のプラグインでの計測です。

※1 Builder はボタンが CSS ではなく画像で出力されてしまう。

総合的にはどのツールを使っても問題点で挙げた「完全なデザイン再現度で生成されるわけではない」を解消することはできませんでした。

更新が入らないプロジェクトではコスト削減の利点がありますが、継続的に利用していくのは現段階では厳しいと感じました。

しかし、animaは流石に有料版ということもあり、他のツールよりも頭ひとつ分デザインの再現度が高い印象でした。

各ツールの所感

公式 CodeGenerator Beta

Figma Pluginサイト
デザインの小さい分割単位を React コード生成するツール（小さい分割なので基本はコンポーネント単位）
Figma 内部でReactのコードが簡単に確認できる
無料
❌コンポーネント単位でしかで出力できない
React のコードのみ

anima

Figma Pluginサイト
公式サイト
出力結果は全体で一番綺麗
無料版ではWebサイトによるソースコードとデザインの確認までで、ダウンロードは有料版の契約が必要
レスポンシブもある程度できる
- 参考：https://persol-service-dev.esa.io/posts/12865#comment-2342385
有料
フレーム単位で出力が可能
React と HTML+CSS どちらも出力可能