Figmaで実践! プロダクト開発のスピードを上げる効率的なコンポーネントの設計

Figmaで実践! プロダクト開発のスピードを上げる効率的なコンポーネントの設計
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2023/04/06 08:00

 本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「プロダクト開発のスピードを上げる効率的なコンポーネントの設計」についてです。

 こんにちは!SmartBankでデザイナーをしている福嶋(putchom)です。

 2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。

 私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しているのですが、SmartBankでは、より本質的な機能開発に集中できる環境を用意すべく、デザインシステムの構築や運用にも力を入れています。

 私たちはFigmaで「B/43」のサービス内で使用しているコンポーネントをライブラリ化することで、コンポーネントを再生産することなくUIを構築しているほか、Notionでコンポーネントごとのガイドラインを集約して管理することで、どれを使えば良いのかを迷うことなく参照できる環境を用意しています。

 第4回では、このデザインシステム内におけるコンポーネントライブラリに焦点をあて、作成・運用していくうえで工夫している点について紹介します。

これまでのB/43のデザインシステム

 そもそもデザインシステムとは、サービスのブランドをもとにしたデザインの一貫性を保つためのリソース集です。

 SmartBankでは顧客に一貫したブランド価値や利用体験を提供したり、チーム開発を効率化したりするためにデザインシステムを構築しています。

 私が入社した2022年9月ごろのSmartBankのデザインシステムは、Figmaを中心にカラーやコンポーネントなどが整理されている状態ではあったものの、それぞれのコンポーネントの役割や使いわけの方法は明示されていない部分も多く、まだ文章化されていない暗黙のルールも存在していることが課題となっていました。

 これからチームでサービス開発をしていくには、これらの課題を解決する必要があったため、現状を把握するためにまずはこれらのリソースを集めて整理していきました。

各種リソースのマッピング

 集めたリソースがどのように関連して機能しているかをつかみやすくするためには、デザインシステムの全体像を図式化し、既存リソースをマッピングしていく方法が効果的です。スマートバンクではFigjamを使ってデザインシステムの全体像を図式化し、既存リソースのマッピングを行いました。

Figjamで作成したB/43のデザインシステムの全体像
Figjamで作成したB/43のデザインシステムの全体像

 この全体像は『Design Systems デジタルプロダクトのためのデザインシステム実践ガイド』を参考にして作成しました。

機能パターンと認知パターンに分類する

 どのような指針でデザインしていくべきかを言語化した「デザイン原則」をすべての下地とし、リソース全体を「機能パターン」と「認知パターン」のふたつに分類しています。

機能パターン

おもにプロダクトデザインを行う際に用いるリソースです。

各プラットフォームごとのコンポーネントライブラリやコンポーネントをどのように組み合わせて機能させるかを示したパターンガイドライン、より多くの人にサービスを届けるために用いられるアクセシビリティガイドラインなどから構成しました。

認知パターン

おもにコミュニケーションデザインを行う際に用いるリソースです。

サービス固有のドメイン辞書やボイス&トーンを反映したライティングガイドラインといった言語的コミュニケーションに関するリソースと、Logo、Shape、Iconography、Photography、Illustration、Animationなどの非言語的コミュニケーションに関するリソース・ガイドラインから構成しました。

全体に適用される「デザイントークン」と「ボイス&トーン」

 機能パターンと認知パターン全体に適用されるのが「デザイントークン」と「ボイス&トーン」です。

デザイントークン

Color、Typography、Dimension、Opacityなどのデザインをするための最小要素のことであり、デザインシステム全体の一貫性を保つために定義します。

ボイス&トーン

コミュニケーションにおいて使用されるスタイルや口調のことであり、ブランドの個性を表現するために使用されます。ボイスはブランドのパーソナリティをもとにブランドの「喋りかた」を定義しており、トーンはコミュニケーションする文脈や相手による喋りわけかたを具体的に定義します。

この整理を行ったことで、現在のB/43のデザインシステムで改善すべき点や効率化の余地をいくつか発見することができました。

 今回は、その中でも直近でもっとも使う頻度が高いコンポーネントライブラリを再設計していくことにしました。ここからは、コンポーネントライブラリを設計した際にSmartBankで工夫した点をいくつかご紹介します。

 なお、ここで言う「コンポーネントライブラリ」とはデザイナーが管理・構築できるFigmaのコンポーネントおよびNotionで管理されたコンポーネントのガイドラインを指すことにします。

※この続きは、会員の方のみお読みいただけます(登録無料)。