バリアブルを活用したAdyen社のデザインシステム効率化と、Figmaのメリット

Adyenは、成長著しいフィンテック業界において最先端の企業です。同社のファイナンステクノロジープラットフォームは、エンドツーエンドの決済、データ、財務管理まで網羅しています。Adyenが決済フローのすべてを引き受けるため、顧客は複数のプロバイダー管理が不要で、1つのプラットフォームに接続するだけでよいのです。両者は、Win-Winの関係と言えます。

Adyenは、顧客重視の効率的なフィンテックポータルを目指しており、ユーザーエクスペリエンスに重きを置いています。Adyenが70人からなるUXデザインチームを有していることも驚くにあたりません。その構成は、44人のプロダクトデザイナー、15人のUXリサーチ担当者、11人のUXライターです。

これまでは、メンバー全員をまとめることが困難でした。以前のデザインツールでは、プロセスがバラバラになり、ワークフローも効率的ではありませんでした。

そこで、FigmaとFigJamを使用して、デザインシステムとプロセスを効率化しました。

Figmaへの切り替え

Adyenのデザインチームは、デザイン業務を効率化する堅固な基盤が必要なことを認識し、Figmaで「Bento」と呼ばれる新しいデザインシステムを構築しました。現在、すべてのチームがBentoに切り替えている段階です。Bentoは、基本、アイコン、コンポーネント、パターン、ユーティリティ、アーカイブからなり、これは一部のチームが今でも使用しているコミュニティ所有のデザインシステムにある要素です。

Bentoを導入してから、Adyenのデザインチームの業務効率は大きく向上し、構造化されました。「ユーティリティ」を例にとると、これはSOS (System of System)コンポーネントを保存するところで、デザインシステムのドキュメント構築に使われます。「すべてのピースがライブラリとしてチームに配布され、Figmaにより、スタイルやコンポーネントのインスタンスへの変更や更新がとても簡単になりました」とAdyenのデザインリード、Luiza Breier氏は語ります。また、デザインシステムのライブラリはすべてのチームがデフォルトで利用できるとのことです。

興味深い課題の1つが、いかにして各チームが複数のテーマを利用できるようにするかということでした。この課題を解決するために、多層カラーシステムを作成しました。

コアレイヤーにはすべてのカラー定義があり、デザイナーやエンジニアは利用できませんが、デザインシステムチームは選択パレットとして利用できます。コアレイヤーの上部に注釈レイヤーが作られており、色相ではなくUIで色の役割が定義されています。

注釈レイヤーは、デザイナーやエンジニアがプロダクトデザインやビルド作業に利用できます。このレイヤーにより、デザイナーが役割を考慮してプロダクトをデザインできます。

デザイン内の意味に基づくカラーは、さまざまなモード(ライトとダーク)で機能します。Adyenではもともと、このようなカラースタイルを使用していましたが、ライトモードとダークモードの両方でデザイナーにカラーを強制することは望まなかったため、デフォルトではライトモードのカラーだけでした。この問題はバリアブルの導入後に明らかになり、Figmaで解決しました。

Adyenでは、カラー、間隔、ボーダー半径をバリアブルに移行して、すべてのFigmaコンポーネントをこのバリアブルで更新しました。

「バリアブルを使うようになってから、数クリックでテーマを変更できるようになり、完全に自動化されました。デザイナーはライトモードでデザインしたあと、ダークモードに変更して、選択したセマンティックカラーが正しく、ダークモードで期待どおりに機能することを確認できます」とBentoチームのプロダクトデザイナー、Sergii Polkovnikov氏は言います。

Breier氏のチームは、Figmaを使用してプロセスを迅速化すると同時に、デザインシステムの使用方法を理解することに取り組みました。デザイナーはFigma Enterpriseでデザインシステムアナリティクスを使って使用状況を追跡し、Figma APIで独自のダッシュボードも作成できました。

「チームが使用しているインスタンス数にかかわらず、Figmaで使用するコンポーネントのすべてのインポートを追跡できるのです」と彼女は言います。「つまり、コンポーネントがいつ切り離されたかがわかり、切り離されたコンポーネントがハイライト表示されるFigmaファイルに直接リンクできます」

このような追跡ができることで、デザインシステムチームは移行の進捗状況を知り、どのデザイナーがコンポーネントを切り離したかを表示して、そのデザイナーに問い合わせることでそのユースケースがわかります。

FigJamで戦略策定を簡素化

他の面で、ワークフローのコラボレーションも変わりました。AdyenのデザインシステムチームはFigJamを戦略策定のツールとして、また共有のリソースと知識のプラットフォームとして使用しています。いくつかのエリアで、ビジュアルコラボレーションが向上しました。

FigJamを使用して、オンラインのブレインストーミングから、エンジニアリングなど他のチームのステークホルダーが優先事項を考慮できるようにサポートするまで、チーム内外の連携でプロダクトビジョンを最新に保っています。

FigJamはチームの振り返りや四半期のプランニングにも不可欠になっており、コラボレーション方法の検討や、仕事のやり方を改善するための具体的な行動項目の決定で、デザイナーに役立っています。

Figmaによる企業全体の改善

FigmaとFigJamの組み合わせは、アセットを1つのプラットフォームに持ち込むことで、Adyenによるデザインシステムの使用方法を改善し、シームレスなエクスペリエンスを作り出し、高いレベルのコラボレーションになりました。

Adyenはコスト管理を改善できただけでなく、権限管理の編集、部門間のオーナーシップ割り当て、シート使用の最適化なども向上できました。

デザイナーは、作業を簡単に再利用してデザインしたあと、バリアブルを使用して迅速な変更を行い、Figma APIの自動化でデザインシステムのフローを最適化することで、フィードバックを迅速化して時間も節約できます。

しかし、Adyenによれば、Figmaへの移行で最も良かったことの1つは、コラボレーションの促進とチーム全体のファイル共有が進んだことでした。このチームは8人のデザイナーから70人のメンバーにまで拡大しています。

「Figmaはクラウドベースのため、さまざまな部門間で全社的なコラボレーションをして、仕事内容の紹介、インプットとフィードバックの迅速な取得、変化の激しいフィンテック業界での優位性の確保ができます」とBreier氏は言います。