コードからデザインへ
HTML to design：コードとずれてしまったデザインファイルを再構築
リリースされたプロダクトがモックアップと一致しなくなったら、Figmaに取り込み直しましょう。HTML to Framesは、公開中のHTMLをバリアブル、スタイル、コンポーネントを備えたFigmaファイルに変換します。
- サイトのCSSカスタムプロパティからカラーバリアブルを作成
- 繰り返し使われるカードやボタンはコンポーネントに
- 既存のデザインシステムにスナップ
Figma Communityで近日公開
HTML to designは、通常のハンドオフとは逆の流れです。モックアップをコードにするのではなく、リリース済みのコードをデザインファイルに戻します。Figmaファイルが本番環境に追いついていないとき、クライアントからソースファイルのないサイトを引き継いだとき、あるいは2年前のモックアップではなく今ユーザーが見ているものからリデザインを始めたいときに使われます。
多くの逆方向ワークフローの問題は、出力が行き止まりになることです。ページの画像か、HEX値がハードコードされたばらばらの長方形が得られ、誰かが1週間かけてスタイルを手作業で作り直すことになります。HTML to Framesは、実際にメンテナンスできるファイルを作るために設計されています。Proでは、2回以上使われている色とサイトのCSSカスタムプロパティからカラーバリアブルを抽出し、--brand-primaryはColors · <domain>コレクション内のbrand/primaryになります。あわせてテキストスタイルとシャドウスタイルも作成され、カード、ボタン、メニュー項目などの繰り返し構造はインスタンスを持つコンポーネントになります。
チームがすでにFigmaでデザインシステムを持っている場合も、プラグインはそれと競合しません。一致するバリアブルとスタイルは再利用され、Snapを有効にすると、完全一致しない値はご自身のファイルにある最も近いカラースタイルやテキストスタイルにスナップします。同じサイトを2回インポートしても、新しいものは何も作られません。
その結果、最初から整理されたデザインファイルが得られます。全体の流れはHTML to designワークフローガイドを、基本的な変換の仕組みはHTML to Figmaを、各プランの内容は料金をご覧ください。
本番コードから使えるデザインファイルへ
- 01
公開中のページをインポート
URLまたは最大10件のリンクを貼り付けるか、ビルド出力があればサイトフォルダーをドロップします。
- 02
Styles & variablesをオンにする
カラーバリアブル、テキストスタイル、シャドウスタイルが作成され、ファイル内ですでに一致するものは再利用されます。
- 03
自分のシステム向けにSnapを有効化
システム外の値は、ほぼ重複するスタイルを作る代わりに、最も近いカラースタイルやテキストスタイルにスナップします。
- 04
コンポーネントを整理する
繰り返し構造はComponentsフレーム内のコンポーネントとインスタンスとして届き、名前変更やドキュメント化の準備ができています。
- 05
リデザインを始める
現在のプロダクトを一から描き直すのではなく、Auto Layoutを備えた実際のレイアウトで反復できます。
レイヤーだけでなく、デザインシステムを出力
カラーバリアブル
繰り返し使われる色とCSSカスタムプロパティから最大96個のカラーバリアブルを作成し、ドメインごとに1つのコレクションにまとめます。
テキストスタイルとシャドウスタイル
最大48個のテキストスタイルに加え、sm、md、lg、xlサイズのシャドウスタイルを作成します。
自分のスタイルにスナップ
色には知覚的なOKLab距離を、テキストには同じファミリーとウェイト、10%以内のサイズを基準に一致させます。
自動コンポーネント化
繰り返し使われるカード、ボタン、メニュー項目は、テキストと画像のオーバーライドを保ったコンポーネントとインスタンスになります。
ホバーのバリアント
ホバー時の見た目を持つ要素は、DefaultとHoverのバリアントとホバー時インタラクションを備えたコンポーネントセットになります。
LightモードとDarkモード
両方のカラースキームを、LightとDarkのモードを持つ1つのバリアブルコレクションに取り込み、各画面のダーク版コピーも作成します。
手作業でのデザインのリバースエンジニアリングが遅い理由
本番ページを目視でFigmaに再現するには、余白を測り、色をサンプリングし、フォントサイズを推測し、アイコンを描き直す必要があります。マーケティングページ1枚でも1日かかることがあります。数十画面のプロダクトなら数週間かかり、それでも結果は実際の値とずれてしまいます。
HTML to Framesはブラウザから値を直接読み取るため、余白、色、文字サイズは近似ではなく正確です。SVGアイコンは編集可能なベクターになります。レイアウトはAuto Layoutに変換されて2 px以内で検証され、Auto Layoutで何かが動いてしまう箇所だけ絶対配置が保たれます。
これにより、リデザイン初日の過ごし方が変わります。再構築に時間を費やす代わりに、チームは現在のプロダクトの正確なコピーから始め、判断に時間を使えます。
- 実際に使われている色はどれで、偶然生まれたほぼ重複の色はどれか？
- どのコンポーネントが繰り返され、実際にはいくつのバリアントが存在するか？
- リリース済みのレイアウトは、意図したシステムとどこが違うか？
エージェンシーがこれを提案書の準備にどう活用しているかは、Website to Figmaリデザインガイドで解説しています。
各フレームは取り込み元のURLを保持しているため、次のリリース後にページを再インポートしてリデザインと比較できます。デザインファイルは、徐々に古くなっていくもう1つのスナップショットになるのではなく、本番環境とつながったままです。
バリアブルとスタイルの抽出方法
抽出は、要素ごとに1つのスタイルを作るのではなく、小さく使いやすいセットを作るように設計されています。
色
色は、2回以上使われている場合、またはサイトでCSSカスタムプロパティとして定義されている場合にバリアブルになります。カスタムプロパティの名前は構造として保たれ、--brand-primaryはbrand/primaryになります。最大96個のカラーバリアブルがColors · <domain>コレクションに入ります。
テキストと影
ページ上で実際にレンダリングされた文字から、最大48個のテキストスタイルが作成されます。影はsm、md、lg、xlのスタイルにまとめられます。
作成より再利用を優先
ファイルに同じ値のバリアブルやスタイルがすでにあれば、それが再利用されます。同じサイトを2回インポートしても新しいものは作られないため、長く使うファイルも整理された状態を保てます。
Light + Dark
Light + Darkカラースキームでは、ページを両方のprefers-color-scheme設定でキャプチャし、1つのコレクションに2つのモードを作成します。Figma Freeのファイルではコレクションあたり1モードしか使えないため、その場合はダークモードが注記付きでスキップされます。
ここで説明したものはすべてオプションです。Styles & variablesをオフにすると生の値を持つ通常のレイヤーが得られ、ちょっとした参照や一度きりの分析にはそれが適している場合もあります。
Snap：インポートをデザインシステムの内側に保つ
本番コードがデザインシステムと完全に一致することはまれです。トークンが#2160E8なのにボタンが#2161E9を使っていたり、見出しが32 pxではなく31 pxだったりします。これらの値をそのままインポートすると、ファイルがほぼ重複したスタイルであふれてしまいます。
Snap to my file's styles（自分のファイルのスタイルにスナップ）がこれを解決します。完全一致がない場合、プラグインは知覚的なOKLab距離を使ってファイル内で最も近い色を探し、同じフォントファミリーとウェイトで、サイズが10%以内の最も近いテキストスタイルを探します。インポートされたレイヤーは、新しいスタイルではなくご自身のスタイルに紐付けられます。
これは次の3つの場面で役立ちます。
- 監査：プロダクトを公式システムで表現した状態を確認したい場合。
- リデザイン：最初のフレームからシステムに沿って始めたい場合。
- 競合分析：他のレイアウトを自分のトークンでスタイル変更したい場合。
Snap、Styles & variables、Components & hover statesはPro機能です。プラグインは必要以上にファイルの内容を読み取りません。レイヤーを書き込み、自身のフレームのメタデータだけを読み取ります。詳しくはセキュリティページをご覧ください。
Snapは、ファイルに公開済みのカラースタイルとテキストスタイルがすでにある場合に最も効果を発揮します。小さく整ったライブラリから始め、代表的なページを1つインポートし、どの値がスナップしたかを確認してから、サイトの残りに対してより大きなMultipleインポートを実行しましょう。
よくある質問
公開中のコードやWebサイトを、編集可能なデザインファイルに戻すことを指します。先にデザインしてからコードを書くのではなく、すでに構築されたものをインポートしてデザインファイルを本番環境と再び一致させます。リデザイン、監査、ソースファイルなしで納品されたサイトに役立ちます。
Proでは可能です。2回以上使われている色と、CSSカスタムプロパティとして定義された色がバリアブルになります。--brand-primaryのようなプロパティは、ドメイン名が付いたColorsコレクション内でbrand/primaryになります。1回のインポートで最大96個のカラーバリアブルが作成されます。
重複しません。ファイル内にすでにあるバリアブルとスタイルは値が一致すれば再利用され、同じサイトを2回インポートしても新しいものは作られません。Snapを有効にすると、完全一致しない値は新しく作られる代わりに、既存の最も近いカラースタイルやテキストスタイルに紐付けられます。
カード、ボタン、メニュー項目などの繰り返し構造が検出され、テキストと画像のオーバーライドを保ったまま、インスタンスを持つコンポーネントになります。はっきりしたホバー時の見た目を持つ要素は、DefaultとHoverのバリアントを持つコンポーネントセットになります。メインコンポーネントは別のComponentsフレームに配置されます。
はい、Proで可能です。カラースキームにLight + Darkを選ぶと、ページが両方の設定でキャプチャされます。LightとDarkのモードを持つ1つのバリアブルコレクションと、各画面のダーク版コピーが得られます。Figma Freeのファイルではコレクションあたり1モードのため、その場合ダークモードはスキップされます。
必要ありません。ほとんどのサイトは公開URLだけで十分です。ビルド出力があればサイトフォルダーや.zipをドロップでき、ログインが必要なページは無料のChrome拡張機能がブラウザに表示されている内容をキャプチャします。どの方法でも同じ編集可能な結果が得られます。
関連情報
Webをなぞって描き直すのは、もう終わりにしましょう。
リンクを貼るだけで、編集可能でレスポンシブな本物のFigmaレイヤーが数秒で手に入ります。無料で始められ、毎月10回インポートできます。
クレジットカード不要。ProはFigma内で購入できます。
Figma Communityで近日公開