Pixsoのデザインからコードへ：フレームワーク、設定、エクスポート

あやね

公開日：2026年11月12日　更新日：2026年11月12日

PixsoのD2C（Design to Code）を使うと、デザインからフロントエンドのコードを生成できます。レイアウトやスタイルを一から書き起こす作業を減らし、デザイナーと開発者が同じデザインをもとに実装を進めやすくなります。生成したコードは実装の出発点です。プロジェクトに組み込む際は、画面の再現性に加え、データ連携や必要な動作も確認します。

確実な引き継ぎは、コードを書き出す前の準備から始まります。UIデザインの共同作業スペースで、各出力にコンポーネントの状態、参照するデザイントークン、レスポンシブ対応のルール、担当者を紐づけておきましょう。開発者が、確定した仕様と検討中の案を区別できるようにするためです。

正常に完了する流れだけでなく、読み込み中、データが空の場合、エラー時、操作が無効な状態も、同じコンポーネントセットに用意します。
余白や文字スタイルの値が、その場限りの上書きではなく、共有スタイルやデザイントークンを参照しているか確認します。
生成コードだけではインタラクションを十分に再現できない場合は、既知の制約と手作業で補う手順を記録します。

I. D2Cとは

D2Cは「Design to Code」の略で、デザインをコードに変換する仕組みです。フロントエンド開発を支援し、デザインの実装を進めやすくするとともに、コードを手作業で書く負担を減らします。

従来のD2Cパネルでは、Pixsoのページ内にあるレイヤーのレイアウトやデザインシステムのコンポーネントを認識し、その情報をコードに反映できます。フレームワークの選択肢には、React、Vue、HTML、ArkUI、Flutterがあります。以下では、このパネルの設定と書き出し手順を説明します。

Pixsoのコンポーネント機能と組み合わせることで、D2Cを実際の開発にも取り入れやすくなります。デザインシステムを連携させ、個々のコンポーネントを認識してコードとして出力する使い方にも対応しています。

デザインの細部をコードに反映。 レイアウトや見た目の情報を引き継ぎ、意図した画面に近づけます。書き出した画面が元のデザインと一致するかは、実装環境で確認します。
デザインシステムとコンポーネントの認識。 デザインファイルから、スタイル、デザイントークン、コンポーネントを識別して抽出します。
フロントエンドの手作業を削減。 コードを書き起こす負担を減らすことで、開発期間の短縮と、安定した引き渡しを支援します。

II. 利用モードと機能の違い

従来のD2Cは、Design Mode（デザインモード）とDev View（開発者ビュー）の両方から利用できます。ただし、このD2Cパネルで行える操作には次の違いがあります。

Design Mode：コードの表示、生成、書き出しに対応しています。さらに、Optimize design（デザインを最適化）を使って、デザインのレイヤーを修正できます。

Dev View：このパネルで行えるのは、コードの表示、生成、書き出しです。Design Modeのように、Optimize designでレイヤーを修正する操作は含まれません。

画面とバージョンについて：以下の19枚は、従来のD2Cパネルを示す英語UIの画面です。ボタン名は図に合わせて英語を併記しています。現在のD2C⁺は企業向けDev Viewの機能で、EnterpriseのFull-feature SeatまたはDev Seatと、企業スペース内のファイルが必要です。D2C⁺の対応フレームワークはReact、Vue、Flutterです。従来のD2Cパネルとの違いや利用条件は、D2C・D2C⁺のヘルプで確認できます。

Design ModeからD2Cを開く場合の画面。

Dev ViewからD2Cを開く場合の画面。

III. フレームワークとコード生成の設定

ドロップダウンメニューで出力先のフレームワークを選び、コード生成の設定を行います。選べる設定項目は、フレームワークによって異なります。

スタイルの抽出（Extract styles）：デザインファイル内のスタイルを識別して抽出します。コード内でもスタイル名を使うため、どのスタイルを参照しているか読み取りやすくなります。

デザイントークンの抽出（Extract design tokens）：デザインファイル内のデザイントークンを識別して抽出します。コードにもトークン名を使い、値が何を表しているか把握しやすくします。

コンポーネントの抽出（Extract components）：ファイル内のコンポーネントを識別し、再利用できるコードを生成します。コード内にコンポーネント名を使うことで、デザインとの対応も追いやすくなります。

クラス名の接頭辞（Prefix class names）：生成するすべてのCSSクラス名に、共通の接頭辞を付けます。プロジェクトで使用する他のスタイルライブラリと、クラス名が衝突するのを避けるための設定です。

ページレイアウト（Page layout）：

Responsiveを有効にすると、ブラウザーの幅が変わったときに、対応するレイアウト設定を持つ要素が、元の構造や相対的な位置関係を保つように配置されます。デザイン側のレイアウト設定も確認しておきましょう。

Unitでは、生成するコードで使う寸法の単位を設定します。図の例では、pxまたはremを選べます。

命名規則（Naming convention）：ファイル名の書式を、次の2種類から選択します。
Pascal Case：SamplePixsoFile
Kebab Case：sample-pixso-file

インタラクションの形式（HTMLのみ）：

Single HTML pageでは、デザインページのレイヤーを1つのHTMLファイルにまとめます。Pixsoで設定したプロトタイプのインタラクションの多くを、この形式で出力できます。
Multiple HTML pagesでは、デザインページごとに独立したHTMLファイルを生成します。この形式で出力できるのは、一部の基本的なプロトタイプのインタラクションです。

出力先のフレームワークを選択します。
Reactのコード設定。言語やビルドツール、スタイルの形式などを選択します。
Vueのコード設定。使用する言語やスタイルの形式を指定します。

HTMLのコード設定。スタイルの抽出、レイアウト、インタラクションの形式などを選択します。
ArkUIのコード設定。図では、スタイル抽出の設定が表示されています。
Flutterのコード設定。図では、コンポーネント抽出の設定が表示されています。
スタイルの抽出結果を確認するには、Project structure（プロジェクト構造）からcommon.cssを選択します。選んだファイルのスタイル定義が、コード欄に表示されます。
デザイントークンの抽出結果を確認するには、Project structureからトークンをまとめたCSSファイルを選びます。下図ではvariables.cssが該当し、トークンに対応する変数の定義を確認できます。
コンポーネントの抽出結果を確認するには、Project structureから対応するコンポーネントのCSSファイルを選びます。下図ではComponent23729.cssを開き、コンポーネントやインスタンスに対応するコードを表示しています。

IV. コードに変換するレイヤーを選ぶ

コードを生成する前に、変換の対象となるデザインレイヤーを選択します。

方法1：Select frame（フレームを選択）をクリックし、一覧で対象レイヤーにチェックを入れます。

方法2：D2Cの最初の画面で、対象レイヤーをドラッグして範囲選択します。

Select frameをクリックして、レイヤーを一覧から選択します。

D2Cの最初の画面で、コードに変換するレイヤーをドラッグして範囲選択します。

V. 生成したコードの確認と書き出し

対象のデザインを確認したら、Next, generate code（次へ進んでコードを生成）をクリックして、コードを生成します。

生成後は、Project structure（プロジェクト構造）とLayer list（レイヤー一覧）から、対象のコードを確認できます。変換したレイヤーの画像素材を確認するには、View（表示）をクリックします。

出力先のフレームワークや設定を変更したい場合は、Regenerate（再生成）をクリックして、コードを生成し直します。

Next, generate codeをクリックします。
コードを確認する。 Project structureではプロジェクト内のファイルを、Layer listではレイヤーに対応するコードを確認します。変換したレイヤーの画像素材は、Viewから一覧で確認できます。
単一HTMLファイルで出力する場合：Single HTML pageの設定で複数のレイヤーを変換すると、各レイヤーのコードが同じHTMLファイルにまとめられます。この状態でLayer listの選択を切り替えると、そのファイル内で対応するコードブロックへ移動し、該当箇所が強調表示されます。
Viewをクリックすると、変換したレイヤーに含まれる画像素材が表示されます。
コードを再生成する。 フレームワークや設定を変更する場合は、Regenerateをクリックして、変更内容を反映したコードを生成し直します。
コードを書き出す。 確認が終わったら、図のDownload code（コードをダウンロード）をクリックします。生成したコードのプロジェクト一式を、パッケージとして書き出せます。

まとめ

D2Cは、個々の作業を速めるだけでなく、デザインシステムとフロントエンド実装をつなぐ手段として活用できます。設定、対象レイヤー、出力結果を順に確認することで、手作業を減らしながら、チームで一貫したUIを実装しやすくなります。書き出したコードをプロジェクトに組み込み、必要なデータ連携、権限、業務上の動作を実装・テストして、引き渡しを完了させましょう。