Peloton、Figmaを活用してデザインを5倍速くハンドオフ

概要:

Pelotonは、世界的に有名なコネクテッドフィットネスのリーダーであり、世界クラスのハードウェアと没入型コンテンツを組み合わせて、世界中の何百万人ものユーザーに刺激と没入感を与える体験を提供しています。製品ポートフォリオが拡大するにつれて、デザインの一貫性を維持し、デザイナーとエンジニアのシームレスなコラボレーションを促進することが最優先事項となりました。

これらの要求に応えるために、PelotonはFigmaエンタープライズに目を向けました。デザインシステムを統一することで、Pelotonはワークフローを合理化し、チーム間のコラボレーションを改善しました。Dev Modeを使用することで、デザインと開発の間のハンドオフが大幅に改善され、非効率が減少し、チームは一貫した高品質のユーザーエクスペリエンスを5倍速く提供できるようになりました。

課題: 手作業の注釈からシームレスなコラボレーションへのプロダクト開発のスケーリング

Pelotonのコネクテッドフィットネスエコシステムが成長し、ハードウェア、ソフトウェア、そして豊富なライブおよびオンデマンドクラスのライブラリを網羅する中で、すべての接点で一貫した顧客体験を保証することがますます重要になりました。

Figma以前は、業界のデザインとコラボレーションツールが断片化されていました。これにより、デザイナーと開発者の間にサイロが生まれ、コラボレーションが非効率になり、デザインの一貫性を維持することが困難でした。中央集約型のプラットフォームがなければ、デザイナーと開発者は、状態や挙動のインタラクションを揃えるために追加の接点に頼る必要がありました。Figmaを導入することが、Pelotonにとって協業を強化するための解決策となりました。

「Figmaはデザインとエンジニアリング間でのデザインシステムのワークフローの採用を容易にし、デザインプロパティとコンポーネントの組織化に一貫性をもたらしました」とPelotonのシニアソフトウェアエンジニアであるJoe Spadaforaは言います。

ChatGPT said:PelotonのデザインシステムであるKineticは一貫性の基盤を提供しましたが、デザイン仕様をさらに明確に定義して共有する余地は残されていました。エンジニアは以前、デザインに注釈を付ける作業に多くの時間を費やしており、チームを整合させ、協業を簡素化し、効果的にスケールするためのより包括的なソリューションの必要性が浮き彫りになっていました。

ソリューション: Figmaでワークフローを接続

Pelotonは約4年前にFigmaに移行することで、デザインワークフローの改善をさらに進めました。最初の1年間は、既存のUIの標準化に焦点を当て、Figmaライブラリを通じてコンポーネントと共有スタイルを構築し、デザインワークフローに構造をもたらしました。

Figmaへの移行により、変数などの新しい機能が活用できるようになり、共有コンポーネントへのアプローチを再考する機会が生まれました。

プロセスを一箇所に統合することで、時間のかかるミーティングや手作業のワークフローの必要性が減り、チームはインパクトのあるユーザーエクスペリエンスの創造に集中できるようになりました。

「Figmaを導入する前は、インタラクションの状態やコンポーネントの動作についてのハンドオフや共同作業のために追加の会議が必要でした」と、PelotonのスタッフデザインシステムデザイナーであるOliver Dumoulinは語っています。「現在では、Dev Modeを通じてその多くを非同期で処理しています。」

Dev Modeは、仕様を明確でアクセス可能、かつエラーのない状態にすることで、Pelotonのワークフローを変革しました。正しいデザインファイルを見つける時間を短縮するなど、些細な改善でも大きな違いを生みました。以前は5分かかっていたことが、Dev Modeのおかげで1分で済むようになりました。

Figmaで製品スイート全体のデザインの一貫性をスケール

Pelotonが製品を導入するにつれ、ハードウェアとデジタルプラットフォーム全体で一貫したデザイン言語を維持することがますます複雑になってきました。Peloton RowやPeloton Guideの開発は中央集約型デザインシステムの必要性を浮き彫りにしましたが、これらのプラットフォームがローンチされた時点ではKineticはまだ構築されていませんでした。

代わりに、Kineticは過去2年間で機能アップデートや改良を通じてこれらのアプリに徐々に統合されました。一方、Peloton Strength+はKineticを用いて最初から構築され、デザインシステムを最初から完全に活用した初のPeloton製品となりました。

可視性の拡大

デザインチームが拡大するにつれ、Pelotonはデザインファイルの整理方法により構造化されたシステムを導入する機会を見出しました。Figma導入以前は、チーム間で互いの作業を把握する手段が限られており、一貫性を維持しコラボレーションを効率化することが難しかったのです。

Figmaエンタープライズへのアップグレードにより、専用のワークスペースが導入され、コラボレーションの構造化と拡張が可能になりました。各ワークスペースは、アプリ、Eコマース、ハードウェアなど特定のプロダクト領域に合わせて設計されており、チームが関連性の高い最新のデザインライブラリを利用できるようになっています。「Central Design」ワークスペースはKineticチームが管理しており、すべての人が自動的にアクセスできるコアライブラリを収めて、単一の信頼できる情報源を提供しています。

バリアブルを活用したスケーラブルなクロスプラットフォームシステムの構築

バリアブルは、Pelotonの拡大するポートフォリオ全体での一貫性向上に役立っています。Figmaエンタープライズ導入前は、PelotonのFigmaアカウントは4つのバリアブルモードに制限されており、チームは各プラットフォームで手動で更新する必要がありました。現在では、12のテーマと24のバリアブルモードを活用することで、チームはプラットフォーム間で即座に切り替え、異なるビジュアルスタイルに対応し、製品全体にシームレスに更新を反映できるようになっています。

Pelotonのベーステーマは、ほとんどの製品の基盤として機能し、Strength+はシグネチャーイエローカラーの専用テーマを持っています。新たにリリースされたソーシャル機能は、Pelotonアプリでチームを作成する際にユーザーがユニークな色を割り当てられるようにする10の追加テーマを導入しました。ライトモードとダークモードの両方をサポートするために、バリアブルモードが実装され、選択されたテーマに基づいて調整される24の動的カラーモードが作成されました。

色だけでなく、タイポグラフィのバリアブルもプラットフォームごとの文字スタイルを効率化します。バリアブルモードを使うことで、デザイナーはフォントを簡単に切り替えられます。たとえばiOSではSF Pro、AndroidではInterといった具合で、文字スタイルを手動で調整する必要はありません。

「バリアブルを使えば、プラットフォーム間で切り替えつつ、色・スタイル・間隔を単一のファイルで更新できます」とOliverは語ります。これらの更新はシステム全体に自動で反映され、手作業を減らすと同時に、すべてのタッチポイントで正確性を確保します。

Dev Modeでイテレーション時間を15分から3分に短縮

Pelotonの高速で進む環境では迅速さが重要です。急速なプロダクト開発に対応するため、エンジニアは最新デザインへの素早いアクセス、明確な仕様、効率的なハンドオフプロセスを必要とします。Dev Mode導入前は、デザインファイルの特定、仕様の確認、レイヤーの手動インスペクションに時間がかかり、ワークフローに複雑さをもたらしていました。

Dev Modeを使えば、正しいデザインファイルを短時間で見つけられます。以前は5分かかっていた作業が今では1分で完了します。以前15分かかっていた手動インスペクションは5倍速くなり、わずか3分で済むようになりました。再利用可能なコンポーネントの特定も、以前は15分かかっていた作業ですが、デザインシステムへの直接リンクのおかげで同じ時間で行えるようになりました。

「以前は、開発者へのハンドオフに複数のツールを使っていました」とOliverは言います。「デザイン管理用のツールと開発ハンドオフ仕様作成用のツールが必要でしたが、Dev Modeが登場してからは、他のツールが提供していたすべてを置き換えました。」

Pelotonは、Dev ModeにJiraチケットを直接埋め込み、チームにコンテキストを提供するとともに、プロダクト、デザイン、エンジニアリングチーム間のコミュニケーションを効率化しています。

「Dev Modeでは、JIRA連携を使ってチケットを通じて進捗を追跡したり、コンポーネントを『ready for dev』としてマークしたり、複数のステータスで利用可能性を管理したりできます」とOliverは言います。「内部ガバナンスプロセスにより、デザインシステムへの追加や変更は、開発者が新しいコンポーネントを実装したり、バリアブルを更新したりする前に、必ずデザインシステムライブラリで承認されます。」

Dev Modeが主要なワークフローを効率化することで、Pelotonはデザインと開発の協業をさらに向上させる方法を模索しています。一部のAndroid開発者は、ハンドオフプロセスを改善する次のステップとして、Code Connectの活用を検討し始めています。

さらに、自動化もますます重要な役割を果たす見込みです。チームは、FigmaのREST APIを活用して、JSONから直接バリアブルの更新をFigmaに同期し、24のバリアブルモード全体での手動更新を削減する方法を模索しています。

プロセスの洗練を続けることで、Pelotonは次世代のコネクテッドフィットネス体験を構築する際、さらに高速に進める体制を整えています。