はじめに

ソースコードをデザインデータに出来たら、、そんな要望を叶えてくれるプラグインを見つけました。

code.to.design

実際に触ってみて、実案件に使用可能か確かめてみることにしました。

前提

こちらのプラグインが必要なユーザー、開発者は以下を想定しております。

・デザインデータが存在しない／紛失している

過去に外部業者が制作したサイトで、Figma や XD の元デザインがない。WordPress テーマやテンプレートのみ残っているため、再設計が難しい等々、、、

・コーディング済みの UI をパーツ化して Figma ライブラリ化したい

Bootstrap などの UI コンポーネントを自社デザインに寄せて再利用したい。自社プロダクトの UI がコード上にはあるが、Figma コンポーネントが未整備。等々、、、

・他社サイトの UI を参考にしたモックアップを作りたい

競合調査のため、参考サイトの UI をトレースしたい。提案資料やワイヤー作成に、既存サイトの UI を Figma 上に再現したい。等々、、、

インストールから使用まで

まず元となるHTML、CSSを用意します。（今回はテストの為、chatGPTで生成。）

吐き出してもらったHTMLで表示されるページは以下のようになります。

ではこちらをFigmaに書き出していきます。

【Figmaリンク】

https://www.figma.com/

【今回使用するプラグイン（code.to.design）のリンク】

https://www.figma.com/community/plugin/1222554159237609568/code-to-design-playground-by-divriots

上記プラグインを使用するプロジェクトを指定して開くと以下のような表示になります。

（プラグインを使用するにあたり、新規登録、API_KEIの発行が必要になります。）

API KEYを入力し、先ほど生成したソースコードを入力します。

（HTML入力欄とCSS入力欄に分かれてます。）

下にプレビューが表示されます。

問題なければ右下のadd canvasをクリック

完了するとソースコード通りのデザインがFigmaに反映されます。

生成されたデザインデータを見て

レイヤーもインデントを参照しているのか問題なさそうです。

また基本的なfont-size、margin、padding、color等も問題なく正しい数値、値で反映されてました。

【ローカルサーバーで立ち上げたテストサイト】

【code.to.designで生成したデザインデータ】

最後に

かなり再現性が高いプラグインだと使用していて感じました。

特にPixel Perfectでデザインを制作するにあたってのベースとしてかなり精度が高いので、

リニューアル案件での使用が容易に想像できる良いプラグインでした。

今後、実案件でも使用していこうと思います。

ーーーーーーーーーー
株式会社SAKURUGは「寄付月間2025」に参画しています。
12月中のテックブログのpv数に応じて、アフリカの支援団体に寄付をおこないます。
https://giving12.jp/
ーーーーーーーーーー