⚽

【figma】マスターコンポーネントの具体的な構築方法〜レバテックデザインシステムの取り組み〜

カリヤ

2024/06/21に公開

はじめに

はじめまして！
レバテックでサービスサイトにおけるデザイン制作のディレクター兼デザイナーを担当しているカリヤです。
現在は日々の進行管理業務に加え、デザインシステム『VoLT』の構築と運用に取り組んでいます。

構築していく中でも、コンポーネント作成は特に大変でしたが多くの学びも得られました。
今回は、デザインシステムを構築していくにあたって、レバテックの各プロダクト共通で使用するfigmaのマスターコンポーネントの具体的な構築方法についてどのように進めたのかを共有します。

まずやったこと

まずやったことやコンポーネント管理にどんな問題があったのかなど詳しいことに関しては、以下の記事で解説しているのでこちらもチェックしてみてください！✨

これまでのFigmaのコンポーネント構築にどんな問題があったか

『VoLT』ができる以前にもfigmaのUIライブラリは運用されていたが、作成・構築の方法には以下のような問題がありました。

コンポーネントにすべき粒度がバラバラ
横幅などで、Fixed・Hug・Fillが正しく指定されていない
命名が揃ってない
テキストプロパティやブーリアンプロパティなどが適切に当てられていない

上記のような問題がある中、まず最初に検討したのは...

各プロダクトを横断して使用できるコンポーネントに

レバテックには、ITエンジニア・クリエイター・フリーランス・転職・就職・教育のすべてを備える複数の採用プラットフォームが存在します。　

そのため、各プロダクト間で共通利用できるUIコンポーネントを定義して、運用するには限界があることがわかりました...！

そういった背景もあり、レバテックではコンポーネントを2種類に分けて定義しました。

1.マスターコンポーネント
- ボタンやカードなど、プロダクト間で共通利用するUIコンポーネント。これらを標準化することで、統一感を保ちながら効率的に開発することができます。
  マスターコンポーネントの一例
2.ユニークコンポーネント
- プロダクトそれぞれの機能に特化したUIコンポーネント。マスターコンポーネントをベースに、プロダクトごとの要件に対応します。
  ユニークコンポーネントの一例

マスターコンポーネントの構築方法〜こだわりポイント4選〜

複数存在するマスターコンポーネントの中で、『チェックボックス』を例に具体的なfigmaの構築方法を解説していきたいと思います。
チェックボックスのコンポーネント

それでは、具体的にこだわって作成した部分の4つをピックアップして詳しく解説していきます！

①実装を考慮したマスターコンポーネントに

横幅などで、Fixed・Hug・Fillを使い分けて作成
- プロダクトに関わらず、サイト作成する際に「ここデザイン、横幅を広げた時どうなりますか...？」といったコミュニケーションはよく発生するかと思います...！マスターコンポーネントを作成する際は、figmaデータと実装データがイコールになるように作成。横幅やデバイスサイズが変わった時にも対応できるマスターコンポーネントにしておくと、デザイン作成する際や実装する際にも汎用的に使用することができます。

フレームの横幅を設定する際は、テキストの要素をFixedで設定しがちですがFillで設定することでレスポンシブや様々な横幅に対応したコンポーネントになります。

②各プロダクト展開への最適化

レバテックはマルチカラーのため各プロダクトへの展開時に、「このコンポーネントはどのように活用するのが適切なんだろう...？」といったことが起こらないようにVoLTではインスタンスガイドラインを設けています。
インスタンスガイドラインに各コンポーネントのオーバライド可能範囲を明記することで、各自で判断して作業を進めることができるようになりました。

🔗インスタンスガイドラインについて詳しく知りたい方は、こちらの記事をご覧ください！

各プロダクトで使用できるように、マスターコンポーネントのベースはモノクロで作成しています。
実際に使用する際は、カラーを変更し、プロダクトごとの独自性を出すことができます。デザイナー、エンジニアが使用しやすいように、プロパティの持たせ方なども工夫して作成しています。

③使用例を掲載

各プロダクトで使用する際の利用イメージがわかるように、実際にプロダクトで使用している代表的な使用例を掲載。「どんなシーンで使用するのが適切なんだろう...？」といった疑問が生じないように、複数パターンの利用イメージを作成しています。

④コンポーネントはfigmaのプラグイン「Propstar」を活用

Variantsの組み合わせを一目でわかるようにしたいけど、作るのに時間手間がかかるな...
と思っていた時に「Propstar」プラグインを発見したので、活用することにしました！

『チェックボックス』コンポーネントは次のようになっています。

『チェックボックス』コンポーネントは、boxのフチあり/フチなし2種類があり、それぞれ［defult,hover,selected,error,disabled］のstatusを持っています。また［size：medium/small］、［selected:turu/false］を持たせています。

上記のように、コンポーネントがどんなVariantsをもっているのかは、コンポーネントをひとつひとつクリックしてプロパティパネルを表示して確認しないといけません。

そんなお困りを解決してくれるプラグインが、「Propstar」でした🙆‍♂
先程の『チェックボックス』コンポーネントに対して「Propstar」プラグインを実行すると、一瞬で以下の状態になります。

「Propstar」プラグインを活用することで、Variantsの組み合わせが一目でわかるようになりました。
とても便利なので、これからデザインシステムを構築の検討している方は活用してみてください✨

おまけ

冒頭で述べた以下の（これまでのコンポーネント構築）問題について、マスターコンポーネントを定義するだけでは解決できない点も多くありました…！

コンポーネントにすべき粒度がバラバラ

横幅などで、Fixed・Hug・Fillが正しく指定されていない

命名が揃ってない

テキストプロパティやブーリアンプロパティなどが適切に当てられていない

そのため、これまで作成してきた各プロダクトのFigmaデータのリファクタリングや命名規則の定義など並行して進めています！（ひいひい言いながら頑張っています💪）

やりたいこと、やることがてんこ盛りでネコの手すら借りたいくらいな状態です...！
まだまだ課題はたくさんありますが、『VoLT』はまだ始まったばかりです。
レバテックのビジョンである、「日本を、IT先進国に。」を実現するために、これからも頑張っていきます！

面白いこともたくさん挑戦できる環境です！そんな、レバレジーズでVoLTを一緒に構築していただける方を募集していますので、気になる方はぜひ一度お問い合わせください！

さいごに

最後まで読んでいただき、ありがとうございました。

今回は、VoLTの具体的なマスターコンポーネントを例に上げて構築方法についてお話しさせていただきました。参考になる部分が少しでもあれば幸いです。

『VoLT』はまだまだ構築中で、成長段階です！
これからたくさんの問題を解決するには、まだ長い道のりがあり多くの協力者が必要です。
重ねてとはなりますが様々な専門性を持ったメンバーが必要なため、一緒に取り組んでくれる方々を大募集しています！！
興味のある方は、ぜひ一度お問い合わせください！
レバテック開発部の公式XのDMからでも大歓迎です！

レバテック開発部

レバテック開発部の公式テックブログです！レバテック開発部 Advent Calendar 2024 実施中: qiita.com/advent-calendar/2024/levtech