HTML to Figma: React & Next.js — Source → Design

HTML to Figma: React & Next.js — Source → Designは、HTMLやフロントエンドのZIPを編集可能なFigmaレイヤーに変換するFigma Communityプラグイン。

概要

HTML to Figma: React & Next.js — Source → Designは、フロントエンドのソースファイルを編集可能なFigmaレイヤーに変換するFigma Communityプラグインです。HTMLファイルやプロジェクトZIPに対応しており、React、Next.js、Vue、Svelteのプロジェクトも含まれます。

スクリーンショットを取得する代わりに、プラグインはソースをChromiumでレンダリングし、結果を構造化されたデザインとして再構築します。そのため、ソースが対応している場合は、テキスト、ベクター、レイアウト、一部のスタイリング詳細が個別のFigma要素として残るので、編集やデザインの反復により役立ちます。

主な機能

Chromiumベースのソースレンダリング

アップロードされたソースをまずChromiumでレンダリングし、その後、フラットなスクリーンショットではなく構造化されたFigmaデザインとして再構築します。

編集可能なテキストの再構築

検出されたフォントファミリー、ウェイト、スタイル、サイズ、行間、文字間隔、配置、測定済みの改行を保持し、テキストを編集可能なままにします。

ベクターアセットの処理

ベクターSVGアセットと対応アイコンを取り込み、グラフィック要素をFigma内で使いやすい状態に保ちます。

レイアウトと視覚プロパティの保持

フレーム、塗り、境界線、角丸、影、グラデーション、不透明度、クリッピング、変形を編集可能なデザインレイヤーとして再構築します。

色と変数の抽出

レンダリングされたインターフェースから色と再利用可能な変数を抽出し、可能な範囲でデザイントークンを保持します。

ビューポート対応のインポートサイズ

ネイティブのソース寸法、または選択したモバイル、タブレット、デスクトップのビューポートに対応した出力サイズをサポートします。

一般的な使用例

WebページをFigmaに取り込む
静的なHTMLページやフロントエンドプロジェクトZIPをFigmaに取り込み、デザインを一から作り直さずにレイアウトを調整できるようにします。
フロントエンドプロジェクトのエクスポートから作業する
React、Next.js、Vue、SvelteのプロジェクトZIPをレイヤー化されたFigmaコンテンツに変換し、デザインレビューや反復作業に使います。
レビュー用にソースの詳細を編集可能に保つ
チームがレンダリングされたUIとデザインファイルを比較したいときに、編集可能なタイポグラフィ、ベクター、レイアウトを保持します。
ターゲットのビューポートに出力を合わせる
同じソースをプレゼンテーションやハンドオフ用に特定のフレームサイズで取り込みたい場合に、モバイル、タブレット、デスクトップのビューポートを選択します。

Pros and Cons

Pros

ソースを静的画像ではなく、編集可能なFigmaレイヤーに変換します。
テキスト、SVG、レイアウト構造、色、いくつかの一般的な視覚プロパティを保持します。
単体のHTMLファイルと、いくつかの一般的なフロントエンドフレームワーク向けのプロジェクトZIPの両方に対応します。
モバイル、タブレット、デスクトップ、またはネイティブのソース寸法向けに、ビューポートベースの出力サイズ設定を提供します。
有料のProプランが始まる前に、少量の無料利用枠が含まれています。

Cons

canvas、WebGL、再生中の動画、一部の複雑なフィルターのようなブラウザーのみの出力は、完全に編集可能なレイヤーではなくラスター出力にフォールバックする場合があります。
ソーステキストでは、アップロードはChromium workerと外部サービスに送信されると記載されているため、機密コードや第三者コードを扱うチームは、まずプライバシーと利用規約を確認する必要があります。
このプラグインは対応ソース形式とビューポートベースのインポートサイズに限定されており、あらゆるWeb技術に対応する汎用インポートツールとしては説明されていません。

FAQ

Source → Designはどのように使いますか？

Figma Designファイル内で実行します。プラグインを起動し、自己完結型のHTMLファイルまたは対応しているプロジェクトZIPを追加し、検出されたプロジェクトと出力サイズを確認してから、プラグインを開いたままインポートを開始します。

どのソース形式に対応していますか？

ソーステキストでは、自己完結型の .html ファイル、静的プロジェクトZIP、React、Next.js、Vue、Svelte のプロジェクトZIPが記載されています。

何が編集可能なFigmaコンテンツに変換されますか？

プラグインは、テキスト、SVGアセット、レイアウト、色、変数、タイポグラフィ、塗り、境界線、影、グラデーションなどの一般的な視覚プロパティを含め、レンダリング結果を編集可能なFigmaレイヤーとして再構築します。

主な制限は何ですか？

canvas、WebGL、再生中の動画、一部の複雑なフィルターのようなブラウザーのみの出力には、直接編集可能なFigmaの対応物がありません。そうした領域は、ローカルのラスター出力にフォールバックする場合があります。

無料プランや有料プランはありますか？

ページでは、3回の成功したインポートまでは無料と案内されています。その後、Source → Design Proは、コードからデザインへのインポートが無制限で月額9ドルと記載されています。

Quick Facts

カテゴリ: デザインツール
プラットフォーム: Figma Communityプラグイン
ソース形式: HTML、ZIP、React、Next.js、Vue、Svelte
出力: 編集可能なFigmaレイヤー
ウェブサイト: sourcetodesign.com
価格: 3回まで無料インポート、Proは月額9ドル