メインコンテンツまでスキップ

サイロからスピードへ: PlaidがFigmaでプロダクトデザインとブランドデザインを統合した方法

米国のオープンバンキングの先駆けであるPlaidは、ユーザーが日常的に利用しているアプリに自分の金融口座を安全に連携できるようにしました。Venmoでの送金やCoinbaseでの暗号通貨の購入、Robinhoodでの投資状況のチェックなどをしたことがあるなら、そこにはPlaidの技術が関わっています。

Plaidの代名詞であるギヨシェ模様をモチーフにしたビジュアルシステム

Plaidは、すべての人に経済的自由をもたらすという壮大な使命を掲げています。これを実現するためにPlaidは、12,000以上の金融機関に対応し、8,000以上のデジタル金融サービスを支えるプラットフォームを通じて、ユーザーが自分の口座をフィンテックサービスに安全かつ簡単に連携できるようにしました。規制の厳しい分野で事業を展開する中で、Plaidは金融イノベーションに不可欠な信頼とセキュリティを確保しつつ、迅速な対応を実現していることに誇りを持っています。

Plaidのリブランド前のウェブサイトインターフェース

Plaidは、拡大に伴いますます複雑化している製品エコシステム全体で、一貫性のあるスケーラブルなデザインを作成するために、デザインシステムを調整する必要がありました。このリブランドは、一旦立ち止まって、その基盤を見直す絶好の機会となりました。Figma Enterpriseは、製品、ブランド、デザインシステムのチームに、部門横断的なコラボレーションを行うための共有スペースを提供しました。

皆でアイデアをシェアすることができる共有スペースを持つことはとても重要です。Figmaではそれをいとも簡単に実現することができました。

Chris Warner、クリエイティブリード、Plaid

課題: 新製品全体における断片的な視覚言語

Plaidの成長に伴い新たな製品が加わった一方で、大きな課題も生じました。それは、視覚的な一貫性を保つことでした。作業はデザインプラットフォーム、プロトタイプ作成ソフトウェア、ドキュメント、ホワイトボードに分散され、それぞれがプロセスの異なる部分を担っていました。

ブランドチームにとって、クリエイティブなフローを維持することはさらに困難でした。チームのメンバーはGoogleドキュメントでブリーフをドラフトし、レビューを行い、それをデザインチームに引き渡しました。作業は、ドキュメントからデザイン、アセットの納品に至るまで、サイロ化された直線的なプロセスで進められていました。この「コンベアベルト方式」では、戦略と実行が切り離されるため、勢いを維持することが困難になっていました。

PlaidのデザインシステムであるThreadsによって、さらに複雑さが増しました。各チームがわずかに異なる仕様のコンポーネントを保有しているため、わずかな変更であっても、依存関係にある複数のライブラリ間で調整が必要でした。

リブランドは、Plaidが共通のデザイン言語を使ってチームを統一する方法を再考するきっかけとなりました。「私たちの創業者は、このリブランドを必ず成功させたいと思っていました」と話すのは、Plaidのデザイン責任者であるChristophe Tauzietです。「しかしそれを実現するには、チームメンバー全員がプロセスに参加し、完全に連携できるようにするための、より迅速で協力的な方法が必要でした」

Plaidの刷新されたビジュアルルックの要素

解決策: デザイン、コラボレーション、システム管理のための統合プラットフォーム

Plaidは、デザイン、プロトタイプ作成、フィードバックツールの迷路を単一の共有プラットフォームであるFigmaに移行し、ワークフローを簡素化しました。

Plaidは、Figmaを使用してカラーバリアブルのテストと適用を行っています

Figma Enterpriseを利用したことで、Plaidは大規模な作業に必要な柔軟性を向上させることができました。バリアブルによって、新しい方向性を試すことができ、オプションを比較し、異なる製品分野全体で変更を慎重に展開できるようになりました。チームは自分たちのペースで新しいカラーテーマやビジュアルアプローチに移行することができたため、リスクが低減し、さらなる実験を促進することができました。

Plaidのテーマ: ライトモードとダークモード

また、タイポグラフィの新しい方向性を容易に探求することができるようになりました。高度なフォント機能のサポートにより、Plaid は新しいカスタムフォントを試し、最終的にシステム内で直接オプションを比較することができました。FigmaのREST APIによって、デザインからコードへのワークフローの一部が簡素化されたため、手動によるステップと翻訳エラーを削減することができました。これにより、デザイナーとエンジニアは、コンセプトから実装までのより明確な道筋を得ることができました。

Figmaは、アイデアを簡単に交換できる共有スペースを提供するという重要な役割を果たしています。私たちは週を通して、皆が集まり、作業内容を展示し、議論することができる批評会を開催しています。

Chris Warner、クリエイティブリード、Plaid

FigJamはすぐに非デザイナーにとっての入り口となり、誰もが直接貢献できるようになりました。この共有スペースはブランドワークショップの場としてスタートしましたが、今ではチームがキャンペーンアイデアを描き、ストーリーの流れをアウトラインし、戦略を形作るためのコラボレーティブハブへと急速に拡大しました。マーケティングチームおよびセールスチームは、ムードボード、スクリプト、初期のビジュアルが1つのキャンバスにまとめられる様子を確認でき、デザイナーとの共同作業によって視覚的発想が可能になり、自信を持って参加できるようになりました。

FigJamで開催されたブランドのワークショップ

また、ブランドの刷新によって、Plaidの各チーム間の連携方法も変わりました。ブランドや製品のチーム、およびリーダーシップが同じファイル上で、しばしばリアルタイムで連携して作業を行いました。Christopheは、CEOがすぐに業務に飛び込んだ様子をこう語りました。「彼は『私もFigmaに加わります。ぜひ一緒にやりましょう』と言って、時間を割いてくれたんです」

唯一の情報源から作業することで、意思決定をより迅速かつ協力的に行えるようになりました。「私たちはリーダーシップチームのために、数か月間にわたっていくつかのワークショップを構成していましたが、すべてをFigJamとFigmaで行いました」とChris Warnerは言います。「私たちは、Figmaでリブランド全体を実行し、デザインシステムのRyan Smith、デザイン責任者、CEO、および会社全体の他のクリエイティブやチームと緊密に協力しました」

製品とデザインのチームが初めて、Figma内で共通の視覚言語を共同作成しました。デザイナーはアイデンティティが製品内でどのように機能するかについてのプロトタイプを作成でき、一方でブランドチームはそれがキャンペーン全体でどのように展開されるのかを調査しました。すべての反復処理は、関係者のフィードバックを取り入れながら、コンテキストの中で行われました。

Plaidのアカウントログインインターフェース

共有所有権を基盤として変化するデザインシステム

まさにこの協力精神によって推進されているのが、Plaidの進化し続けるデザインシステムであるThreadsです。Threadは、厳選された少数のメンバーによって管理される静的なライブラリではなく、信頼と共有所有権を基盤として構築されている生きたフレームワークです。小規模なコアチームが基盤を維持し、会社全体のデザイナーがそれを自分たちの用途に合わせて適応させ、拡張していきます。システムは、共有されるプリミティブの一貫性を維持し、プロダクトチームがそれらをどのように視覚的に表現するかを形作ることができるヘッドレスモデルへと移行しました。

更新を安全かつ効率的に行うために、PlaidはGitHubのエンジニアリングプラクティスを反映させました。変更を分岐し、レビュアーを割り当て、承認後にのみマージしました。小規模で段階的な更新により、システムの安定性を維持しながら、着実かつ柔軟な成長を実現することができました。

Figmaのライブラリアナリティクスでは、チームはシステムが日常的にどのように機能しているかを明確に把握できます。どのコンポーネントが最も頻繁に表示され、どれが取り外されているのかを確認できます。これらのパターンを知ることによって、チームは、デザイナーがどこにより多くの柔軟性を必要としているか、または新しいバリアントが有用であるかを理解することができます。

「分離パターンを確認した場合、すぐに不正使用があったのだと決めつけたりはせずに、まず話し合いを始めます」とPlaidのデザインシステムデザイナーであるRyan Smithは言います。

Plaidの共有ブランドおよびプロダクトデザインシステムは、「強固な基盤があってこそ、新たな可能性を探求する余地が生まれる」という考えに基づいて構築されています。デザイナーは創造的なリスクを取り、アイデアを試し、その成果をシステムチームに提供することで、有望な試みを新たな標準へと発展させることができます。その結果、Plaidのニーズに合わせて進化し、構造、自由、そして好奇心のバランスを巧みに取り入れたデザイン言語が生まれました。

デザイン、エンジニアリング、マーケティングとの間の壁を壊す

Plaidでは、デザインとエンジニアリングが並行して機能し、チーム間の移行を明確に示すハンドオフのプロセスがありました。デザイナーが仕様を準備しました。エンジニアがそれを解釈しました。その過程のどこかで意図が薄れ、勢いが鈍化しました。

Figmaはそのギャップを埋めました。かつては別々に進められていたレビューが、今では同じファイル内で行われるようになり、デザイナーとエンジニアが共有システムと共通の言語を用いて、並んで作業するようになりました。

全員が同じ空間で仕事をするようになったことで、開発者はデザイナーが作業した後ではなく、デザイナーと並んで作業をするようになりました。Code Connectのような機能により、エンジニアはファイルから直接本番環境向けのスニペットを取得できるため、デザインからコードへの移行をよりスムーズかつ迅速に行えるようになりました。

製品開発では、デザイナーと開発者が共通の言語を持つことが重要です。大規模言語モデルでは、その重要性はさらに高まります。Figmaの REST API、Code Connect、および MCP サーバーは、デザインシステムのギャップを積極的に埋めるため、設計からビルドまでのプロセスがよりシームレスかつスケーラブルになり、一貫性が維持されます。

Ryan Smith、デザインシステム、Plaid

この変化は、製品開発の枠をはるかに超えるものでした。現在、一部のマーケティングパートナーは、Figma内で直接ブリーフ、ムードボード、およびキャンペーンフローを構築しています。レビューはより迅速に、より協力的に、そしてプロセスの初期段階で行われ、アイデアから実行までのより密接に連携したワークフローを生み出します。

ブランド動画、カンファレンス、スクリプト、ビジュアル、デザインアセットなどの高い影響力のある作業が、今ではすべて共有スペースに集約されています。その結果、Plaidのクリエイティブプロセスは、同社の製品と同様に、より緊密な連携、高速性、スケーラビリティを考慮して構築されるようになりました。デザイナーは、システムビルダーような考え方をますます取り入れています。エンジニアは創造的なパートナーです。チームは順番にではなく、一緒に作業します。

チーム間の壁が取り払われるにつれて、特にハイブリッドおよびリモートチーム間でのデザインコラボレーションが大幅に改善されています。誰もが創造的なプロセスの一部であり、それぞれの場所から共に作業しています。

Figma Buzzで広告キャンペーンの作成を拡大

Plaidは、特に高度にターゲットを絞ったアカウントベースのマーケティング(ABM)活動のために、増大するキャンペーン作業をサポートするためにFigma Buzzを模索しています。1つのキャンペーンでは、6つのサイズにわたって30から40の広告バリエーションが必要となることがあり、現在ではこれらの大規模なキャンペーンのデザイン、レビュー、配信には最大で1か月かかることがあります。

チームはFigma Buzzを使って、レイアウト、コピー、ビジュアルの一貫性のガードレールを含む、実証済みのキャンペーンパターンに基づいた再利用可能なテンプレートを構築しています。この目的は、部門横断的なパートナーに対して、ゼロから作り直すことなく、自分たちでアセットを作成および適応できる方法を提供することです。

デザイナーにすべてのバリエーションを作成してもらうのではなく、マーケティングチームは自分たちでコピーを調整したり、フォーマットを入れ替えたり、新しいバージョンを生成したりすることができます。「パートナーが独自の広告を作成できるようになれば、私たちはもはやボトルネックではありません。」「彼らはもっと速く動くことができます」とPlaidのシニアクリエイティブリードであるエイミー・ウォン氏は語ります。

これは、各チームがすでにFigmaでブログヘッダーやプレビュー画像といった再利用可能なアセットを作成している既存のセルフサービスハブを基盤としています。Figma Buzzでは、そのワークフローにより多くの構造が導入されているため、チーム間で容易にスケールにしたり利用したりできます。

Plaidは、将来的にはこのアプローチが広告テンプレートにとどまらず、イベント資料やキャンペーンビジュアルなどのその他の再利用可能なアセットにも拡大し、品質や一貫性を損なうことなく、より多くのチームをクリエイティブプロセスに参加させることを目指しています。

目的を持って進化を推進

Plaidは、製品体験から会議やイベント、さらにはニューヨークオフィスの再設計に至るまで、刷新されたアイデンティティをあらゆるタッチポイントで拡張し続けています。チームはすでに創造的なプロセスでAIを模索しており、それを複雑なギヨシェパターンの生成、ムードボードの構築、新しい芸術形式への拡大、初期段階におけるキャンペーンコンセプトの大規模な構想のために使用しています。このような実験によって、作業を迅速に進めて、手作業では実現が難しいアイデアを模索することができます。

Figmaを活用してデザインをスケールするには

優れたデザインは、製品やブランドを差別化する可能性を秘めています。しかし、優れたデザインを一人で作り上げることはできません。Figmaは、迅速かつより包括的なデザインワークフローを通じて、製品チームを1つにまとめます。

Figmaを活用してデザインをスケールする方法の詳細については、当社にお問合せください。

Figmaの主な特長:

  • デザインのアイデア出しから、作成、構築までのデザインプロセスにおけるすべてのステップを1カ所に集約
  • 全社共有のデザインシステムでデザインワークフローを加速
  • ウェブベースでアクセスしやすく、使い勝手に優れた製品を通じて、製品チームのプロセスにおける包括性を促進

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.