Zenn
🐥

Figmaデザインカンプからコーディングする方法

2023/11/15に公開
CSS
Figma
HTML
デザインカンプ
tech

Figma のデザインカンプからコーディングするには、いくつかのポイントを押さえる必要があります。たとえば、画像の書き出し方法や、要素のサイズや色などの情報の取得方法などです。これらの情報を正しく取得できれば、コーディングの効率や品質を向上させることができます。

この記事では、

  • Figma の基本的な操作画面の説明
  • 開発モードの使い方
  • 画像のエクスポート方法
    についてご紹介します。
    Figma で作ったデザインカンプからコーディングする方法を知りたい方は、ぜひ最後までお読みください。

Figma とは

Figma とは、オンラインで使えるデザインツールです。Web サイトやアプリのワイヤーフレームやプロトタイプを作成できます。また、Figma は複数人でリアルタイムに編集やコメントができるので、チームでのコラボレーションにも便利です。
Figma はアカウント作成が無料で、無料プランでも 3 つのプロジェクトと 2 人のエディターを使うことができます。有料プランでは、無制限のプロジェクトやエディター、高度な機能やサポートなどが利用できます。詳しくは、Figma の公式サイトをご覧ください、

Figma の操作画面説明

Figma の操作画面は、以下のようになっています。

Figmaの操作画面

  • ツールバー
    選択ツールやペンツール、テキストツールなどのツールがあります。
  • キャンバス
    デザインカンプが表示される領域です。複数のページやフレームを確認できます。
  • レイヤーパネル
    画面左側にあり、キャンバス上の要素の構成が確認できます。
  • コメントタブ
    画面右側にあり、コメントモードに切り替えたり、コメントを閲覧したりできます。
  • プロパティタブ
    画面右側にあり、選択している要素の詳細情報を確認できます。
  • エクスポートタブ
    画面右側にあり、デザインカンプで使われている画像やアイコンをダウンロードできます。

開発モードの使い方

Figma のデザインカンプからコーディングするには、開発モードを使うと便利です。
開発モードとは、デザインの要素に関する情報を表示するモードです。たとえば、テキストのフォントや色、画像のサイズや形式、要素の余白や影などの情報を確認できます。

開発者モードに切り替えるには、以下の手順を行います。

  • デザインカンプを開く
  • ログインする
  • 右上の「</>」をクリックして「インスペクト」を選択する
  • コーディングに必要な情報を取得する

以下の画像は、開発モードでテキストの情報を取得する例です。

Figmaでテキストの情報取得

  • 選択ツールでテキストをクリックすると、右側のサイドバーにテキストの情報が表示されます。
  • テキストの情報には、フォントの種類やサイズ、色、行間、字間などがあります。
  • また、テキストの内容はコピーできるので、HTML に貼り付けることができます。

画像のエクスポート方法

Figma のデザインカンプから画像を書き出すには、以下の手順を行います。

  • 選択ツールで画像をクリックする
  • 右側のサイドバーの「Export」をクリックする
  • 画像のサイズや形式を設定する
  • 「Export」をクリックして画像を書き出す

以下の画像は、画像のエクスポートの設定例です。

画像のエクスポートの設定例

  • 画像のサイズは、Web 制作では基本的に 2 倍（2x）にすると良いです。これは、Retina ディスプレイなどの高解像度の画面で画像がぼやけないようにするためです。
  • 画像の形式は、PNG、JPG、SVG、PDF の中から選べます。使い分けとしては、以下のようになります。
    • PNG
      色数が少なく、輪郭がはっきりしたロゴやイラストなど
    • JPG
      色数が多く、グラデーションのある写真やイラストなど
    • SVG
      ロゴやアイコンなど、拡大縮小しても劣化しない画像など
    • PDF
      印刷用の画像など
  • 画像は複数のサイズや形式で同時に書き出すこともできます。その場合は、＋ボタンをクリックして設定を追加します。

プロトタイプで動きを確認する方法

Figma のプロトタイプ機能は、画面の遷移や実際の動きを確認できる便利な機能です。

以下の画像は、プロトタイプの確認方法です。

プロトタイプの確認方法

  • 右上の再生ボタン(▷)をクリックして、プロトタイプのプレビュー画面を開く
  • 左のフローパネルで確認したい動きを選択する

画面をクリックすると、インタラクションが設定されている箇所がわかります。

まとめ

この記事では、Figma で作ったデザインカンプからコーディングする方法について、Figma の基本的な操作画面の説明と、開発モードの使い方、画像のエクスポート方法、プロトタイプの確認方法などを画像付きでご紹介しました。

Figma で作ったデザインカンプからコーディングするには、以下のポイントを押さえましょう。

  • 開発モードを使って、テキストや要素の情報を取得する
  • 画像は 2 倍のサイズと適切な形式で書き出す

これらのポイントを覚えておけば、Figma デザインカンプからコーディングできます。

最後に

Web 制作のスキルを身につけたいけど、どうやって学べばいいのか悩んでいませんか？そこで、そんなお悩みを解決するために Web 制作の基礎から応用まで、段階的に学べるロードマップを作りました。
未経験から始める！Web 制作独学ロードマップ

Discussion