Figmaを100日で極める｜1日目

ボタンに動きをつけてみよう！ホバー＆クリック設定編

こんにちは、HARUNです。
今日から「Figmaを100日で極める」シリーズ、ゆるっ〜と始めていきます🌿

1日目のテーマは、ホバー（hover）とクリック（タップ）によるボタンのインタラクション設定です！
実はこれ、Figma初心者が「楽しい！」と感じる最初の壁を超えるステップです。

🔸ホバーって何？クリックとの違いは？

まず、ざっくり言うと：

• ホバー：マウスを上に乗せたときに起こる動き

• クリック（タップ）：実際にクリック（またはタップ）したときの動き

Figmaではこの「状態変化（バリアント）」を使って、
簡単に“動きのあるUI”をつくることができます✨

🔸設定方法は意外とシンプル

1. ボタンのデザインコンポーネントに作成

2. バリアント作成をクリック

3. 3つのバリアントを用意する

4. 管理しやすいようにバリアントを作成したら、「デフォルト」「マウスオーバー」「クリック」と名前を変更する

5. バリアントにプロトタイプを設定｜デフォルトからマウスオーバーは「マウスオーバー時」と設定

6. バリアントにプロトタイプを設定｜マウスオーバーからクリックは「クリック時」反映も「即時」で設定

7. アセットの中の設定をしたボタンをドラッグ＆ドロップ

8. 完成です！

これだけで、ボタンに“ちゃんと動き”が出るんです👏
TikTokで動画でわかりやすくまとめているのでそちらも参考にしてください✨
https://www.tiktok.com/@haru_2024_09/video/7513387928148512007?is_from_webapp=1&sender_device=pc&web_id=7496050514146018823

🔸気をつけたいポイント

• 背景の色・影・大きさの変化を「微妙に変える」だけでも印象アップ

🔸実際に作ったサンプルはこちら💡

TikTokで紹介しています♪

🔸100日チャレンジ、始めた理由

Figmaは使い方を覚えるほど、どんどん「伝える力」が上がるツールだと感じています。
毎日少しずつでも触って、
「作れる」を「伝わる」に変えていけたらと思って、このチャレンジを始めました。

✏️次回のテーマは…

次回は、**「画像の間に均等に余白をつける方法」**をご紹介します！
整列やスペース調整に苦手意識がある方にこそ、ぜひ見てほしい内容です💡

最後まで読んでいただき、ありがとうございました！