Figmaの基本操作｜デザインカンプの見方と素材の書き出し方

デザイナーから「Figmaのリンク送ります」と言われて、どう見ればいいかわからなかった経験はありませんか？コーダーやWeb担当者にとってもFigmaの基本的な操作を知っておくことは、デザインと実装のスムーズな連携につながります。

Figmaとは

Figma（フィグマ）は、ブラウザ上で動作するUIデザインツールです。ソフトのインストールが不要で、URLを共有するだけで誰でも閲覧できる点が特徴です。現在、国内外の多くの制作現場でデザインカンプ（完成イメージ図）の作成に使われています。

Figmaを閲覧する（無料でOK）

デザインカンプを見るだけなら 無料アカウントで十分 です。デザイナーから共有されたURLにアクセスするだけで閲覧できます。

1. figma.com でGoogleアカウントまたはメールアドレスで登録
2. デザイナーから受け取ったURLを開く
3. ブラウザ上でデザインを確認できる（編集権限がなければ閲覧のみ）

基本的な操作方法

デザインカンプの見方：右パネルの読み方

Figmaで要素をクリックすると、右側のパネルにCSS実装に必要な情報が表示されます。

確認できる主な情報

• W / H：要素の幅（Width）と高さ（Height）。ピクセル単位
• X / Y：左上の頂点からの位置（絶対座標）
• Fill（塗り）：背景色・文字色。HEXコードで確認できる
• Stroke（線）：枠線の色と太さ
• Font：フォント名・サイズ・ウェイト・行間（line-height）・字間（letter-spacing）
• Corner radius：角丸の半径（border-radius の値）

「Inspect（インスペクト）」モードを活用する

右上の「Inspect（検査）」タブに切り替えると、選択した要素のCSS値が直接表示されます。コーディングの際に非常に便利です。

素材の書き出し方

画像やアイコンをFigmaから書き出す手順は次のとおりです。

1. 書き出したい要素をクリックして選択する
2. 右パネルの下部にある「Export（書き出し）」セクションを探す（「＋」ボタンをクリックして追加する場合もある）
3. フォーマット（PNG・SVG・JPGなど）と倍率（1x・2x）を選択する
4. 「Export」ボタンをクリックしてダウンロード

コーダーが特に活用したい機能

コンポーネントのプロパティ確認

ボタンやカードなど繰り返し使われる要素（コンポーネント）は、クリックすると「メインコンポーネントに移動」のリンクが表示されます。デザインの根本設計を確認するときに使います。

スペーシング（余白）の確認

要素を選択した状態で別の要素にカーソルを乗せると、要素間の距離（px）が表示されます。margin や padding の値を確認するのに便利です。

プロトタイプの確認

右上「Prototype」タブに切り替えると、デザイナーが設定した画面遷移・アニメーションの動きを確認できます。実装前に動きのイメージを掴むのに役立ちます。

まとめ

Figmaはブラウザで動作し、無料で閲覧できるため、コーダーやWeb担当者も最低限の操作を覚えておくと制作がスムーズになります。

Webサイト制作のデザインプロセス全体については サイト構造設計の考え方 もあわせて参考にしてください。