Webデザインを行う際、メインで使用するFigmaの使い方を学びましょう。

① 導入

1. Figmaとは

ブラウザ上で共同編集できるデザインツール
プロトタイプの作成やWebサイトのデザイン向き

2. その他のツールについて

Illustrator, photoshop, Canva等デザインツールは多種多様
目的に合わせて使用する

② 基本操作

https://chot.design/figma-beginner/

③便利な使い方

1. フレームとグループの違い

フレーム：構造を定義して、余白・レイアウトを管理できる
グループ：見た目をまとめるだけ

✖️ グループだけで整理 → レイヤーが散らかって納品時に編集不能
◎デザインからコーディングへの受け渡し（margin/paddingが明示できる）
◎他のデザイナーやエンジニアが「読みやすいデータ」に

2. オートレイアウト

上下左右の余白設定や、要素の整列を行うことができる

UIは要素の増減がつきもの → 余白が一貫していないと一瞬で破綻

✖️ テキストを変えた際にレイアウトが崩れ、調整に時間がかかる
◎サイトのメニュー、カード、ボタンなど「量が変わる前提」のUIに必須

Point

• あくまで見やすさや統一感という点での機能
• やりすぎると整いすぎたデザインになってしまうので注意

3. コンポーネントの使い方

デザイン全体で再利用できるUIの部品のこと。例えば、ボタン、アイコン、モーダルなど。複数の画面に渡って同じUI部品があるとき、元となるコンポーネントを編集すると、全てのUI部品に修正内容を反映することができるため、作業の効率化とアプリ全体の統一性を保つことができます。

「同じボタンを10個作る」のは大変ですし、修正が発生した際、全て治さなくてはならず工数が増え、漏れが出てしまいます。

Point

• 全部共通にすると逆に制御不能 → 適切な粒度で作ることが重要
• マスターコンポーネントは集めておくと修正しやすいです

4. プロパティの基本（カラー・タイポグラフィ管理）

✖️ 案件が進むと必ず「色変更／フォント変更」が入る → 個別指定だと破滅

✖️ #333が3種類、微妙に違う青が乱立 → コーダーさんが迷う

◎ブランドカラーを一括管理できる

◎開発とデザインの言語が一致する

④まとめ

崩れない、修正しやすい、伝わるデザインデータを作ろう

あくまで制作側の負担を減らす部分のスキルです。クライアントさんには関係がない部分なので、こだわりすぎずやりながら慣れていけば問題ないです。