Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ 実践:Figmaでさまざまなボタンを作成する | Figmaでのプロトタイピングの習得
FigmaによるUI/UXデザイン

book実践:Figmaでさまざまなボタンを作成する

メニューを表示するにはスワイプしてください

このセクション全体からの主なポイントは以下の通りです:

  1. ドロップダウン、チェックボックス、ラジオ、評価ボタンは、小さなデザイン変更によってボタンがさまざまなUIおよびUXのニーズに適応できることを示しています;
  2. 再利用可能なボタンタイプは、今後のプロジェクトで時間を節約し、デザインの一貫性を維持します;
  3. コンポーネントバリアントは、複数のボタン状態(例:デフォルト、ホバー、アクティブ)の管理を効率化します。アイコン、テキスト、状態などのプロパティは、コンポーネントを複製せずにカスタマイズでき、煩雑さを軽減します。また、「インスタンススワッププロパティ」や「ブールプロパティ」などの機能により、要素のオン/オフ切り替えやアイコンの交換が簡単になり、手動調整の必要が減ります;
  4. オートレイアウトは、ボタンや他のデザイン要素を配置する際の一貫したスペースと整列を保証します。これにより、ボタンをリサイズや変更に応じてレスポンシブにする作業が簡単になります;
  5. コンポーネントやバリアントの命名と整理を適切に行うことで、特に大規模プロジェクトでの混乱を防げます。また、要素をフレームやコンポーネントにグループ化することで、ナビゲーションや再利用が容易になります。

下の画像のような動作するプロトタイプ付きの「トグル」ボタンスイッチを作成してください。接続矢印やインタラクション設定に注目してください。

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 4.  8

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 4.  8
some-alt