MUI の Figma UI kit が良いぞ

概要

私が開発しているWebアプリケーションではUIライブラリとして MUI を使っています。

そのMUIがFigma用のUI Kitを公式に提供しています。
FigmaのUI Kitとは定義済みのUIコンポーネントが沢山入ったFigmaファイルの事を指しています。
コーディングにおけるライブラリの様なもので、オリジナルのデザインをFigmaで作成する時にUI Kitで定義されたUIコンポーネントを再利用することで、典型的なデザインを自分で作る必要が無く、結果的に高品質なデザインをより短時間で作成できるメリットが期待できます。

実際に私もこのUI Kitを使っていて、とても気に入っているので紹介します。

導入方法

MUIのFigma UI KitはMUIストアで販売されています。

こちらのKitではMUIが提供している全ての機能、コンポーネントを使うことが可能です。
有償での販売となっていますが、無料のお試し版も提供されているので、サクッと試してみることも可能です。

お試し版ではカラーパレットの変更ができなかったり、一部のコンポーネントしか提供されていなかったりと機能が制限されていて、本格的に使うのには不向きという印象です。
お試し版は検証用と割り切って、開発フローに導入するのであれば有償版を購入することをお勧めします。

MUI UI Kitの良いところ

MUIコンポーネントをFigmaでも使える

これがUI Kitライブラリの存在意義の根幹であり、一番のメリットになります。
MUIはButtonやCheckboxなどといったUIコンポーネントを提供していますが、それらをそのままFigma上で使うことができます。

Figmaのコンポーネントとして定義されているため、バリアントを使って見た目をカスタマイズすることができます。

自前のデザインシステムを持たない小規模な開発チームにおいては、基本的なUIコンポーネントのデザインはKitが提供してくれている物を使うことで、より注力するべき機能デザインに労力をかけることが可能になります。

また、UI Kitがデザイナーとエンジニアの架け橋になってくれて、「エンジニアがFigma通りのデザインを再現してくれない」「デザイナーがMUIの思想に反した実装しにくいデザインを作った」といった軋轢を避ける手助けをしてくれるでしょう。

カラーテーマを変更できる

UI Kitではカラーテーマを変更することができます。
MUIを実際のプロダクト開発に使う場合は、MUIのデフォルトカラーテーマをそのまま使うことは稀で、プロダクトのコンセプトに合わせて色をカスタマイズすることが一般的だと思います。
下の図はカラーテーマを変更した例です。プライマリ色を水色系統に、セカンダリ色を黄色系統に変更しています。

なお、カラーテーマの定義には最近Figmaに追加された新機能であるバリアブル（変数）機能が使われています。
そのため、テーマの変更はプラグイン不要になりました。

コード例が表示される

UI Kit内のコンポーネントにはドキュメントが付けられており、コード例も提示されます。
下の図はButtonコンポーネントを配置した様子を示しています。
右側のサイドパネルを見ると、コード例が表示されているのがわかると思います。
このように、全てのコンポーネントには使い方を示したコード例がドキュメントとして付けられています。

また、コード例を注意深く見ると、variant, sizeなどのButtonプロパティとコード例が一致していることに気づくと思います。
実は指定したプロパティに合ったコード例が表示されるようになっています。
これにより、エンジニアはデザインを実装する時にサンプルコードを見ながら実装できるので作業効率が上がることでしょう。

終わりに

この記事ではMUI Figma UI Kitを紹介しました。
実際に自分が開発しているプロジェクトではこのキットを導入してから、デザインの作成時間は短縮される、コーディング時間は短縮される、デザイン作成の時点から実装を見据えることで最終的な成果物の完成度も高まる、といったメリットを体感できています。

実装にMUIを使っていて、実装の前段階としてFigmaでのデザイン作成をやっている・やろうとしている開発チームにはこのUI Kitの導入をオススメします。