【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値やアニメーション情報の取得法まで

• WEB制作
• HTML
• CSS

CSSショートハンドのチートシート

• 389
• 93475

CSSセレクタのチートシート｜37パターンを一覧で解説

• 3149
• 530629

IT・web用語の読み方わかるくん

• 0
• 323909

【2022年】人気ブラウザ11つを厳選！ランキング形式でご紹介

• #WEB制作

• 21
• 417500

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

• #CSS

• 27
• 14053

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

• #CSS

• 23
• 12671

• 55
• Twitter
• Facebook
• Copy URL
• hatena

AdobeがFigmaを買収したことにより、今までWebデザインといえば「XD」と「Figma」で分かれていた層がFigmaに一気に傾いていくことが予想されます！

「デザインデータFigmaなんですけど大丈夫ですか？」と言われた時に困らないようにコーディング化する手順を詳しく解説していきます。

まず、解説するにあたり日本語化されているデータで解説していくので以下の設定から日本語に変換してください。

Help and account > Account setting

続けて

languages > Change languagesから日本語を選択すればOKです👍

変換したら自動更新されるので完了したら今後ずっと日本語化された状態で使用することができます。

Figmaにはデザインデータを編集できる「編集権限」と「閲覧権限」の２種類があります。

Figmaの課金の仕組みは編集者 * 〇$となっているため、開発者は閲覧権限だけを付与されることが多いのです。

当然、デザインデータを誤って編集してしまうリスクもありますからね。

【結論】ほとんどの値はCSS表示をコピペでOK

先に結論ですが、ほとんどの値は「コード」に表示されるCSSをコピペして編集することで対応可能です。

ここに生成されるCSSは非常に優秀で、オートレイアウトされたものはdisplay: flexのコードも生成されます。

注意するポイントは以下の２つです。

• line-heightは単位が%になっているので単位なしへ変換が必要
• marginやpaddingの余白は表示されない

これ以外はほぼコピペでも問題ないレベルです。

プレビュー機能

Figmaにはプレビュー機能があり、カンプデータの右上にプレビューボタンから起動することができます。ディレクターやクライアントへのデザインチェックもプレビューのリンクを共有しています。

上記のサンプルでも分かる通り、固定のヘッダーやホバーアニメーションなどはプレビューしないと認識することができません。

アセットカラー・配色

主要な配色はカスタムプロパティやSCSSを用いて変数化しますよね。

デザインに使用されている色のアセットはデザインデータを開いた時のサイドバー「色スタイル」に表示されます。

フォント関連

フォントに関する各種情報は要素を選択後にサイドバーの「タイポグラフィー」から確認することができます。

行間（px） ÷ フォントサイズ（px）= 設定する値

行間が30px、文字サイズが20pxであれば、30px / 20px = 1.5 = line-height: 1.5となります。

字間（px） ÷ フォントサイズ（px）= 設定する値（em）

字間が16px、文字サイズが80pxであれば、16px / 80px = 0.2 = letter-spacing: 0.2emとなります。

フォントの色はCSSのコード箇所で確認することができます。

Figmaではテキストのコピーも簡単にできます。要素を選択すると「コンテンツ」という箇所にコピペできるテキストの全文が表示されます。ボタン一つでコピー可能です。

背景色・線（ボーダー）

background-colorやborder-colorに使用するカラーコードは「色」「ボーダー」に表示されます。

opacityがかかっている場合、カラーコードの隣に80%というパーセント表記が表示されます。

この場合、Hex→RGBに変換してからコピーするとrgba()関数で実装することができます。

幅・高さ・位置・丸み

width、height、top、right、left、bottom、border-radiusの取得についてです。

要素を選択するとサイドバーの「プロパティ」に表示されます。（半径がborder-radius）

注意点としてはtopやleftなどの位置はデザイン作成の段階でレイヤーを整理しオートレイアウトをかけていないと基準点が思わぬところに設定されてしまい、CSSでの実装を想定した数値の表示がされません。

後述する「余白・要素の距離」の方法で位置を取得するのがベターでしょう。

余白・要素の距離

paddingとmarginなどの余白・要素の距離に関しては個別に操作しながら取得する必要があります。

手順はシンプルです。

1. 要素を選択
2. 別の要素をホバーするとそこまでの距離がpxで表示される

marginや相対位置を知りたい場合はこれでOKですが、paddingの余白を明確に知りたい時は「プロパティ」をチェックしましょう。

Figmaの良いところはpaddingで余白を取るべきか、横幅や高さを固定で作るべきかを判断しやすい点です。

例えば上記のボタンであればパディングは16px 0px 16px 0pxとなっているので、このように横幅はpaddingでつくらず、widthで固定して作るべきと判断がしやすいですよね。

画像の書き出し・エクスポート

画像の書き出しは「エクスポート」タブから行います。1x（等倍）となっている部分を変更すると0.5x（1/2倍） 〜4x（4倍）までサイズを変更した画像を書き出すことができます。

デバイスピクセル比の異なる高解像度ブラウザ用に画像を複数種類用意する必要がある場合は右上の「＋」ボタンをクリックします。

エクスポートすると、サフィックス（画像名の後ろにつける文字列）がついた画像が書き出されます。

コーディングするにあたっての適切な画像形式の判断は以下の記事を参考ください。

【ブクマ必須】WEBサイトの画像の拡張子をフローチャートと逆引き辞典で自信を持って選べるように！【もう迷いません】

エフェクト

主にbox-shadowの取得です。

要素を選択するとサイドバーに「シャドウ」が表示されます。ここからコピペするとbox-shadowとしてコピーされますが、CSSのコードではfilter: drop-shadowで生成されます。

塗りのある箇所にだけ影を適用するデザインの場合はfilter: drop-shadowを採用します。

その他のエフェクトとしてぼかし・背景のぼかしであるblurもCSSのコードに生成されます。

アニメーション

以下のような実装・アニメーションはプレビューで確認します。

1. スクロール時に固定する要素
2. はみ出た要素のスクロール（overflow: scroll）
3. クリック・ホバーアクション（animation・transition）

❶と❷に関してはプレビューで確認でOKですが、クリックやホバーのアニメーションはさらに細かく確認する必要があります。

以下はメニューアイコンをクリックするとメニューが開くデザインを確認する場合の例です。

プレビューを閲覧状態で画面をクリックするとアニメーションが設定されている要素が水色に点滅します。

もしプレビューを確認してもなにも反応がない場合はデザイナーへアニメーションのイメージを確認する必要があります。

アニメーションが設定されているトリガー要素を選択するとインタラクションに情報が表示されます。

コピーしてエディタに貼り付けるとCSSを取得することができます。

コメント

デザインデータについて質問がある場合は「コメント」を使うことでスムーズにコミュニケーションを取ることができます。

「コメント」タブを選択して任意の箇所にコメントを残すことができます。

@でメンション（宛先の指定）ができ、コメントを残すとオーナーと対象者に対して通知がいくようになっています。

運用のルールを整理すれば非常に有効活用できる機能です。

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

• 196
• 278203

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

• 182
• 660541

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

• 163
• 406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

• 154
• 382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

• 132
• 925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

• 48
• 1009747

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

• 132
• 925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

• 182
• 660541

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

• 129
• 608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

• 80
• 548591

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

• 41
• 11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

• 55
• 81981

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

• 131
• 56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

• 23
• 12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

• 27
• 14053

＼pick up articles／

【保存版】HTMLの表示がうまくいかない・CSSが効かない時に注意したい...

• #HTML

• 14
• 41807

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

• #HTML

• 129
• 608228

【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

• #HTML

• 27
• 123185

HTMLの< a href="tel:" >でリンクをタップして電話を発...

• #HTML

• 54
• 417047

CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

• #CSS

• 17
• 90949

【ノンプログラマー必見】Conoha WingでWEBサイトを公開するま...

• #CSS

• 24
• 17194

ホームページ制作の相談が完全無料！？プロが5,000社から最適な1社を選...

• #WEB制作

• 0
• 22227

【2022年】日本と世界でのブラウザシェアをデスクトップ・スマホ別に紹介

• #WEB制作

• 5
• 6624

HTML5のコメントアウトの使い方と実務での使用例を３つ紹介

• #HTML

• 16
• 30739

【保存版】Perfect Pixelを使ってピクセルパーフェクトを実現す...

• #CSS

• 84
• 62737

あなたはいくつ知ってる？CSSのセレクタ40個を総まとめ【チートシート付...

• #CSS

• 21
• 87242

【完全ガイド版】Google Chromeのダウンロード方法と使い方

• #WEB制作

• 9
• 44285

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック！

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

• 196
• 278203

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

• 182
• 660541

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

• 163
• 406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

• 154
• 382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

• 132
• 925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

• 48
• 1009747

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

• 132
• 925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

• 182
• 660541

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

• 129
• 608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

• 80
• 548591

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

• 41
• 11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

• 55
• 81981

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

• 131
• 56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

• 23
• 12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

• 27
• 14053