【🌈 Figma入門】デザインの基本用語を簡単解説！
はじめに
勉強会でFigmaについて学習する機会があったので、その一部を学習メモとして共有します！
👇自己紹介については以下をクリック
基本用語
1. コンポーネント
コンポーネントは、再利用可能なデザイン要素です。ボタンやアイコンなど、複数の場所で使用される要素をコンポーネントとして作成し、一元管理ができます。変更が必要な場合、コンポーネントを更新するだけで、そのコンポーネントを使用しているすべての場所に自動的に反映されます。
Figmaのコンポーネントについてのガイド
2. バリアント
バリアントを使うと、同じコンポーネントの異なるバージョンを手軽に管理できます。たとえば、ボタンに「通常」、「ホバー」、「押下」といった異なる状態がある場合、これらを一つのコンポーネントセットとしてまとめて扱うことができます。インスペクターを通じて、これらのバリアントを簡単に切り替えることができるため、プロジェクトを一貫性のある形で効率的に進めることが可能です。
バリアントの新規作成
バリアントの作成と使用
3. オートレイアウト
オートレイアウトを活用すると、コンポーネント内のアイテムの間隔や配置を自動で整えることができます。この機能は、デバイスの画面サイズに変更があった際にも、デザインが適切に調整されるようにするために役立ちます。例えば、ボタンのテキストを変更したときでも、オートレイアウトがあればボタンの大きさは自動で適切に調整されます。
オートレイアウトの使用
4. スタイルの登録
スタイルを設定することで、フォントや色、影などのデザイン要素を再利用可能な形で保存しておくことができます。これにより、デザインの一貫性を保ちながら、プロジェクトをより効率的に進めることができます。例えば、「Primary Color」として特定のテキストカラーを設定し、プロジェクト全体で統一感を持たせることが可能です。
スタイルの管理と共有
5. デザインドキュメント
デザインドキュメントは、プロジェクトの指針やデザインの目的、使用されるコンポーネントの詳細をまとめた資料です。これにより、チームメンバー間での明確なコミュニケーションが促進され、デザインプロセスや重要な決定を効果的に共有できます。Figmaを使用すると、プロジェクト内で直接テキストやドキュメントを作成し、これらの情報を整理しやすく管理することが可能です。
6. インスタンス
Figmaなどのデザインツールで、「インスタンス」とはコンポーネントから生成された複製やオブジェクトを指します。これらのインスタンスは親コンポーネントの特性を継承しつつ、テキストや色、サイズなど特定の属性を自由に変更できます。
親コンポーネントが更新されると、変更されていない属性は自動的に全インスタンスに反映されますが、カスタマイズされた部分はそのまま保持されます。これにより、一貫性を保ちながら、各インスタンスをプロジェクトのニーズに合わせて調整できます。Figmaでは、インスタンスは「◇ひし形のマーク◇」で表されます。
コンポーネントインスタンスの作成と挿入
具体的にオススメの記事
7. プロトタイプ
プロトタイプは、デザインプロセスで実際の製品の動作を再現するインタラクティブなデモです。（いわゆるワイフヤーフレームとほぼ同様の認識）Figmaを使用すると、デザイナーは静的な画面を動的なインターフェースに変え、ユーザーに実際の操作感を体験させることができます。これには、画面間の遷移やアニメーション、リンクの設定などが含まれます。
プロトタイプを作ることで、デザインの実用性をテストし、早期に問題点を見つけることが可能です。また、ステークホルダーやクライアントへの説明、エンジニアとのコミュニケーションにも役立ちます。
Figmaのプロトタイピングのガイド
具体的にオススメの記事
Miroでも作成可能
番外編（調べているうえで出会ったもの）
デザインシステム
デザインシステムは、製品やサービスの開発において、一貫したユーザー体験を提供するための再利用可能なコンポーネントとガイドラインの集合です。具体的には、UI要素、デザインパターン、コンポーネントのライブラリ、スタイルガイド（色、フォント、テキストスタイルなど）を統合したもので、デザイナー、開発者、製品マネージャーが協力して一貫性と効率を保つために使用します。
参考
まとめ
この記事では、Figmaを使い始める際に知っておくべき基本用語を詳しく解説しました。コンポーネント、バリアント、オートレイアウト、スタイルの登録、デザインドキュメント、インスタンス、プロトタイプといった用語を理解することで、Figmaでのデザイン作業がより効率的かつ効果的になります。自分もまだまだですが、これらの用語をおさえることで新たな概念に出会う際のキャッチアップ速度も
最後に
ここまで読んでいただきありがとうございました！
今回の記事が良かったと思ったらぜひ「いいね」を押していただけると嬉しいです（大変励みになります💪）
noteでも記事を執筆していますので、ぜひチェックしてみてください。
他の記事
Discussion