Figmaからコーディングする方法を丁寧に解説！

実務でコーディングをする際は、Figmaなどのデザインツールで作ったデザインをもらうことがほとんどです。

画像を書き出す
カラーやフォントを調べる
余白などのサイズを測る

例えば、上の作業は基本的にコーダーが行います。

この記事ではFigmaで作った簡単なデザインを、実際の仕事と同じようにコーディングします。

XDからコーディングする方法は、下記の記事で紹介しています。

Adobe XDからコーディングする方法を丁寧に解説！ピクセルパーフェクトする方法も紹介！

XDを使用するには、Adobeの契約が必要です。現在はXD単体で契約することができません。XDを使うには、コンプリートプラン(6480円/月)の契約が必要です。

ただし、デジハリのAdobeマスター講座(39,980円)を受講すると、1年間無料でコンプリートプランを使用できます。実質、半額程度でコンプリートプランが使用できます。

下記のサイトが詳しく解説しているので、興味がある方は見てみてください。

既に契約してる方：約4万円お得！デジハリ版Adobe CCに乗り換えて、安く利用する方法
新規で契約する方：デジハリ経由でAdobe CCコンプリートプランを安く購入する方法

🚀 記事構成

【基礎編】Figmaの基本的な操作方法を紹介
【実践編】実際にコーディングしてみる

この記事は、基礎編と実践編の2部構成にしています。基礎編では実践編で使うFigmaの機能に絞って紹介します。

デザインデータとコードはダウンロード出来るようにしたので、ぜひ一緒に手を動かしてみてください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

独学に限界を感じている...
何をどこまで勉強すれば良いかわからない...
自分の書き方が正しいかわからない...
検索しても解決しない問題が多い...
転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

デザインデータのダウンロード

今回はこのようなカード型のレイアウトを作ります。

記事の目的は、Figmaから情報を調べて、コーディングすることなので、HTML・CSS の詳細な解説はしません。

コードダウンロード

Figmaのデザイン

【基礎編】オブジェクトの選択方法

Figmaは画像やテキストなどのオブジェクトをグループ化することが出来ます。グループ化すると、画像の赤枠のように階層(レイヤー)化されます。

重なり合うレイヤーをクリックすると、1 回のクリックでは1番上のレイヤーが選択されます。ダブルクリックするとその下のレイヤー、そこでまたダブルクリックするとその下のレイヤー...といった具合に選択出来ます。

レイヤーが多いと、目的のオブジェクトへ辿り着くまでに、何度もダブルクリックする必要がありますが、ショートカットキーを使うと1回のクリックで選択できます。

PC	ショートカットキー
Mac	⌘を押しながらクリック
Windows	Ctrlを押しながらクリック

Figmaには他にもたくさんのショートカットキーがあります。Figmaの画面の右下にある？マークをクリック→『キーボードショートカット』をクリックすると、ショートカット一覧が表示されます。

【基礎編】画像の書き出し方法

画像の書き出し方法は2つあります。

1枚ずつ書き出す方法
書き出す画像を全て選択して一気に書き出す方法

一気に書き出してコーディングを進め、書き出し忘れや漏れがあれば、その都度追加で書き出すと良いです。

1 枚ずつ書き出す方法

書き出したい画像を選択し、赤枠のエクスポートから書き出しができます。

画像名はデフォルトでレイヤー名が入ります。今回のデザインはレイヤーの整理をしていますが、デザイナーによっては整理しない方もいます。

書き出しフォーマットは、『PNG / JPG / SVG / PDF』に対応しています。

サイズも『1x / 2x / ...』など、いくつか選択肢が用意されています。自分で入力することも可能です。

書き出す画像を複数選択して一気に書き出す方法

『1枚ずつ書き出す方法』と同じ方法で書き出したい画像を選択し、全部選択し終わったら、下記のショートカットを押すと赤枠のリストが出てきます。

PC	ショートカットキー
Mac	⌘+Shift+E
Windows	Ctrl+Shift+E

画像書き出し時に考えること

デバイス	画像の横幅
SP	324px
PC	300px

今回のデザインはサムネイル画像の横幅が上のようになっています。デザインはありませんが、画面幅500pxを境に500~767pxでは2カラムにします。

この場合、画像が1番大きく表示されるのは2カラムに切り替わる直前(画面幅499px)です。画面幅499pxで見ている場合、画像の横幅は449px(キリよく450pxとします)になります。

昨今のデバイスを考えると、450 × 3 = 1350pxの画像まで用意すれば、多くの高解像度ディスプレイにも対応できます。

450px
450 × 2 = 900px
450 × 3 = 1350px

画像の最適化をちゃんとやる場合、上記の3パターンくらいを用意して、srcset属性を使って最適な画像を出し分けることになります。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

今回は練習なので、画像の最適化はやりません。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

何をどこまで勉強すれば良いかわからない...
自分の書き方が正しいかわからない...
検索しても解決しない問題が多い...
転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターは全員現役エンジニア 👆

【基礎編】オブジェクトの距離を測る方法

2つのオブジェクトの距離を測る方法は、1つをクリックした状態で、Macはoptionキーを押しながら、WindowsはAltキー押しながら、もう1つのオブジェクトの上にカーソルを移動させます。

【基礎編】テキスト情報を調べる方法

テキストを選択すると、赤枠の箇所でテキスト情報を見ることが出来ます。

各項目とCSSのプロパティの対応は上の図のようになっています。line-heightとletter-spacingの計算だけ少し注意が必要です。

line-heightの計算

line-height = ④ の値 / ② の値

ex )
35 / 20 = 1.75

letter-spacingの計算

letter-spacing = ⑤ の値 / 100

ex )
20% / 100 = 0.2em

【実践編】実際にコーディングしよう！

基礎編でやったことを使って、実際にコーディングしてみます。

Step0：画像を書き出そう

基礎編で紹介した方法で一気に書き出します。

Step1：HTMLを書こう

👇 headタグ内

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>XDからコーディング練習</title>
    <meta name="description" content="XDからコーディング練習です。" />

    <!-- font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

    <!-- css -->
    <link rel="stylesheet" href="css/style.css" />
</head>

👇 bodyタグ内

<body>
    <div class="top">
        <div class="container">
            <div class="post">
                <article class="post-item">
                    <a href="#" class="post-thumbnail">
                        <img src="img/thumbnail01@2x.jpg" width="648" height="324" alt="デザインからコーディングする方法を丁寧に解説！" />
                    </a>

                    <div class="post-meta">
                        <span class="post-category">プログラミング</span>
                        <time datetime="2020-12-20" class="post-date">2020/12/20</time>
                    </div>

                    <h2 class="post-title">
                        <a href="#">デザインからコーディングする方法を丁寧に解説！</a>
                    </h2>
                </article>

                ...
                <!-- posts-itemが5個続く -->
            </div>
        </div>
    </div>
</body>

まずHTMLを全て書いてしまいます。この時点でclassもつけてしまうと良いです。

フォントは、Google FontsのNoto Sans JPを使っています。Google Fontsの使い方とheadタグの書き方は、下記の記事を参考にしてください。

webフォントの基礎と使い方を解説！Google Fontsの導入方法も紹介！【2024年版】HTMLのheadタグの書き方を全て解説！

Step2：リセットCSSとベーススタイルを書こう

/*!
reset
------------------------------
*/
html {
    color: #000;
    background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: "";
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    *font-size: 100%;
}

legend {
    color: #000;
}

main {
    display: block;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

/*!
base
------------------------------
*/
body {
    line-height: 1.8;
    font-size: 14px;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

リセットCSSと全てのスタイルに共通で効かせたいベースのスタイルです。

今回は独自のリセットCSSを使っていますが、ハード系のリセットCSSをを使えば、おおよそ同じ見た目になると思います。

Step3：コンテナの距離やサイズを測ろう

SPのコンテンツは324pxに収まる
PCのコンテンツは960pxに収まる
SPもPCも.postの上下に80pxの余白

Figmaで距離を測ると、今回のデザインは上のようになっていることがわかります。ただし、これだけではタブレットなど中間のサイズでどうすれば良いのかわかりません。

例えば、SPデザインは360pxのアートボードで作っているので、324pxの解釈は少なくとも2パターン考えられます。

360pxの90%で324px
左右の余白が18px

何を想定しているのかは、デザイナーに確認しましょう。

今回は、横幅90%に収まり、maxの幅は960pxということにします。

.top {
    padding: 80px 0;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
}

それらを踏まえると上のコードが必要になります。

Step4：カード型レイアウトを作ろう

各カードの間の余白を測ると、30pxだとわかります。

500px以上で2カラム、768px以上では3カラムにします。

.post {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

@media screen and (min-width: 500px) {
    .post {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .post {
        grid-template-columns: repeat(3, 1fr);
    }
}

今回はgridを使っています。

Step5：カテゴリラベルと更新日を作ろう

カテゴリラベル
更新日
カテゴリラベルと更新日を横並び

これらを作ります。

カテゴリラベルの情報を調べる

背景色は#6cbbff
文字色は#fff
フォントの太さはbold
内側の余白(padding)は上下に6px左右に16px
フォントサイズは12px
角は丸める
行送り(line-height)は1
行間(letter-spacing)は0

これらの情報がわかりました。

.post-category {
    background-color: #6cbbff;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 100vh;
}

コードはこのようになります。border-radiusは、フォントサイズやpaddingが変更されても良いように100vhにしてあります。

bodyに書いてあって継承するもの
デフォルト値

これらは書く必要がありません。例えば、letter-spacingはデフォルトで0なので書いていません。

更新日の情報を調べる

文字色は#999
フォントサイズは 12px
行送り(line-height)は1
行間(letter-spacing)は0

カテゴリラベルと同じように、更新日の情報も調べます。

.post-date {
    color: #999;
    line-height: 1;
    font-size: 12px;
}

コードはこのようになります。

カテゴリラベルと更新日を横並び

最後にカテゴリラベルと更新日をFlexboxを使って横並びにします。

.post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

余白の16pxの測り方は既に説明した通りです。

Step6：タイトルを作ろう

文字色は#333
フォントの太さはbold
フォントサイズは20px
上の余白は8px
行送り(line-height)は1.75
行間(letter-spacing)は0

これらの情報がわかりました。

.post-title {
    margin-top: 16px;
    font-weight: bold;
    font-size: 20px;
}

コードはこのようになります。

独学に限界を感じていませんか？

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

独学に限界を感じている...
何をどこまで勉強すれば良いかわからない...
自分の書き方が正しいかわからない...
検索しても解決しない問題が多い...
転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません！)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！

当メディア運営メンバーでメンターやってます！👉

詳しく見る

Figmaからコーディングする方法を丁寧に解説！

デザインデータのダウンロード

【基礎編】オブジェクトの選択方法

【基礎編】画像の書き出し方法

1 枚ずつ書き出す方法

書き出す画像を複数選択して一気に書き出す方法

画像書き出し時に考えること

【基礎編】オブジェクトの距離を測る方法

【基礎編】テキスト情報を調べる方法

【実践編】実際にコーディングしよう！

Step0：画像を書き出そう

Step1：HTMLを書こう

Step2：リセットCSSとベーススタイルを書こう

Step3：コンテナの距離やサイズを測ろう

Step4：カード型レイアウトを作ろう

Step5：カテゴリラベルと更新日を作ろう

カテゴリラベルの情報を調べる

更新日の情報を調べる

カテゴリラベルと更新日を横並び

Step6：タイトルを作ろう

おすすめ書籍と動画紹介

独学に限界を感じていませんか？

この記事を書いた人