コーダーのFigma入門｜覚えるのは「読む」機能だけでいい

※本記事にはプロモーション（広告）が含まれます。

「デザインデータがFigmaで来たけど、どう見ればいいの？」
「Figmaも勉強しないとコーダーの仕事は取れない？」
「デザインを作る機能まで覚える必要があるのか分からない」

結論から書きます。コーダーがFigmaで使う機能は10個ほどです。デザインを作る側の機能は、覚えなくて構いません。

私はWeb制作を14年ほど続けていますが、その間にデザインデータの受け渡しはPhotoshopからFigmaへ完全に移り変わりました。両方を実務で使ってきた立場から、コーダーに必要な部分だけを書きます。

結論：デザインを「読む」機能だけ覚えればいい

Figmaには膨大な機能がありますが、コーダーが日常的に使うのは次の範囲です。

• 要素を選んでサイズ・余白・色・フォントを確認する
• 画像を書き出す
• 距離を測る
• コメントで質問する

これだけです。デザインを作る機能（ペンツール、シェイプの編集、プロトタイプ作成）は不要です。ここを勘違いして入門書を1冊やろうとすると、必要ないことに時間を使うことになります。

PhotoshopからFigmaに変わって、何が良くなったのか

私はPhotoshopでデザインカンプを受け取っていた時代を実際に経験しています。その頃と比べると、コーダー側の負担は明確に減りました。

ソフトを買わなくてよくなった

以前はカンプを開くだけのためにPhotoshopが必要でした。今はブラウザで開けます。これだけでも参入のハードルが大きく下がりました。

「最新版はどれ？」が消えた

ファイルをやり取りしていた頃は、最終_修正2_ol.psd のようなファイルが並び、どれが最新か分からなくなる事故が起きていました。

Figmaは同じURLが常に最新です。古いデータでコーディングしてしまう事故が構造的に起きません。地味ですが、これが最大の変化だと思っています。

数値を目で読まなくてよくなった

以前は定規で測ったり、レイヤーの位置を計算したりしていました。今は要素を選ぶだけで数値が出ます。再現の正確さが上がり、確認作業の時間が減りました。

コーダーが実際に使う機能

最重要は「Altを押しながらホバー」

これを知らないコーダーが本当に多いのですが、作業時間がいちばん変わるのがこの操作です。

要素を1つ選んだ状態で、Alt（Macは Option）を押しながら別の要素にカーソルを合わせると、その2つの距離が数値で表示されます。余白の値を推測で書かなくて済むようになります。

コーダーが覚えておくべきショートカット

数が多いので、実務で本当に使うものだけ挙げます。これだけで十分です。

この6つを覚えるだけで、操作でつまずくことはほぼなくなります。デザインを作る側のショートカットは覚える必要がありません。

コメント機能の使い方で、印象が変わる

ここは意外と差が出る部分です。デザイナーやディレクターとのやり取りは、コメント機能で完結させるのが効率的です。

チャットで聞かず、その場所に書く

「トップのボタンの余白ですが」とチャットで書くより、該当箇所にコメントを付けるほうが伝わります。相手がどこの話か探す手間がなくなります。

質問はまとめて出す

思いついた順に1つずつ聞くと、相手の作業が何度も中断されます。着手前に一通り確認して、まとめて出すほうが好まれます。

「どうしますか」ではなく提案の形にする

これがいちばん効きます。

• ❌「スマホのときこの部分はどうしますか？」
• ⭕「スマホでは縦積みにしようと思いますが、問題ないでしょうか？」

相手は「はい」と答えるだけで済みます。判断の手間を減らせる人は、確実に次も声がかかります。私が現場で見てきた限り、評価されているのは技術が高い人ではなく、こういうやり取りができる人でした。

デザインデータを受け取ったら、最初にやること

1. フレームの幅を確認する

PCデザインが1440pxで作られているのか、1920pxなのか。ここを確認せずに始めると、全体の比率がずれます。

スマホ用のフレームがあるかも同時に確認してください。無ければ、その時点で質問すべき項目です。

2. 使われている色とフォントを洗い出す

先に一覧にしておくと、CSSの変数として最初に定義できます。後から「この青、微妙に違う」と気づくのがいちばん面倒なので、着手前にまとめてしまうのが早いです。

3. 共通パーツを見つける

ヘッダー、フッター、ボタン、カード。繰り返し使われているものを先に特定すると、実装の順番が決まります。

デザイン側でコンポーネント化されていれば、それがそのまま共通パーツの単位になります。

4. 足りないものを先に質問する

ホバー時の状態、エラー表示、テキストが長くなった場合。これらはデザインに含まれていないことが多いです。

作業を始めてから聞くより、最初にまとめて聞いたほうが手戻りが減ります。コメント機能を使ってその場所に直接書くと、相手も状況が分かって回答が早くなります。

実務でよく起きること

フォントが手元に無い

デザインで使われているフォントが自分の環境に入っていないと、表示が置き換わります。気づかずに進めると、全体の行間や幅がずれます。

Webフォントなのか、画像化する前提なのかは、必ず最初に確認してください。

数値が中途半端

余白が「23px」「17px」のように半端な値になっていることがあります。デザイン上のズレであることも多いので、近い値に丸めていいか確認するのが実務です。

全部を1px単位で再現しようとすると、時間がかかるうえに、かえって不自然になります。

スマホデザインが無い

PCデザインだけ渡されるケースは珍しくありません。この場合、レスポンシブの挙動をこちらで決めることになります。

勝手に決めて後から差し戻されると二度手間なので、「この要素は縦積みにします」と先に伝えておくのが安全です。詳しくはレスポンシブ対応の基礎にまとめています。

画像の書き出しサイズを間違える

高解像度ディスプレイ対応のため、表示サイズの2倍で書き出すのが基本です。100px幅で表示するなら200pxで書き出します。

ここを等倍で書き出すと、スマホで見たときにぼやけます。納品後に指摘される典型例です。

開発モード（Dev Mode）について

FigmaにはCSSの値などを確認しやすくする開発者向けの機能があります。ただしプランや権限によって使える範囲が変わり、条件も変更されることがあります。

実務上の答えはシンプルで、案件ごとにクライアントや制作会社へ確認するのが正解です。「開発モードは使えますか」と聞けば済みます。

そして重要なのは、この機能が無くてもコーディングはできるということです。通常の閲覧権限でも、要素のサイズ・色・フォント・余白は確認できます。使えれば楽になりますが、必須ではありません。

出力されたCSSはそのまま使わない

仮に自動生成されたCSSが見られる場合でも、そのままコピーして使うのは避けてください。位置指定が絶対値になっていたり、レスポンシブを考慮していない記述になっていることがあります。

数値の確認に使い、コードは自分で書く。これが実務での正しい使い方です。

デザインデータが無い案件もある

実務では、そもそもデザインデータが渡されないケースもあります。

既存サイトの改修

「このページと同じ雰囲気で1ページ追加してほしい」という依頼です。この場合は既存サイトのCSSを読んで、色や余白の基準を自分で拾います。

ラフやワイヤーだけ

手書きのラフやパワーポイントのワイヤーだけ渡されることもあります。このときは実質的にデザインもこちらで決めることになるので、見積もりの段階で作業範囲を確認しておく必要があります。

だからデザインが読めると強い

私はフリーランスとして、要件定義からデザイン、実装、公開まで一人で担当する案件を受けてきました。デザインデータが無い状況でも進められるのは、「どう見せるか」を自分で決められるからです。

この対応範囲の広さが、そのまま単価に反映されます。相場についてはコーダーの単価相場にまとめています。

覚えなくていい機能

• ペンツール・シェイプ編集：デザインを作る側の機能です
• プロトタイプ作成：画面遷移の設計はデザイナーの担当
• バリアント：デザインシステムを作る側の機能
• プラグイン開発：不要です

ただしオートレイアウトだけは、仕組みを知っておくと役立ちます。Flexboxと似た考え方なので、「デザイナーがどう並べようとしたか」が読み取れるようになります。

デザインも分かるコーダーは強い

私はコーディングだけでなく、要件定義・設計・デザインまで一貫して担当してきました。その経験から言えるのは、デザインの意図が分かるコーダーは現場で重宝されるということです。

「なぜこの余白なのか」「なぜこの順番なのか」が想像できると、判断に迷う場面で正しい方向に倒せます。逆に、指示どおり再現するだけの人は、仕様の穴があったときに止まってしまいます。

Figmaを触れることは、その入り口になります。単価を上げたいなら、ここは投資する価値がある領域です。

よくある質問

Q. Figmaは無料で使えますか？

基本的な閲覧や書き出しは無料の範囲で可能です。ただしプランによって使える機能が変わるため、案件で必要な権限はクライアントに確認してください。

Q. Photoshopはもう不要ですか？

案件によります。既存サイトの改修では、過去のデータがPhotoshopのままということもあります。優先度はFigmaが上ですが、Photoshopが不要になったわけではありません。

Q. Figmaを覚えるのにどのくらいかかりますか？

コーダーが使う範囲なら数時間です。実際のデザインデータを開いて、サイズを見て、画像を書き出す。この3つを一度やれば感覚がつかめます。

Q. デザインも作れるようになるべきですか？

必須ではありませんが、対応範囲が広がると単価も変わります。判断材料はコーダーとデザイナーの違いにまとめています。

Q. 他に何を覚えれば単価が上がりますか？

JavaScriptとCMS構築です。特にWordPressは案件数が多く効果が大きいので、コーダーにWordPressは必要かを参考にしてください。

まとめ｜コーダーのFigmaは数時間で足りる

• 覚えるのは「読む」機能だけ。作る機能は不要
• いちばん効くのはAlt（Option）＋ホバーで距離を測る
• 着手前にフレーム幅・色・フォント・共通パーツを確認する
• 開発モードは案件ごとに確認。無くてもコーディングはできる
• 自動生成のCSSはそのまま使わない

Figmaは、覚えるコストに対して効果が大きい部類です。数時間で終わるので、まだ触っていないなら早めに一度開いてみてください。

自分のスキルでいくらの案件があるかは、聞いてみないと分かりません。登録も相談も無料です。

Midworksで案件と単価を見てみる

他に必要なスキルはコーダーに必要なスキル、独立の全体像はフリーランスになるための7ステップにまとめています。