Web制作

【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

※ 当サイトではアフィリエイト広告を利用しています

デザインカンプがFigmaだったけど、どうやってコーディングしていくの?

コーディングはクライアントの制作会社などからデザインカンプを貰い、そこから、

  • 画像の書き出し
  • 要素の長さ・余白を取得
  • カラーコードを取得
  • アニメーションなどの指示を確認
  • テキストをコピー

という感じで各種数値などを取得してコーディングしていきます。

要するにコーディングの設計図みたいなものですね。

そしてデザインカンプは主に4種類あります。

  1. Adobe Illustrator
  2. Adobe Photoshop
  3. Figma
  4. Adobe XD

稀にPowerPointやPDFやExcelの場合もありますが、それは例外なので除外します。

そこで今回はFigmaでのコーディングの進め方について解説していきます。

その他の場合は以下の記事を参照下さい。

あわせて読みたい
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

この記事がおすすめな人

  • Figmaのデザインカンプからコーディングするのが初めて
  • Figmaのデザインカンプの見方を画像を使って教えて欲しい

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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

Figmaでのコーディングの進め方は以下のようになります。

  1. 画像を書き出す → 画像
  2. 文字情報を取得 → テキスト
  3. 要素情報を取得 → 要素の各数値

それでは順番に解説していきます。



画像を書き出す

コーディングを始める前に画像を書き出しましょう。

手順は以下になります。

  1. 移動ツールを選択(デフォルトで選択されていればそのままでOK)
  2. 書き出したい画像をクリック
  3. Exportを選択
  4. +をクリック
  5. 画像サイズを2x(2倍)にする
  6. ファイル形式を選択(PNG、JPG、SVG、PDF)
  7. Previewで書き出される画像を確認
  8. Exportで画像を書き出す

 

Figma:画像書き出し

Figma:画像書き出し

ファイル形式に関しては『PNG、JPG、SVG、PDF』の中から選択します。

使い分けとしては以下のような感じになります。

  • PNG → 透過された画像(角が丸いなど)
  • JPG → 正方形や長方形など、角が丸くない画像
  • SVG → ロゴやアイコンなど(拡大縮小しても劣化しない)

また、Figmaに限らずデザインカンプから画像を書き出す時は、サイズを2倍にして書き出すようにしましょう。

理由はRetinaディスプレイでは1倍だとぼやけてしまい、綺麗に表示させるには2倍で書き出す必要があるからです。

2倍は『2x』となります。

 

画像は複数のサイズやファイル形式同時に書き出せる

+ボタンをクリックする度に書き出せる画像を増やす事が可能で、サイズやファイル形式を変えて複数同時に書き出せます。

Figma:画像書き出し(Export)

Figma:画像書き出し(Export)

この場合はzipファイルでまとめて書き出されます。

 

レイヤーが重なっている場合

先ほどの画像は角が丸くなっていますが、プレビューを見ると角が丸くなっていません。

この場合はborder-radiusで角を丸くすればいいと思いますが、デザインのまま書き出したい場合もあると思います。

その場合はファイル形式の右にある『・・・』をクリックして表示される以下のチェックを外して書き出せばOKです。

Figma:画像書き出し(デザインのまま書き出す場合)

Figma:画像書き出し(デザインのまま書き出す場合)

先ほどと違いプレビューの角が丸くなっているのが分かります。

この操作が必要になるのはデザインの書き方によるかも知れないので、一応覚えておきましょう。



文字や要素の情報など各数値を取得しながらコーディング

ここからいよいよコーディングとなります。

 

文字をコピー

文字のコピーは4種類のデザインカンプの中で一番簡単です。

移動ツールで以下の操作をするだけです。

  1. 文字をクリック
  2. 『Inspect』を選択
  3. 『Content』に表示されている文字をクリック
Figma:文字をコピー

Figma:文字をコピー

『Content』に表示されている文字をクリックするだけでコピーは完了です。

あとはMacなら⌘+C、WindowsならCtrl+Cでコピーして、テキストエディタに貼り付けましょう。

 

フォントの情報を取得

先ほどは文字をHTMLに貼り付けるだけだったので、今度はフォントの情報を取得してCSSに書いていきます。

これも4種類のデザインカンプの中で一番簡単です。

情報を取得したい文字をクリックすると、右側のInspectタブに情報が表示されます。

Figma:Inspectタブでフォント情報取得

Figma:Inspectタブでフォント情報取得

赤枠の上と下にフォントの情報が表示されています。

ここで確認出来るフォントの項目はこちらです。

  • font-family(種類)
  • font-style(スタイル)
  • font-weight(太さ)
  • font-size(大きさ)
  • line-height(行間)
  • letter-spacing(字間)
  • color(色)

基本的には下の赤枠をコピペすれば大丈夫ですが、line-heightだけはちょっと変える必要があります。

それでは順番に見ていきます。

 

font-family(種類)

今回の例では『Noto Sans CJK JP』がfont-familyになります。

 

font-style(スタイル)

今回の例では『normal』がfont-styleになります。

初期値が font-style: normal; なので、今回の場合は書かなくてもOKです。

 

font-weight(太さ)

今回の例では『400』がfont-weightになります。

font-weight: 400; は初期値である font-weight: normal; と同じなので、今回の場合は書かなくてもOKです。

 

font-size(大きさ)

今回の例では『16px』がfont-sizeになります。

 

line-height(行間)

line-height24pxfont-size16pxを使って計算します。

24 ÷ 16 = 1.5

となるので、line-height: 1.5; となります。

 

letter-spacing(字間)

今回の例では『100』がletter-spacingに関する値となります。

ただしletter-spacing: 100;ではなく、

100 ÷ 1000 = 0.1

となり、単位はemにするのでletter-spacing: 0.1em;となります。

 

color(色)

カラーコードは#333333なので、color: 333;となります(アルファベットや数字が全部同じなら3つでOKです)

 

要素の情報を取得

これもフォントと同様に情報を取得したい要素をクリックすると、右側のInspectタブに情報が表示されます。

Figma:Inspectタブで色情報取得

Figma:Inspectタブで色情報取得

基本的には下の方の赤枠を参考にすれば大丈夫ですが、上の方にも同じように数値が表示されています。

確認する項目はこちらです。

  • width(幅)
  • height(高さ)
  • background-color(背景色)またはグラデーション
  • box-shadow(ドロップシャドウ)
  • border-radius(角丸)
  • border(線)
  • transform: rotate( );(角度)
  • opacity(透明度)

それでは順番に見ていきます。

 

width(幅)

今回の例では『320px』がwidthになります。

 

height(高さ)

今回の例では『56px』がheightになります。

 

background-color(背景色)またはグラデーション

背景色は単色であればbackground#FFFFFF;background-color#fff;)という感じで表示されています。

今回の場合はグラデーションなので、

backgroundlinear-gradient(180deg#FFEFF8 0%#F8CAE5 100%);

と書いてあるので、これをコピペすればOKです(Adobeと違ってすごい簡単)

 

box-shadow(ドロップシャドウ)

ドロップシャドウは以下をコピペすればOKです。

box-shadow0px 2px 2px rgba(0000.25);

これもAdobeと違ってコピペで済むので楽ですね。

 

border-radius(角丸)

これは数値が大きいほど角が丸くなっていきます。

今回の例ではborder-radius: 40px; となります(これもコピペでOKです)

今回は4ヶ所全て40pxですが、バラバラの可能性もあります。

例えば以下のような場合は、border-radius: 8px 3px 30px 18px;となります。

Figma:border-radiusの確認

Figma:border-radiusの確認

 

border(線)

線は『Storke』で確認出来ます。

Figma:Strokeで線の確認

Figma:Strokeで線の確認

この場合は、border: 1px solid #CECECE; となります。

もし上記の100%が70%など透過している場合は、

border: 1px solid rgba(206, 206, 206, 0.7);

となります(カラーコードは16進数からRBGにする)

 

transform: rotate( );(角度)

以下の例では『-10°』が角度になります

Figma:角度の確認

Figma:角度の確認

これが『-10°』の場合は、transform: rotate(10deg); となります(photoshopとXDだと-10deg)

 

opacity(透明度)

これはこちらの70%が透明度になります。

Figma:透明度(opacity)の確認

Figma:透明度(opacity)の確認

もし70%であればopacity: 0.7; となりますが、この例ではopacityだと文字なども透過してしまうので、

background-colorrgba(2551171170.7);

という風にrgbaで書きます(カラーコードは16進数ではなくRGB)

文字などがなく、全体を透過しても大丈夫な場合は opacity: 0.7; で大丈夫です。

 

余白を取得

Figmaは余白の確認も簡単です。

この場合、左の要素をクリックして、右の要素にカーソルを乗せるだけで余白が表示されます(この場合は60px)

Figma:余白の確認

Figma:余白の確認

XDも似たような感じですが、Figmaは特にキーも押さなくてもいいのでXDより簡単です(編集権限が与えられている場合はXD同様Macならoptionキー、WindowsならAltキーを押しながら操作)

例えば文字をクリックしてカード内にカーソルを乗せればこのようになります。

Figma:余白の確認

Figma:余白の確認



コメント機能

Figmaにはコメント機能があり、左上の吹き出しアイコンに赤ポチが付いていたらコメントが付いているので、忘れずに確認しましょう(吹き出しをクリックしなくてもデザイン上に表示されているので分かると思いますが)

Figma:コメント機能

Figma:コメント機能

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作
-