コーディング Web制作

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

【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
デザインカンプがFigmaだったけど、どうやってコーディングしていくの?

コーディングに必要なデザインカンプは主に4種類あります。

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

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

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

Illustratorの場合はこちら

Photoshopの場合はこちら

XDの場合はこちら

効率よくコーディングしたい人はこちら

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

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

  1. 画像を書き出す
  2. 各数値を取得しながらコーディング

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

 

画像を書き出す

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

手順は以下になります。

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

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

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

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

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

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

2倍は2xとなります。

 

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

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

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

 

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

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

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

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

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

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

 

各数値を取得しながらコーディング

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

 

テキストをコピー

テキストのコピーは4種類のデザインカンプの中で一番簡単です。

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

  1. テキストをクリック
  2. Inspectを選択
  3. Contentに表示されているテキストをクリック

Contentに表示されているテキストをクリックするだけでコピーは完了です。

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

 

フォントの情報を取得

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

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

情報を取得したいテキストをクリックすると、右側の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-heightは24pxとfont-sizeの16pxを使って計算します。

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タブに情報が表示されます。

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

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

  • 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;)という感じで表示されています。

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

background: linear-gradient(180deg#FFEFF8 0%#F8CAE5 100%);

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

 

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

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

box-shadow: 0px 2px 2px rgba(0000.25);

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

 

border-radius(角丸)

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

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

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

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

 

border(線)

線はStorkeで確認出来ます。

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

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

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

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

 

transform: rotate( );(角度)

以下の例では-1が角度になります

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

 

opacity(透明度)

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

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

background-color: rgba(2551171170.7);

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

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

 

余白を取得

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

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

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

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

 

コメント機能

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

以上になります。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作
-,