Figmaを触り始めたばかりの頃、こんな悩みはありませんか？
- 画面は作れるけど、なんか素人っぽい
- ボタンやカードを毎回作り直している
- UIパーツの「正解の形」が分からない
- デザインが安定しない
その原因の多くは、
UIパーツを「部品」として作っていないことにあります。
実務のデザインは、
✔ ボタン
✔ 見出し
✔ カード
✔ リスト
といった 基本UIパーツの組み合わせ でできています。
この記事では、
Figma初心者でも簡単に作れるUIパーツ を
「構造」「作り方」「ポイント」付きでまとめました。
UIパーツは「作り方」より「構造」が大事
まず大前提として覚えておきたいのが、
UIパーツは“見た目”より“中身の構造”が重要ということです。
基本ルールはこれだけ
- すべて Frame＋Auto Layout で作る
- テキストは Hug contents
- 余白は Paddingで管理
- 再利用するものは コンポーネント化
これを守るだけで、
✔ 崩れない
✔ 直しやすい
✔ 量産できる
UIになります。
① ボタンUI（最優先で覚えたい）
■ 構造
Frame（Auto Layout）
└ テキスト（Hug contents）■ 作り方（最短手順）
- テキストを入力
- 選択して「Shift + A」でAuto Layout
- Padding：上下12 / 左右16（目安）
- 角丸：6〜8
- 背景色を設定
■ よく使うボタン種類
- Primary（メインCTA）
- Secondary（補助）
- Text（リンク風）
■ ポイント
- ボタンは 必ずAuto Layout
- 文字が変わっても崩れない
- 最初に作ってコンポーネント化すると楽
ボタンを制する者はUIを制する
② 見出し（タイトル・セクションヘッダー）
■ 構造
Frame（Auto Layout）
└ テキスト■ 作り方
- テキストを入力
- Text Style を設定
- 必要なら下線・装飾を追加
■ よくある見出しパターン
- シンプルなテキストのみ
- 左にライン付き
- 上下に余白のあるセクション見出し
■ ポイント
- 見出しは Text Style必須
- サイズ・行間を統一すると一気にプロっぽくなる
③ カードUI（使用頻度No.1）
■ 構造
Frame（Auto Layout・縦）
├ 画像
├ タイトル
├ 説明文
└ ボタン or タグ■ 作り方
- Frameを作成 → Auto Layout（縦）
- Gap：12〜16
- Padding：16
- 角丸＋シャドウを追加
■ よく使う場面
- 記事一覧
- 商品一覧
- プロフィール表示
■ ポイント
- 情報は 上から重要な順
- 影は薄く（やりすぎ注意）
- そのままコンポーネント化すると最強
④ タグ・バッジ（補足情報用）
■ 構造
Frame（Auto Layout）
└ テキスト■ 作り方
- ボタンとほぼ同じ
- Paddingを小さめに
- 角丸は大きめ（Pill型）
■ 使いどころ
- NEW
- おすすめ
- カテゴリ表示
■ ポイント
- 色は控えめ
- 主役にならない設計が◎
⑤ リストUI（情報整理に必須）
■ 構造
Frame（Auto Layout・縦）
├ 行
├ 行
└ 行■ 作り方
- 1行を先に作る
- それを複製
- 親Frameで縦Auto Layout
■ ポイント
- 行の高さを揃える
- 区切り線は薄く
⑥ ナビゲーション（ヘッダー・メニュー）
■ 構造
Frame（Auto Layout・横）
├ ロゴ
├ メニュー
└ ボタン■ ポイント
- 横Auto Layout必須
- Gapで均等配置
- Constraintsで左右固定
⑦ フォームパーツ（入力欄）
■ 構造
Frame（Auto Layout・縦）
├ ラベル
└ 入力欄■ ポイント
- 高さは40〜48px
- 枠線は薄め
- フォーカス時の色を想定
■ UIパーツは「コンポーネント化」がゴール
作ったUIパーツは、必ず
- コンポーネント化
- Variantで状態管理（hover / disabledなど）
- 名前を付けて整理
これをするだけで、
修正・量産・管理が一気に楽になります。
■ 初心者におすすめの作成順
- ボタン
- 見出し
- タグ
- カード
- リスト
- ナビ・フォーム
小さいパーツ → 大きいパーツ が鉄則です。
まとめ｜UIは「部品化」すると一気に楽になる
FigmaでのUI制作は、
一から毎回作らないことが最大のコツです。
- よく使う形を決める
- Auto Layoutで崩れない構造にする
- コンポーネント化して使い回す
これだけで、
✔ 作業スピード
✔ デザインの安定感
✔ 実務対応力
すべてがレベルアップします。
#Figma #フィグマ #Figma初心者 #Webデザイン勉強中 #デザイン初心者 #UIデザイン #デザイン独学 #UIパーツ #ボタンデザイン #カードデザイン #UIコンポーネント #AutoLayout #Figma学習