使いやすいコンポーネント作りのチェックポイント

2023年3月15日 11:52

こんにちは。ていてい（@dbko1991）です。
普段はプロダクトデザインとデザインシステムの推進をしています。

デザイナーのみなさん、このような困りごとはありませんか？
Figmaで作ったコンポーネントを画面のデザインに利用すると
💭 サイズを変えるとレイアウトが崩れてしまう
💭 Componentを切り替えると、テキストなどのOverridesが上書きされてしまう・・・

このようなことを避けるために、普段Figmaでデザインシステムのコンポーネントをつくる際には、上記のような困りごとに悩まされない、使いやすいコンポーネントを作るように心掛けています。

今回は私が思う使いやすいコンポーネントの考え方と、作る時のチェック方法を紹介したいと思います。
皆さんに少しお役に立てたら嬉しいです！

1. 使いやすいコンポーネントの考え方

私は利用シーンに合わせて柔軟に変化ができるコンポーネントは使いやすいな〜と思っています。
その変化は、2種類あります。

よく変化する要素は文字数、構成要素、フレームサイズの3つあります。
それらの変化に対してのチェックするポイント

・要素の位置が被らずに正しくなっているか
・余白が正しく保っているか
・フレームの大きさが適切に変わっているか

変化する要素はComponentとなり、
その変化に対してのチェックするポイント

Overridesが維持されているか

使いやすいコンポーネントの考え方を元に、作る時に3つのチェック方法をまとめてみました。

✅ チェックポイント
・他の要素と被っていないか
・テキストレイヤの大きさが適切に変わっているか
・フレームの大きさが適切に変わっているか

✅ チェックポイント
・他の要素の位置が正しくなっているか
・余白が正しく保っているか
・フレームの大きさが適切に変わっているか

✅ チェックポイント
Overridesが維持されるか

今回紹介したチェック方法は、Figmaのプロパティで簡単に確認できます。

・Textプロパティで文字数を加えてみる
・Booleanプロパティで要素を無くしてみる
・Variantsプロパティでコンポーネントを置き換えてみる

最後に、少しでも参考になれたら、スキ❤️をポチッと押していただけると嬉しいです！
デザインシステムに取り組んでいるみなさん、ぜひ気軽に Twitter で声をかけてください🙋‍♀️

宣伝です！

カミナシはプロダクトデザイナー/フロントエンジニアを絶賛募集しています。
気になった方はぜひカジュアルに話しましょう。