こんにちは。BASE株式会社の渡邊です。ネットショップ作成サービス「BASE」のUIUXデザインを担当しています。
前回は、Figmaの基礎知識や他ツールとの違いについてお伝えしました。今回は、実際にFigmaを導入してしばらく経った方に向け、Figmaをさらに便利にする機能や実務への活用例を紹介します。
弊社では、UIコンポーネントライブラリを「UI-Kit」と名付け、プロダクトデザイナー全員が日々使用しているのですが、対応できていなかった便利機能や最新機能を使い「UI-Kit」を最近アップデートしました。その結果、今まで抱えていた課題をいくつも解決することができたため、今回はその解決Tipsをいくつかお伝えしたいと思います。
前提として、これから紹介するFigmaの新機能を活かすためには、AutoLayout、Component Variantsなど基本機能の理解が不可欠です。これらを理解するには、Figmaが公式に提供している次のチュートリアル「playground」をやってみることをオススメします。
Auto layoutを覚えてレスポンシブなデザインができるようになり、Variantsを覚えてコンポーネントの差分を管理できるようになると、大概のデザインは組むことが可能になります。現在もこの機能のみでデザインを組んでいる方も多いと思いますが、「もう少しスッキリさせたい」「さらに効率を良くしたい」と考えている方に、これから紹介する機能が役に立てばうれしいです。
今回使用する便利機能2選は「Variables」と「Component Properties」
1.Variables
Figmaデザインのバリアブルには再利用可能な値が保存され、あらゆる種類のデザインプロパティとプロトタイプアクションに適用できます。デザインの構築、デザインシステムの管理、複雑なプロトタイプフローの作成時に、時間と労力を節約するのに役立ちます。（出典：Figma公式ページ）
公式ページにこのように記載されているとおり、Variablesはいわゆる「変数」を定義できる機能で、2023年6月にリリースされました。今まではカラーをStylesで任意の名前をつけることで管理するといった動作までしかできなかったのですが、Variablesの活用によって、「CSSと共通のカラー指定」「ライトモード/ダークモードの切り替え」などが可能になります。
残念ながら2023年11月現在、フォントのVariablesには対応していませんが、サイトによれば前向きに検討しているとのことですのでアップデートに期待しましょう！
2.Component Properties
コンポーネントのプロパティは、コンポーネントの変更可能な要素です。特定のデザインのプロパティに結び付けることで、他のユーザーが変更できるコンポーネントの一部を定義できます。（出典：Figma公式ページ）
Variantsと少し似ていますが、Componentを増やさずに差分を管理できる機能が「Component Properties」です。一部だけしか違いがない場合、Component Propertiesを使用するとVariantsの数を減らすことができます。
Component Propertiesは全部で4種類です。
- Boolean properties：要素の表示/非表示を切り替えることができます。
- Instance swap properties：特定のInstanceを決められた別のものに置き換えることができ、アイコンの差し替えなどによく使われます。
- Text properties：テキストのデフォルト値を決めたり、右サイドバーから簡単に上書きすることが可能です。
- Variant properties：いわゆる通常の差分を作成するタイプのプロパティです。
さらに便利な機能として、「Nested Instance」があります。これは、入れ子になったInstanceのプロパティを表層にも表示してくれる機能です。
今回はこのふたつの機能を活用して、BASEがコンポーネントライブラリに取り入れた活用事例を紹介します。
