Figma to Codeができる最も良いツールの紹介 [2023年6月]

 [はじめに]

弊社はシステムの受託開発を行っていますが、できる限り早く開発する何かを常に探しています。
早く開発するためにいくつか手法がありますが、そのうちの一つに良いツールを選ぶことがあります。

この文脈での良いツールとは、これまで人が行っていたものを完全に近い形で代替するものを指します。


[Figma to Codeについて]
現時点でシステム開発をする際にデザインで最もよく使われるツールはFigmaです。
そのため、Figmaデザイナーもマーケットに多く存在します。

Figma to Codeとは、Figmaで作ったデザインを実際にコードに出力する作業のことです。これは私の観測範囲では1年前までは人がFigmaを見てコードをベタ打ちしていましたが、現在は生成できるツールがあります。

最近FigmaのDevモードが出ましたが、人がコードベタ打ちは以下の動画のよ
うなイメージです。

https://www.youtube.com/watch?v=wk9xSDNboZw&ab_channel=DesignCourse

[現時点で最もおすすめできるツール Locofy.ai について]
前置きが長くなりましたが、おすすめできるツールはLocofyです。

タイトル未設定

ちなみに他に検証したツールは以下です。
https://teleporthq.io/
https://www.dhiwise.com/
https://function12.io/
https://overlay-tech.com/

これらツールを実際にPJでデザイナーとエンジニアに使ってもらい、検証したところLocofyが最も良い結論となりました。

Locofyを簡単に紹介すると、Figmaからコードを生成してくれるサービスです。そのため、Webサイト・Webアプリケーション・スマホアプリケーションの見栄えとなるコードがプロダクションレベルで自動生成できます。
レスポンシブも対応しています。

1時間のビデオですが、こちらを見るとLocofyの多くがわかります。

他のツールもコードの生成はできますが、デザイナー観点で致命的な制約があったりすることが多く、現時点ではLocofyが最も自由なデザインをコードにできます。

ただLocofyで別途設定が必要なため、デザイナーの工数はLocofy分増大します。しかし、その分コーダーと呼ばれる職種をスキップできます。見栄えに関するコードは書かずに、バックエンドの開発とインテグレーションに集中できます。

[考察]
昨今はChatGPTをはじめとするAIブームですが、様々な開発効率化ツールも出てきています。現時点でもLocofyを使えばコーダーは不要です。そのため弊社はHTML,CSSコーダーは在籍していません。

ある意味これをベースにコスト・スケジュールの見積もりを行うため、コーダーを抱えている企業よりは工程が少ない分早く開発ができます。

そして、LocofyやFigmaもAIに力を入れておりデザインや設定がどんどん早く・簡単にできるようになっていきます。
このツールの状況を1ヶ月単位でウォッチしておかなければ、他社と比較してあり得ない見積もりの差がつけられる・またはつけることができます。

逆にリスキリングに代表されるように自社社員・自社チームがこのような新しいツールを積極的に使わなければ、これを使っているチームの開発に勝てなくなるでしょう。

ツールの進化が激しくなってきたため、自社に最新ツール調査担当を1名置いて、自社にフィットするツールの検証を行う必要性もあると感じています。