【完全版】Figmaデザインカンプからのコーディング方法(無料デザインカンプ付き)

FigmaはWebサイト制作に使用されるデザインツールの一つです。

デザインツールとしては従来、Adobe製品のPhotoshop、Illustrator、XDなどが使用されてきましたが、Figmaには以下のような素晴らしいメリットがあり、近年多くのWeb制作者から人気を集めています。

  • 無料で使用できる
  • アプリのインストール不要で、Web上で使える
  • Webデザインに特化したツールなのでコーディングがしやすい

Figmaは2016年にリリースされた比較的新しいデザインツールなので、現在の使用人口はあまり多くありません。
現状ではXDやPhotoshopを使用している制作会社が多いですが、Figmaも徐々に主流になっていくことが予想されるので、習得しておくと仕事の幅が広がります(無料で使える上、使い方も簡単なので学んで損はありません)。

XD、Photoshopの使用方法については以下の記事でそれぞれ解説しています。コーディング初学者の方は、まずは使用人口が多いこれらのツールを優先して学習することをおすすめします。

複数のAdobeソフトを使用する場合、Adobe CCコンプリートプランに加入するとお得です。
さらに、Adobe CCコンプリートプランは、デジハリというサービス経由で契約すると3万円以上安く購入できるので、最安値で購入したい方は以下の記事をご覧ください。(既に契約済みの方でも乗り換え可能です)

この記事では、Figmaデザインカンプからコーディングを行う具体的な手順・方法を、初心者の方にもわかりやすく解説しています。
無料のデザインカンプも配布しているので、実際に手を動かしながら学習可能です。

目次

コーディング前の準備

Figmaアカウント作成

Figmaのデザイン自体はアカウントが無くても閲覧できますが、コーディングに必要なデータを取得するためにはアカウントが必要です。(無料アカウントでOK)

Figmaにアクセスし、[無料で始める]もしくは[始める]をクリックし、アカウント登録しましょう。
Googleアカウントをお持ちの方なら数秒で登録できます。

Figmaトップページの表示
出典元:Figma

言語設定を日本語に変更

デフォルトでは言語が英語に設定されていると思いますので、読みにくい場合は日本語に変更しましょう。
(※ 本記事での解説も日本語版を前提にしています)

言語を変更するには、画面右下の?マークをクリックし、[Change language]を選択します。

Figmaのヘルプメニュー

[日本語]にチェックを入れて[sava]をクリックすれば、日本語に設定変更されます。

Figmaの言語設定画面

無料のデザインカンプ配布

Figmaのデザインをお持ちでない方のために、無料のデザインカンプを配布しています。
以下URLから、ご自由にアクセスしてお使いください。
https://www.figma.com/file/q1HmEF7MPiv4EX8Bt9Lwm6/Webspe?type=design&node-id=0%3A1&mode=design&t=BXdjnXLi6uF4IESj-1

Figmaの特徴として、共同作業中のメンバー名とマウスカーソル位置がリアルタイムで可視化されます。
本名を公開したくない方は、アカウント名をニックネーム等にあらかじめ変更しておいてください。

Figmaで共同作業中のメンバーのカーソルが表示される様子
出典元:Figma

また、コメント機能を使用したコメント送信はお控えください。(万が一コメントが送信された場合は削除させていただきます)

画像の書き出し

コーディングに必要となる画像素材をデザインから書き出す方法と、その際の注意点について解説します。

画像の書き出し手順

まずは、上部のツールバーから「移動ツール」を選択します。(デフォルトで選択されていれば特に操作は必要ありません)

Figmaのツールバーから「移動ツール」を選択

移動ツールで書き出したい画像をクリックします。

Figmaの移動ツールで書き出したい画像をクリックして選択

※ この時、書き出したい画像に重なる別の要素が選択されているケースがあるので、レイヤーの重なりに注意してください。
左サイドバーでレイヤーを確認し、書き出したい要素以外が選択されている場合は、書き出す対象のレイヤーのみをクリックして選択状態にしてください。

書き出すレイヤーのみを選択状態にする

右サイドバーから「エクスポート」を選択し、[+]ボタンをクリックします。

右サイドバーから「エクスポート」を選択し、[+]ボタンをクリック

書き出す画像の倍率Suffix(ファイル名の末尾につける文字)、ファイル形式をそれぞれ設定します。
倍率は「2x」を選択し、2倍サイズで書き出すことが推奨されています(理由はこちらの記事で解説)。

書き出す画像の倍率、Suffix、ファイル形式を設定

[+]ボタンをさらにクリックすることで、同じ画像のバリエーションを追加できます。
imgタグのsrcset属性で異なるサイズの画像を出し分ける場合などに利用しましょう。

画像のバリエーションを追加した場合の表示例

最後に「エクスポート」ボタンを押すことで、画像のダウンロードが実行されます。

画像書き出しの注意点

画像を書き出す際には、以下の3つのことに注意してください。

  • 画像の装飾は含めずに書き出す
  • 適切なファイル形式で書き出す
  • テキストをSVGにする場合、アウトライン化する

注意① 画像の装飾は含めずに書き出す

画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装することを推奨します。
理由は以下の通りです。

  • JPGの場合、透明度を扱えないため、角丸やドロップシャドウを表現できない
  • ドロップシャドウを含む画像は、影の領域分だけデザイン上の画像サイズより大きくなってしまう(widthやmarginなどの計算が面倒になる)
  • 後に画像を差し替える場合に、加工した画像を用意しなくて済む

・角丸つきで書き出したJPG画像の例

JPGの場合、角丸で削られた領域が塗り潰されてしまう

・ドロップシャドウつきで書き出したPNG画像の例

ドロップシャドウの領域分だけ画像サイズが大きくなってしまった

書き出す要素のレイヤーを確認し、エフェクトが付いた要素を含めて書き出さないように注意しましょう。
(ただし、デザインによっては画像自体に直接エフェクトがついている場合もあるので、絶対ではありません)

注意② 適切なファイル形式で書き出す

ファイル形式が不適切だと、画像の見た目が劣化したり、容量が非常に重くなるなどの障害を招きます。
画像のファイル形式(拡張子)は適切なものを選択しましょう。

ファイル形式は、画像の特徴に応じて以下のように選択すると良いです。(画像フォーマットに関する詳しい解説はこちらの記事をご覧ください)

  • PNG:イラストやロゴなど、色数の少ない人工的な画像
  • JPG:写真など、色数の多い実写的な画像
  • SVG:アイコンやテキストなど、色が数色でシンプルな形状の図形
  • PDF:カンプからの書き出しでは基本的に使用しない

注意③ テキストをSVGにする場合、アウトライン化する

Figmaの場合、デフォルトでアウトライン化する設定になっているので、特に操作は必要ありません。
(テキスト要素のエクスポートでSVGを選択した場合、右側の三点リーダー[•••]をクリックし、「テキストをアウトライン化する」にチェックが入っていればOKです)

テキストをSVG形式でエクスポートする場合、「テキストをアウトライン化する」にチェックが入っていればOK

アウトライン化とは、テキストなどの文字情報を図形として変換することを指します。
SVG画像のテキストも、通常のテキストと同様の仕様で表示されるので、環境に存在しないフォントが使用されている場合は、代替フォントが適用されて見た目が変化してしまいます。
そこで、アウトライン化により文字を図形に変換することで、デバイスのフォントに依存しない、必ず同じ見た目になるSVG画像にすることができます。

Figma以外のデザインツールを使用する場合は、アウトライン化(またはシェイプ化)の操作が必要になるのでご注意ください。

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。
要素をクリックして選択状態にすると、右側の「プロパティ」タブにその要素の各情報が表示されます。

Figmaで要素をクリックした際のプロパティ表示

主に以下の要素情報を読み取ることができます。

  • 幅と高さ(width, height)
  • 回転(transform: rotate)
  • 不透明度(opacity)
  • 背景色(background-color)
  • ボーダー(border)
  • 角丸(border-radius)
  • 影(box-shadow, filter: drop-shadow)

幅と高さ(width, height)

要素の幅(width)と高さ(height)の値はそれぞれ、レイアウトの高さと記載された箇所から取得できます。

Figmaにおける幅・高さの表示箇所

記入例:

width: 70px;
height: 70px;

回転(transform: rotate)

レイアウト欄に「回転」の表示がある場合、要素の回転角度が指定されています。

Figmaにおける回転角度の表示箇所

※ Figma上の回転角度は反時計回りが正、CSSで指定する回転角度は時計回りが正であることにご注意ください。

記入例:

transform: rotate(-90deg);

不透明度(opacity)

レイアウト欄に「不透明度」の表示がある場合は、要素の不透明度が指定されています。

Figmaにおける不透明度の表示箇所

記入例:

opacity: 0.45;

背景色(background-color)

「色」と記載されたエリアに表示されており、クリックすることでカラーコードをコピーできます。

Figmaにおける色の表示箇所

記入例:

background-color: #F29D49;

「Hex」表示で以下のような%表示がある場合は、色の不透明度が指定されています。

Figmaで要素の色の不透明度が指定されている場合のHex表示

上記のような場合、「Hex」を「RGB」に切り替え、CSSにはrgba形式で記述しましょう。

Figmaで色をRGB形式に変更

記入例:

background-color: rgba(0, 0, 0, 0.45);

ボーダー(border)

「ボーダー」と記載されたエリアから、ボーダーの幅 (border-width)や色 (border-color)を取得できます。

Figmaにおけるボーダー情報の表示箇所

記入例:

border: 1px solid #2099EB;

角丸(border-radius)

レイアウト欄に「半径」の表示がある場合、角の丸み(border-radius)が指定されています。

Figmaにおける角丸の表示箇所

記入例:

border-radius: 20px;

影(box-shadow, filter: drop-shadow)

「シャドウ」と記載されたエリアから、要素の影の情報を取得できます。

Figmaにおけるシャドウの表示箇所

通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します。

記入例:

box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  /* or */
filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.4));

要素間の距離(余白)の取得

基準となる要素をクリックして選択状態にし、option ⌥ キー(Windowsの場合Altキー)を押しながら距離を測りたい対象にマウスカーソルを合わせると、2つの要素間の距離が表示されます。

margin

Figmaでmarginの値を取得する例

記入例:

margin-top: 32px;

padding

Figmaでpaddingの値を取得する例

記入例:

padding: 16px 70px;

文字情報の取得

テキスト要素をクリックして選択状態にすると、右サイドのプロパティタブに、文字情報が表示されます。
確認するのはコンテンツタイポグラフィーの3つのエリアです。

Figmaのテキスト要素をクリックした際のプロパティ表示

コンテンツの部分をクリックすることで、テキストの内容をコピーすることができます。

コンテンツのテキストをクリックすることでコピー可能

タイポグラフィーのエリアからは、テキスト関連の以下のCSSプロパティに相当するデータを取得できます。

  • font-family
  • font-size
  • font-weight
  • text-align
  • line-height
  • letter-spacing
  • color

font-family

Figmaにおけるfont-familyの表示箇所

記入例:

font-family: "Outfit", sans-serif;

font-size

Figmaにおけるfont-sizeの表示箇所

記入例:

font-size: 28px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
(上画像の例の場合、html要素のfont-sizeが16pxなら、28 / 16 = 1.75rem)

記入例:

font-size: 1.75rem;

font-weight

Figmaにおけるfont-weightの表示箇所

記入例:

font-weight: 700;
  /* or */
font-weight: bold;

text-align

タイポグラフィー欄に「配置」の表記がある場合、text-alignの指定が必要です。(デフォルトの左揃えの場合は表示されていません)

Figmaにおけるtext-alignの表示箇所

記入例:

text-align: center;

line-height

行間(行の高さ)を指定するプロパティです。

Figmaにおけるline-heightの表示箇所

XD上ではpx単位で表記されていますが、line-heightの値は倍率(行間の値 / フォントサイズ)で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

記入例:

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
「文字」と記載された部分の値を使いますが、この値をそのままCSSに記述するわけではありません。

Figmaにおけるletter-spacingの表示箇所(%表記)

letter-spacingの値は、em単位で記述することが推奨されます。
「文字」の値が%表記の場合、100で割ればem単位に変換されます。(上画像の例の場合、3 / 100 = 0.03em )

以下のように、「文字」がpx単位で表記されている場合、「文字」の値 / フォントサイズという計算でem単位に変換できます。(下画像の場合、0.48 / 16 = 0.03em)

Figmaにおけるletter-spacingの表示箇所(px表記)

記入例:

letter-spacing: 0.03em;

color

「色」と記載されたエリアに表示されており、クリックすることでカラーコードをコピーできます。

Figmaにおける色の表示箇所

記入例:

color: #F29D49;

「Hex」表示で以下のような%表示がある場合は、色の不透明度が指定されています。

Figmaで要素の色の不透明度が指定されている場合のHex表示

上記のような場合、「Hex」を「RGB」に切り替え、CSSにはrgba形式で記述しましょう。

Figmaで色をRGB形式に変更

記入例:

color: rgba(0, 0, 0, 0.45);

hoverなどの状態変化の確認

要素によっては、マウスホバー時など状態が変化した際の表示(バリアント)が定義されている場合があります。

要素を選択した際に、プロパティタブにコンポーネントプロパティと表記されている場合、バリアントが定義されています。

バリアントが定義された要素をクリック選択した際の表示例

バリアントの詳細を確認するには、要素名の右隣のマーク(下画像の赤枠部分)をクリックします。

コンポーネントの詳細を見る方法

すると、コンポーネントの大元の定義部分にジャンプします。
左サイドバーのマークのレイヤーがバリアントを表しているので、クリックすることでそれぞれの状態でのプロパティが取得できます。(下画像の例ではDefaultとhoverの2つのバリアントが定義されている)

コンポーネントのバリアントを確認する方法

Default(初期状態)のバリアントを選択すると、右サイドの「インタラクション」部分に、アニメーションに関する設定が記載されている場合もあります。

記入例:

transition-property: background-color, color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;

まとめ

Figmaデザインカンプからコーディングを行う方法について解説しました。

Photoshopなどと比較すると、まだまだ使用人口は少ないですが、どんなデザイン形式で依頼が来ても対応できるようにしておくと、受注できる仕事の幅が大幅に広がります。是非、この機会にFigmaの使い方をマスターしてみてください。

今回はFigmaについて解説しましたが、Web制作コーダーとして仕事をする上では、XD・Photoshop・Illustratorを使用するためにも、Adobe CCコンプリートプランを契約することが必須になります。
Adobe CCコンプリートプランを3万円以上安く購入する方法を以下の記事で解説しているので、是非ご覧ください。(すでに契約済みの方でも安価なプランに乗り換え可能です)

内容が良かったらSNSでシェアしていただけると嬉しいです!
目次