模写修行メディア

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

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

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

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

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

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

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

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

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

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


🚀 記事構成

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

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

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


👇 メンターやってます 👇

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

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

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

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

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

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

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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

作るデザインのスクリーンショット

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

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

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

書き出したい画像をクリックしているスクリーンショット

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

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

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

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

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

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

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

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

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

1 枚ずつ書き出す方法

書き出したい画像をクリックしているスクリーンショット

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

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

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

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

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

書き出したい画像を選択しているスクリーンショット

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

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

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

デバイス画像の横幅
SP324px
PC300px

今回のデザインはサムネイル画像の横幅が上のようになっています。デザインはありませんが、画面幅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-heightletter-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;
}

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

おすすめ書籍と動画紹介

この記事で紹介したFigmaの機能は、今回作るページに必要なもののみです。

実際はまだ多くの機能があります。デザイナーでなければ、それらを完璧に使いこなせる必要はありません。しかし、ある程度どんなことが出来るのかは知っておくと良いです。

最後におすすめの書籍を紹介します。

これからはじめるFigma Web・UIデザイン入門

コーダーやフロントエンドエンジニアであれば、この書籍をしっかりやればOKです。

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

現役エンジニアによるメンタリングサービス作りました!

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

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

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

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

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

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

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

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

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

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

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材