Figmaで簡単に作れるUIパーツ集｜初心者でも今日から使える基本コンポーネントまとめ

Posted on by

Figmaを触り始めたばかりの頃、こんな悩みはありませんか？

  • 画面は作れるけど、なんか素人っぽい
  • ボタンやカードを毎回作り直している
  • UIパーツの「正解の形」が分からない
  • デザインが安定しない

その原因の多くは、
UIパーツを「部品」として作っていないことにあります。

実務のデザインは、
✔ ボタン
✔ 見出し
✔ カード
✔ リスト

といった 基本UIパーツの組み合わせ でできています。

この記事では、
Figma初心者でも簡単に作れるUIパーツ を
「構造」「作り方」「ポイント」付きでまとめました。

UIパーツは「作り方」より「構造」が大事

まず大前提として覚えておきたいのが、
UIパーツは“見た目”より“中身の構造”が重要ということです。

基本ルールはこれだけ

  • すべて Frame＋Auto Layout で作る
  • テキストは Hug contents
  • 余白は Paddingで管理
  • 再利用するものは コンポーネント化

これを守るだけで、
✔ 崩れない
✔ 直しやすい
✔ 量産できる
UIになります。

① ボタンUI（最優先で覚えたい）

■ 構造

Frame（Auto Layout）
 └ テキスト（Hug contents）

■ 作り方（最短手順）

  1. テキストを入力
  2. 選択して「Shift + A」でAuto Layout
  3. Padding：上下12 / 左右16（目安）
  4. 角丸：6〜8
  5. 背景色を設定

■ よく使うボタン種類

  • Primary（メインCTA）
  • Secondary（補助）
  • Text（リンク風）

■ ポイント

  • ボタンは 必ずAuto Layout
  • 文字が変わっても崩れない
  • 最初に作ってコンポーネント化すると楽

ボタンを制する者はUIを制する

② 見出し（タイトル・セクションヘッダー）

■ 構造

Frame（Auto Layout）
 └ テキスト

■ 作り方

  1. テキストを入力
  2. Text Style を設定
  3. 必要なら下線・装飾を追加

■ よくある見出しパターン

  • シンプルなテキストのみ
  • 左にライン付き
  • 上下に余白のあるセクション見出し

■ ポイント

  • 見出しは Text Style必須
  • サイズ・行間を統一すると一気にプロっぽくなる

③ カードUI（使用頻度No.1）

■ 構造

Frame（Auto Layout・縦）
 ├ 画像
 ├ タイトル
 ├ 説明文
 └ ボタン or タグ

■ 作り方

  1. Frameを作成 → Auto Layout（縦）
  2. Gap：12〜16
  3. Padding：16
  4. 角丸＋シャドウを追加

■ よく使う場面

  • 記事一覧
  • 商品一覧
  • プロフィール表示

■ ポイント

  • 情報は 上から重要な順
  • 影は薄く（やりすぎ注意）
  • そのままコンポーネント化すると最強

④ タグ・バッジ（補足情報用）

■ 構造

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など）
  • 名前を付けて整理

これをするだけで、
修正・量産・管理が一気に楽になります。

■ 初心者におすすめの作成順

  1. ボタン
  2. 見出し
  3. タグ
  4. カード
  5. リスト
  6. ナビ・フォーム

小さいパーツ → 大きいパーツ が鉄則です。

まとめ｜UIは「部品化」すると一気に楽になる

FigmaでのUI制作は、
一から毎回作らないことが最大のコツです。

  • よく使う形を決める
  • Auto Layoutで崩れない構造にする
  • コンポーネント化して使い回す

これだけで、
✔ 作業スピード
✔ デザインの安定感
✔ 実務対応力

すべてがレベルアップします。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中 #デザイン初心者 #UIデザイン #デザイン独学 #UIパーツ #ボタンデザイン #カードデザイン #UIコンポーネント #AutoLayout #Figma学習