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

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

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

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

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

コーディング前の準備

Figmaアカウント作成

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

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

言語設定を日本語に変更

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

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

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

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

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

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

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

画像の書き出し

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

画像の書き出し手順

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

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

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

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

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

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

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

画像書き出しの注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

要素情報の取得

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

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

幅と高さ（width, height）

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

width: 70px;
height: 70px;

回転（transform: rotate）

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

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

transform: rotate(-90deg);

不透明度（opacity）

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

opacity: 0.45;

背景色（background-color）

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

background-color: #F29D49;

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

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

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

ボーダー（border）

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

border: 1px solid #2099EB;

角丸（border-radius）

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

border-radius: 20px;

影（box-shadow, filter: drop-shadow）

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

通常は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キー）を押しながら距離を測りたい対象にマウスカーソルを合わせると、２つの要素間の距離が表示されます。

margin

margin-top: 32px;

padding

padding: 16px 70px;

文字情報の取得

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

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

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

font-family

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

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

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

text-align

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

text-align: center;

line-height

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

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

line-height: 2;

letter-spacing

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

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

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

letter-spacing: 0.03em;

color

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

color: #F29D49;

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

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

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コンプリートプランを4万円以上安く購入する方法を以下の記事で解説しているので、是非ご覧ください。（すでに契約済みの方でも安価なプランに乗り換え可能です）

あわせて読みたい

Adobe CCコンプリートプランを安く購入する方法【Web制作に必須】