Code Connectのパワーを全開に: デザインシステムチームのためのベストプラクティス

デザインシステムは、製品とプラットフォーム全体で一貫性があり、効率的で質の高いユーザーエクスペリエンスを作るうえで、中心的な役割を担っています。しかし、デザインシステムを管理してコードの一貫性を保つことは、デザイナーと開発者間でコラボレーションする場合に特に困難です。この2つの領域はサイロ化して運用されることが多いからです。デザイナーはユーザーエクスペリエンスを作成して推進することに注力しますが、開発者は、堅牢でメンテナンス可能なコードの構築に集中するからです。共通の言語と統一されたワークフローを促進すれば、新たな機会が切り開かれます。

先月に開催されたFramework 2024には、Bumble、GitHub、HPからパネリストが招かれて、デザイナーアドボケイトAna Boyerと共にデザインをコードにつなぐという課題についてディスカッションを行いました。Code Connectを実際に体験した印象についても語っていただきました。これは開発モードの最新機能で、現在はベータ版を利用可能です。ここに、そのときお話しいただいた要点の一部をご紹介します。

同じ言語で話す

この座談会で取り上げられた主なハードルの1つは、デザインの世界と開発の世界の間に内在する断絶でした。GitHubのスタッフシステムデザイナーであるLukas Oppermann氏は「デザイナーと開発者は少し違う言語で話しています」と指摘します。この言語の障壁は、しばしば一貫性のない命名規則、コンポーネントプロパティの不整合、予想の不一致という形で表れます。HPのデザインシステムストラテジストであるGilson Hoffmeister氏は次のように付け加えます。「コミュニケーションに使って皆が互いを理解できるように、第3の言語を作る必要があります」

デザインシステムは、そのような共通言語として浮上しています。共通の語句、パターン、コンポーネントを定義することで、チームの全員が認識を一致させることができます。共通言語を定めることの役割は、意思決定をコード化することだけでなく、それが見つけやすく実装しやすくなることです。

デザイナーと開発者が各自の場所で会う

「一貫性を保つという点で最も難しいことの1つは、信頼できる情報源を決めることです」と、Bumbleのデザインシステムおよびプラットフォームエンジニア、Raul Menezes氏は言います。この頻繁な断絶が、不整合やカスタム実装、メンテナンスが困難なコードベースの増加をもたらします。Menezes氏は次のように説明します。「このパターンを何度も繰り返していくと、コードベースが増え始めて、追跡できなくなります」

言葉は続きます。「デザイナーはドキュメントを作成するのが常であり、エンジニアリングの段階では、別の情報源に頼る可能性があります」。Code Connectが設計されたのは、そのためです。既存の開発者ワークフローにシームレスに統合して、チームはデザインシステムのベストプラクティスやドキュメントを表示して、直接コードエディター内で配信できます。

導入をシンプルにして小さく開始する

多くのデザインシステムマネージャーが言うように、構築しておけば使われるわけではありません。そのため、採用の障壁を下げて可能な限り摩擦を減らすことが、特に開発者にとって重要です。Hoffmeister氏は、Code Connectがこの点でどのように役立つかを述べています。「開発者はコンテキストを変更しなくてよくなったのです。以前は、デザインがどのように実装されたかをウェブサイトにアクセスして確認する必要がありました」。Code Connectを使用すると、開発者はデザインがどのように実装されたか、開発モードで直接見ることができます。

パネリストたちは、小規模から開始してインパクトの大きいコンポーネントに絞ることなど、ベストプラクティスも共有しました。この方法は、Code Connectをチームに導入するための効果的な戦略になります。「目標は、小さく開始すること」とHoffmeister氏は言います。「Code Connectは私にとって、より大きなものへの第一歩です」

Menezes氏は次のようにアドバイスしています。「かなり小さな、トグルのようなコンポーネントから始めると、そのマッピング方法が理解しやすくなります」

互いの専門知識を活用する

Code Connectの詳細をご覧ください。コードがデザインシステムから開発モードに渡されて、開発者は一貫性を保ってスピーディーにビルドし、効率的なハンドオフができます。

デザインと開発間のギャップを埋めることについて何度も述べてきましたが、両方から持ち寄られる独自の専門知識を認識して活用することも重要です。Oppermann氏はこのように指摘します。「Code Connectを使うことで、デザインとコードをまたもう少し離すことができます。デザインライブラリーを使い、Figmaで作業するデザイナーのために最適なUXを作成することに注力できます。そしてコードの側では、最適な開発者エクスペリエンスを得られます」。それぞれが持つ明確な強みを認識して活用することにより、デザインシステムは、より協力的で効率的なワークフローを促進できます。Oppermann氏はさらに言います。「これは、今すぐ始めることができます。デザインシステムの両サイドで一緒に仕事ができることは、実際にそれを行っている人たちにとって、すごいことです。これは採用にも役立ちます」

継続的なコラボレーションを促進する

このフレームワークセッションでは、Figmaの開発者アドボケート、Jake AlbaughがCode Connectの概要を説明して、開始するためのヒントを紹介しています。

デザインからコードへの効果的なハンドオフは、1回だけのイベントではなくずっと続くプロセスのため、デザイナーと開発者間の継続的なコラボレーションが求められます。Menezes氏は次の点を強調します。「Code Connectは、エンジニアもデザイナーも効率を高めることができますが、それだけではありません。2つのチーム間にあるコミュニケーションのギャップを埋めるのです」。デザインシステムが共通の言語、明確なドキュメント、オープンなコミュニケーションを提供することで、この継続的なコラボレーションを促進できます。定期的なデザイン批評、コードレビュー、フィードバックループが、デザイナーと開発者が協力して共通の目標に向かって仕事をするために役立ちます。

デザインシステムの可能性を最大に引き出す

デザイナーと開発者が各自の場所を移動することなく会うこと、導入プロセスをシンプルにすること、互いの専門知識を活用すること、継続的なコラボレーションを促進することにより、企業はそのデザインシステムの可能性を最大に引き出すことができ、製品開発を円滑に進めて、エンドユーザーのエクスペリエンスが向上します。

Figmaでは、チームが協力してより良い構築ができるよう取り組んでいます。Code Connectはその道のりのスタートに過ぎません。Hoffmeister氏は言います。「Code Connectの出現により、Figmaでできることがさらに増えたのです」。全く同感です。