第1回｜コンポーネントの作成

はじめに

今シリーズの目的は、「ボタン」を題材にして、VariantsやBooleanなどの機能を活用したコンポーネントを作成できるようになることです。
最小のUIパーツであるボタンを通して、Figmaのコンポーネント設計の基本から応用までを学んでいきます。

Figmaの基本的な使い方やオートレイアウトの使い方はここでは説明しないため公式の記事等を参考にしてください。
https://help.figma.com/hc/ja/categories/360002042553-Figma%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98

コンポーネントとは？

コンポーネントとは、再利用可能なUIパーツを作るためのFigmaの機能です。
一度コンポーネント化しておけば、複数の画面やプロジェクトで同じボタンを呼び出して使えます。

コンポーネントを使うメリット

• 一括修正が可能
  例：全画面に使っている「プライマリーボタン」の角丸を変えると、全てが一度に更新される。
• デザインの一貫性を維持できる
  色やサイズがバラバラな“野良ボタン”を防げる。
• チームでの共同作業が効率化
  開発者・デザイナー間で同じ部品を参照できるため、コミュニケーションコストが下がる。

ボタンのような小さなUIをコンポーネント化 → それらを組み合わせてフォームやカードなどを作る → さらに大きな画面に展開する、という流れで「デザインシステム」が形作られます。
つまり、コンポーネントはUI設計の最小にして最大の武器といえます。

それでは作っていきましょう！

１. ボタンを作る

3. コンポーネント化する

• 作成したボタンを選択
• 右クリック > Create component または ⌥⌘K（Mac） / Ctrl+Alt+K（Win）
• 紫のダイヤマークが表示されれば成功

4. インスタンスを使う

• コンポーネント（親）とインスタンス（子）の違い
• インスタンスを複製してラベルを変える例
• 親でデザインを修正すると、全てのインスタンスに反映される

まとめ

• コンポーネントは「再利用可能な部品」
• ボタンはその最小単位として学習に最適
• 次回は「バリアントの追加とBooleanの使い方」を解説