Figmaからコーディングする具体的な方法

Figmaからコーディングする具体的な方法

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

  • Figmaのデザインデータからどうやってコーディングするの?
  • デザインデータを利用したコーディングで気をつけるポイントは?

本記事では、こういった疑問に答えます。
制作会社さんからWEB制作(コーディング案件)を依頼された際に、デザインデータを提供されて、それを元にコーディングを行うのが一般的です。

Progateやドットインストールでは学習してないポイントなので、初めて作業する方は戸惑ってしまうと思います。
今回は、最近少しずつ増えてきてるFigmaのデザインデータ(figデータ)からコーディングを行う方法について説明します。

そもそもコーディングって何?どんな働き方や学習方法があるの?という事が気になる方は「コーディングとは?働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。

コーディングの参考記事

PhotoshopやAdobe XDのコーディングについては、以下の記事を参考にしてください。

目次

Figma(figデータ)からのコーディング方法【覚えるのは3つだけ!】

結論として、Figma(figデータ)からのコーディングで必要なスキルは下記の3つです。

  • 文字情報の取得
  • 画像の書き出し
  • 要素情報の取得

Figmaはデザインツールなので、上記以外にも数多くの機能があります。
ただ、コーディングするために必要なスキルは、この記事を見ていただければ十分です。

必要なスキルについて、1つずつ詳細を解説いたします。

文字情報の取得

コーディングに利用する文字情報は、基本的に以下の6つになります。

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • color
STEP
選択ツールの状態で対象のテキストを選択します。
figma操作画面

※要素がグループ化されている場合、ダブルクリックでテキストを選択できます。

STEP
選択後に右側にあるサイドバーの「Text」と「Fill」を確認します。
figma操作画面2
サイドバー

※[letter-spacing]と[Line-height]以外の4つの値はこの画面を見るだけで分かります。
あとはCSSに反映してあげるだけです。

STEP
color箇所をダブルクリックすると詳細画面でRGB値を確認することもできます。

デフォルトだとHex値(16進数)が表示されています。

figma操作画面3
colorの詳細画面

※[RGB]を選択することで、RGBのカラーコードも確認できます。

計算が不要な値

上記の画像から下記の4つの情報は画面を見るだけで取得することが可能です。

  • font-family→Roboto
  • font-size→24px
  • font-weight→Regular
  • color→#3C3C3C

計算が必要な値

[line-height],[letter-spacing]については、画面で取得した値から少し計算する必要があります。

line-height
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。

line-heightの確認

行送り/文字のサイズで算出(単位はなし)

line-height算出例
例:画像の場合
36/24=1.5
line-height:1.5;

letter-spacing
文字の間隔を指定するプロパティです。
AV箇所を確認します。

letter-spacingの確認

AVの数字(%)/100で算出(単位はem)

letter-spacing算出例
例:画像の場合
5/100=0.05em
letter-spacing:0.05em;

letter-spacingの値が、px単位で作られている場合があります。
その際は、単位をpxからemに変換しましょう。

なぜなら下記の違いがあります。
・px単位:固定のpx数で字間を指定
・em単位:相対的な比率でフォントサイズに応じて字間が決まる

TERU

pxからemの変換は簡単です。
フォントサイズで割ってあげるだけです。

letter-spacing算出例(px-em変換)

例:font-size:32,letter-spacing:1.92pxの場合
1.92/32=0.06em
letter-spacing:0.06em;

画像の書き出し

デザインデータからコーディングに必要な画像を書き出す方法です。
書き出す画像は主に下記の3パターンです。

  • 背景画像
  • イラスト
  • 写真

文字情報に関しては、画像として書き出さずに、なるべくコーディングで実装しましょう!
※Googleの検索エンジンが画像の文字情報を読み取れずSEO観点でよくないため

STEP
選択ツールの状態で対象のオブジェクトを選択します。
画像の書き出し操作画面
STEP
右側にあるサイドバーの「Export」で取得する画像形式と倍率を設定します。
画像の書き出し操作画面2
  • 画像形式:PNG、JPG、SVG、PDFから選択可能
  • 倍率:WEB制作であれば、基本2倍(2x)を選択

複数枚同時に書き出すこともできます。

画像の書き出し操作画面3
STEP
最後に「Export〜」ボタンを選択します。

選択したサイズと形式の画像が書き出されます。

要素情報の取得

幅や高さなど、要素に関する情報の取得方法を説明します。

具体的には以下のような情報です。

  • 要素の横幅(width),縦幅(height)
  • 要素の丸み
  • 要素の色
  • 要素の境界線
  • 要素の影(エフェクト)
  • 要素の透過
  • 要素間の幅(余白)
STEP
選択ツールの状態で対象のオブジェクトを選択します。
要素情報の取得
STEP
右側のメニューで要素に関する情報が確認できます。

要素の横幅(width),縦幅(height)

要素情報の取得2

要素の丸み

要素情報の取得3
  • border-radius:要素の丸みが「上→右→下→左」の順にpx単位で設定されています。

要素の色

「Fill」項目で要素の色設定を確認できます。

要素情報の取得4
  • background-color:要素のカラーコード(16進数)が設定されています。
  • opacity:色の透過度が設定されています。※要素全体ではなく、色の透過度

要素の境界線

「Stroke」項目で要素の境界線を確認できます。

要素情報の取得5

上記画像の場合
border:1px solid #000000

要素の影(エフェクト)

「Effects」項目で要素の効果を確認できます。

一番よくあるパターンが「Drop shadow」で要素に影をつけるパターンです。

要素情報の取得6


画像の場合、box-shadow: 2px 2px 4px #000000;とCSSに記載すると表現できます。

エフェクトには、他に下記の効果を選択できます。

  • Inner shadow:要素の内側に影をつける
  • Layer blur:画像や要素をぼかす
  • Background blur:レイヤーの背面にある要素を透過越しにぼかす

要素の透過

「Layer」項目で要素の透過度を設定できます。

要素情報の取得7

透過度を60%にした場合

要素情報の取得8

要素の余白

要素を選択した状態でを[option]キーを押しながら他のオブジェクトにホバーすると、画面上に余白の値がピンク文字で表示してされます。
※Windowsの場合、[Alt]キーを押しながら

【おまけ】Figma(figデータ)からのコーディング方法〜便利な小技

CSS情報の一括確認

Figmaでは、各オブジェクト毎にCSS情報(要素情報や文字情報)を一括で確認する事ができます。

対象オブジェクトを選択した状態で、画面右上の「Inspect」を選択します。

CSS情報の一括確認

画面右下に選択したオブジェクトのCSS情報が表示されます。

注意点

ここのCSS情報はあくまで参考レベルでの確認にしてください。

なぜなら、下記のような一部改善しないといけない点があるからです。

  • オブジェクトの位置情報が「position:absolute」で一番上から計算されている
  • 「line-height」の値がpx表示になっている

デザイン共有機能

Figmaには、デザインデータを共有する機能があります。

共有されたデザインデータは、複数人で同時に確認することができ、編集やコメントをつけることができます。
コーディングの仕様(アニメーションやホバーの動作など)について制作会社さんやデザイナーさんとのコミュニケーションも取りやすくなるので、利用してみるのがオススメです。

参照機能の共有

デザインの参照機能を共有する方法になります。

STEP
画面右上にある「Share」を選択します。
デザイン共有
STEP
ポップアップ画面から「Copy link」を選択し、URLを共有します。
デザイン共有2
共有リンクの取得

URLにアクセスすると誰でもデザインをブラウザ上で確認することができます。

コメント機能

共有されたデーターに、コメントを追加することが可能です。

TERU

参照機能のみでもコメントはつけれます

STEP
画面左上のコメントマークを選択します。
コメント機能
STEP
コメントをつけたい要素を選択します。

コメント機能が有効の場合、マウスカーソルがコメントマークになっています。

STEP
コメント入力画面が表示されるので、コメントを入力します。
コメント機能2
コメント機能3

コメントを入力して「post」を選択すると共有されている全員にコメントが表示されます。

編集機能の共有

参照機能を共有しているユーザーに編集権限を付与する方法になります。

STEP
画面右上にある「Share」を選択します。
編集機能の共有
STEP
対象ユーザーの右側にある「can view」を選択します。
編集機能の共有2
STEP
「can edit」に変更すれば、完了です。
編集機能の共有3

注意点

無料プランの場合、編集機能を共有できる人数に制限があります。

TERU

僕が試した時は、自分以外の2名まで編集権限を与えれました

最新情報は公式サイトを確認してください。

Zeplinとの連携

デザインの補足ツールである「Zeplin」と連携することでコーディングで使用するデザインデータの確認が効率良くできるようになります。

詳しい連携の手順は下記の記事にまとめています。

まとめ

今回はFigma(figデータ)からのコーディングで必要な作業について説明しました。
操作に関しては、Adobe XDに似ています。

Adobe XDと同様アップデートにより、どんどん機能が追加されて便利になっているので、この機会に操作を覚えておくのがオススメです。

これから案件作業をやってみようという方の参考になれば嬉しいです。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次