FigmaをHTMLにエクスポートする方法

ページ名：FigmaをHTMLにエクスポートする方法

Figmaは、Webサイトのプロトタイプをデザインするのに適していますが、コードがなければ、デザインを実用的なWebサイトにすることはできません。幸いなことに、あなたのデザインを、開発者が実際に使えるHTML、CSS、Reactのコードに変換するのに役立つFigmaプラグインがあります。このWikiHowでは、2つの人気プラグイン（pxCodeとAnima）を使って、FigmaデザインのHTMLコードを取得する方法と、Figmaに組み込まれているツールを使って、個々の要素のCSSを表示する方法を紹介します。

方法1

pxCodeプラグインを使用する

  1. Figma to HTML by pxCodeプラグインのページにアクセスします。pxCodeのFigmaプラグインを使用すると、デザインをpxCodeに取り込むことができ、HTML、CSS、Reactコードを表示したりダウンロードしたりすることができます。
    • pxCode プラグイン（および Figma から HTML に変換するプラグイン）は、Figma プロジェクトからコードを表示およびエクスポートできますが、プロジェクトを機能的な Web サイトに変換するには、コードだけでは不十分です。 Figmaからコードをエクスポートすることは、Figmaのプロトタイプからサイトを構築している開発者にとっては便利ですが、あなたが開発者でない場合、コードを使用可能なレスポンシブWebサイトに変換するためには、開発者の助けが必要です。
  2. プラグインをインストールします。青いインストールボタンをクリックし、プラグインのインストールをクリックして確認するだけです。インストールが完了すると、青い "Install "ボタンが灰色になり、代わりに "Installed "と表示されます。
  3. Figma でプロジェクトを開きます。右上のプロフィール写真またはイニシャルをクリックし、内部プロフィールを選択し、プロジェクトをクリックします。
  4. pxCodeプラグインを開きます。これを行うには、Figmaメニュー（Figmaの左上にある "F "のアイコン）をクリックし、プラグインを選択し、PxCodeプラグインをクリックします。
  5. Export All Frame/Artboard ボタンをクリックします。これで、プロジェクトの .pxcode ファイルがダウンロードされます。
  6. ウェブブラウザでアクセスしてください。これでプラグインから必要なファイルが手に入ったので、それをpxCodeにインポートすることができます。
  7. アカウントを作成します。pxCodeを使用するにはアカウントが必要ですので、右上のGet Startedをクリックしてアカウントを作成してください。
    • アカウントが作成されると、サンプルのウェブサイトデザインが表示され、自分のデザインをレスポンシブコードに変換するためのチュートリアルが表示されます。チュートリアルの動画は3分ほどですので、数分かけてご覧ください。
  8. .pxcodeファイルをpxCodeにアップロードしてください。レッスンを見た後、自分のコードを追加する方法を説明します：
    • 左上の戻るボタンをクリックして、レッスンのリストに移動します。
    • もう一度戻るボタンをクリックして、すべてのプロジェクトに移動します。
    • 新規プロジェクトタイルをクリックします。
    • .pxcodeファイルをピンクのボックスにドラッグするか、ボックスをクリックしてファイルを選択します。
    • Create Projectをクリックします。作成されると、まだコンポーネントのないプロジェクトに移動します。
  9. デザインを変換します。.pxcodeファイルをアップロードしたので、それを編集/エクスポート可能なフォーマットに変換する必要があります。方法は以下の通りです：
    • をクリックし、デザインファイルからスクリーン/コンポーネントを変換します。
    • プロジェクト内で簡単に識別できるように、クラスの名前を入力します。
    • 変換］をクリックしてデザインファイルを解析し、pxCode エディタで開きます。
    • 既存のコードを変更せずにエクスポートすることもできますが、エクスポートする前にコードを微調整する良い機会です。
  10. コードのエクスポートボタンをクリックします。プロジェクトの右上にあります。しばらくすると、コードのエクスポート画面が表示されます。
  11. HTMLタブをクリックします。一番上の2番目のタブです。これで、あなたのデザインのHTMLが表示されます。
    • コードをコンピュータに保存するには、一番上のダウンロードをクリックします。または、エディタに貼り付けるには、コピーをクリックしてクリップボードにコピーします。
    • コードをダウンロードすると、画像を含むすべてのCSSとアセットを含むZIPファイルが作成されます。
方法2

Animaプラグインを使用する

  1. Animaプラグインのインストールページにアクセスします。にあります。Anima は、開発者向けの HTML、CSS、React、および Vue コードを、Figma プロジェクトから簡単にエクスポートできる Figma プラグインです。Anima を使ってコードをエクスポートすると、プロジェクトの HTML、CSS ファイル、画像、フォントが含まれた ZIP ファイルがダウンロードされます。
    • プラグインは無料ですが、Animaを使ってHTMLやその他のコードをエクスポートするには、Proアカウントが必要です。 アカウントは月額31ドルからです。
    • Animaは、Figmaプロトタイプからほとんどのコードをエクスポートできますが、コードがあるだけでは、機能的なウェブサイトを構築するのに十分ではないことを覚えておいてください。コードのエクスポートは、プロトタイプから作業している開発者にとっては貴重なものですが、あなたが開発者でない場合、そのコードを使用可能でレスポンシブなウェブサイトに変換するには、やはり開発者の助けが必要です。
  2. プラグインをインストールします。青いインストールボタンをクリックし、プラグインのインストールをクリックして確認するだけです。インストールが完了すると、青い "Install "ボタンが灰色になり、代わりに "Installed "と表示されます。
  3. Figma でプロジェクトを開きます。右上のプロフィール写真かイニシャルをクリックし、内部プロフィールを選択し、プロジェクトをクリックします。
  4. Animaアカウントを作成します。コードをエクスポートするには、Anima のアカウントを作成する必要があります。方法は以下の通りです：
    • Figmaメニュー（左上の "F "のデザイン）をクリックします。
    • メニューのプラグインをクリックします。
    • Animaプラグインを選択します。
    • サインアップをクリックします。
    • アカウントを作成します。新しいパスワードを作るのが面倒なら、Googleでサインアップすることもできます。
    • 新しいアカウントの設定が完了したら、Figmaに戻るをクリックします。
  5. エクスポートしたいフレームを選択します。例えば、ページ全体のコードが必要な場合は、ページを囲むフレームを選択します。
  6. Anima プラグインを開きます。これを行うには、Figmaメニューをもう一度開き、プラグインを選択し、アニマ・プラグインをクリックします。Animaにサインインしているので、Animaプラグインのウィンドウが表示され、Prototypeタブが開いています。
  7. Get Codeをクリックします。Get Codeタブの一番下にあるオレンジ色のボタンです。
  8. 新しいAnimaプロジェクトを作成します。新規作成をクリックし、Animaのプロジェクト名を入力し、プロジェクトの作成をクリックします。これで新しいプロジェクトが作成され、自動的に選択されます。
  9. Sync & Get codeボタンをクリックします。ウィンドウの一番下にあります。これでデザインがAnimaのウェブサーバーに同期され、ダウンロード用のコードパッケージが生成されます。
    • Proアカウントをお持ちでない場合は、アップグレードを促されます。Pro アカウントがなくても Anima にプロジェクトを同期することはできますが、アップグレードしない限りコードをダウンロードすることはできません。
  10. Save をクリックしてコードをダウンロードします。これで、コードを含むZIPファイルがコンピュータに保存されます。
方法 3

個々の要素の CSS を表示する

  1. Figma でプロジェクトを開きます。Figma に内蔵されているインスペクト機能を使用すると、デザイン内の個々の要素の色、サイズ情報、タイポグラフィの CSS コードを表示することができます。 これは、サイトのすべてのコードが必要なわけではなく、基本的なデザイン情報だけが必要な場合に便利です。
  2. 表示したい要素をクリックします。シェイプ、テキスト、フレーム、または背景をクリックできます。
  3. Inspectタブをクリックします。右のパネルの一番上にあります。
  4. コード」ヘッダーの下にある「CSS」を選択します。 選択した要素のコードが右パネルの下部に表示されます。
    • iOSまたはAndroidに特化した開発用のコードを表示するには、代わりにメニューからそれらのオプションのいずれかを選択します。
  5. コードビューを切り替えます。コードセクションに2つのアイコンが表示されます。1つは2つの括弧、もう1つは3つの水平線です。
    • デフォルトのビューは2つの括弧で囲まれたコードビューです。FigmaからCSSコードを簡単にコピーして、エディタに貼り付けたい場合は、このオプションをクリックしてください。
    • コードを素早く表示したい場合は、3本の線をクリックするとテーブル表示になります。
この記事は、CC BY-NC-SAの下で公開されている " How to Export Figma to HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧