DUOTONE は Figma でワークフロー全体を運用し、プロジェクトごとに 80 時間以上を短縮

2018年にソウルで創業したDUOTONEは、UX/UIデザインとデザインシステムを専門とする、60名規模のデジタルデザインエージェンシーです。このスタジオは、金融、商業、自動車、コンテンツなど、幅広い業界の企業と提携し、デジタルプロジェクトを提供しています。

同社では5年前にFigmaを全社で導入しましたが、それ以来Figmaは同社のオペレーティングシステムの一部となっています。計画やドキュメントからデザインシステムのアーキテクチャ、視覚的なプロダクションに至るまで、チームはワークフロー全体をFigmaエコシステム内で運営しています。その結果以下のようになりました。

• プロジェクトのハンドオフ時における仕様書作成時間が90％削減され、各プロジェクトの所要時間が80時間以上短縮
• ビジュアル制作作業にかかる時間が20%短縮
• レポートQA時間が数時間から5～10分に短縮

分散したファイルから一つのキャンバスへ

以前、DUOTONEは複数のステークホルダーと複数のドキュメントを利用して作業していましたが、そのためバージョンの競合や引き継ぎの不具合が生じていました。Figmaにすべてを統合してから、クライアントとのコミュニケーションは完全に変わりました。決定や議論はキャンバス上で直接行われ、より効率的なコミュニケーションとハンドオフにつながっています。

開発者へのハンドオフも、はるかに効率的になりました。以前は、設計を完了させるには、別途仕様書を作成し、それをエンジニアに渡す必要がありました。Dev Modeではその段階が不要になりました。エンジニアは任意の要素をクリックすることにより、そのコンポーネント構造、トークン値、フォント仕様、さらにウェブ、iOS、Android向けのすぐに使えるコードスニペットを、デザインファイル内で直接確認できるようになりました。

その結果、ハンドオフ段階でのスタンドアロン仕様書の作成時間が90％減少し、各プロジェクトの作業時間が80時間以上短縮されています。UIに表示される内容と実際の構築方法の間に差異がある場合、デザイナーは関連する画面の横にアノテーションを追加して意図を記録したり、エッジケースにフラグを立てたりすることができます。Jira、Linear、Storybookなどのツールが接続されている場合、デザイン段階での変更がそのまま開発チームのワークフローに取り込まれます。

大規模に製品の一貫性を保つデザインシステム

クライアントからの一般的なリクエストとして、製品を管理するためのデザインシステムをDUOTONEが構築することがあげられます。基準は高く、システムは製品がチームやプラットフォームにまたがって拡大し、また時間の経過にともない拡大する際にも耐えられるものでなければなりません。DUOTONEは、金融、商取引、自動車、コンテンツの各分野でシステムを構築・維持しており、いずれもバリアブルとコンポーネントアーキテクチャを中心にしています。

この手法は車内インフォテインメントプロジェクトで価値あるものとなりました。すべての車両モデルのディスプレイ解像度はそれぞれ異なり、昼と夜、あるいはトンネルに入った時のように、運転環境によってライトとダークテーマがシームレスに切り替わる必要がありました。この要件は複雑でした。

すべてをバリアブルとして定義し、車両の解像度（幅と高さ）、ボタンの高さ、さらにはコーナーの半径までもバリアブル化し、コンポーネントをサイズ別（小、中、大）に分割することで、マスターライブラリ内のトークン値をいくつか調整するだけで、すべての画面が瞬時に更新されるようになりました。数週間かけてすべての画面を最初から描き直す必要はありません。

UIを超えて: Figmaをビジュアル制作に拡張

DUOTONEは、Figmaの拡張AI画像編集ツールキットを活用して、イラストやプロモーショングラフィックなどの視覚的な作業の大部分をFigmaに統合しました。

ベクター化や背景削除といった機能は、ビットマップ画像を自動でベクターに変換したり、背景からサブジェクトを分離したりすることで、これまで複数の専門ツールで行っていたプロセスを省きました。アセットの最終的なトーンと印象（露出、色温度、シャドウ、全体的なムード）も、キャンペーンの他の部分と同じFigmaファイル内で調整されるようになりました。

結果として、キャンペーンビジュアルはコンセプトから完成まで一つのキャンバス上で作成され、ファイルのエクスポートやツールの切り替えによって失われる時間が20%削減されます。

ビジュアル作業とUI作業を同じキャンバスで行うことで、チームのコラボレーションが迅速になります。すべてのデザイナーは唯一の情報源から作業し、リアルタイムでフィードバックを共有し、複数の成果を並べて確認できます。クライアントレビューについても同様で、チームは進行中の作業をそのまま共有し、即座にフィードバックを受け取り、再度見せる前にその場で修正を加えます。

カスタムプラグインで生産性を拡大

DUOTONEは、アセット検索からデザインシステムのメンテナンスまで、各種のプラグインを併用してFigma内での能力を着実に拡大してきました。コミュニティプラグインが十分でない場合、チームはFigmaのプラグインAPIを使用して正確に必要なものを構築し、単発のソリューションから、スタジオ全体の生産性を向上させるため共有される能力を作り出します。

最近の例としては、クライアントへの納品物のためのAIを活用したスペルチェッカーがあります。レポートの校正は以前は複数のデザイナーが手がけていました。今では、プラグインがキャンバス上のすべてのテキストレイヤーを一度にスキャンし、提案された修正をクリックひとつで行うことで、手間のかかる手動のレビューを減らしています。その結果、1レポートあたりの平均品質保証時間は3時間から5分に短縮され、納品直前の修正も減少しました。

チームの誰であっても、退屈で反復的な作業に直面したメンバーがいれば、プラグインを作成することを奨励しています。実際にそうすることが多く、数日以内にリリースされます。最近の例としては、ジュニアデザイナーが更新ログを自動的にコンパイルするプラグインを作成し、手作業でのコピーアンドペーストにかかる時間とそれに伴う小規模なエラーを削減しました。

その結果、スタジオ全体のデザイナーによって構築、維持、拡張された、スペルチェッカー、自動ページ番号付け、グラフ生成器、更新ログコンパイラなどの各種のプラグインのカスタムライブラリが拡大しました。Figmaで構築するという文化が、スタジオの運営方法を変革しました。Figmaはもはやデザインが行われる場所というだけではなく、DUOTONEの作業方法を拡張するプラットフォームになっています。

手動維持からAIによるメンテナンスへ

デザインシステムは構築するよりも維持する方が多くの労力を要します。ライブラリが進化すると共に、トークンの整理、命名規則の調整、ファイル全体の一貫性の確認といった運用上の負担も増大します。

DUOTONEはこれを解決するために、FigmaをAIエージェントの信頼できる情報源にしました。FigmaのMCPサーバーとプラグインAPIを通じて、ClaudeやCursorのようなエージェントが、DUOTONEのライブラリを、完全なデザインシステムのコンテキスト（コンポーネント、バリアブル、トークン、命名規則）で読み取り、不一致を見つけ、トークン化が必要な値にフラグを立て、チームの慣例に従った修正を提案します。チームが提案をレビューし承認すると、更新された情報はバリアブルとしてFigmaに戻ります。かつてはシステム作業に何日も費やしていたものが、はるかに短時間で済むようになります。

チームはこのパターンをさらに展開し、Figmaファイル内の仕様およびコンポーネントデータからAIが機能要件ドキュメント（FRD）のドラフトを直接作成するワークフローを試験的に導入しています。キャンバス上の視覚的な決定が、構造化された情報に自動的に変換され、デザイン、プロダクト、およびエンジニアリングのハンドオフの間の食い違いを削減します。同じコンテキストフローにより、AIがシステムと一貫性のある新しいデザイン作品を最初から生成することも可能になります。その結果、保守やドキュメント化の作業はAIに移行され、デザイナーは自分にしかできない仕事に集中することができます。

OPENPATH: DUOTONEの専門知識がコミュニティのプレイブックに

DUOTONEは、OPENPATHを通じて、その専門知識をデザインコミュニティと共有します。これは実際のクライアントの仕事から構築された社内教育プラットフォームです。当初は内部の研究開発作業として始まったものですが、今では何年にもわたるプロジェクトの教訓によって形作られた公的なリソースに成長しました。

カリキュラムはツールの訓練にとどまらず、実際のクライアント作業で徹底的にテストされた方法論が対象となっています。具体的には、洗練されたバリアブルベースのデザインシステムを構築すること、プラグインによりプロセスを合理化すること、AIエージェントをデザインのワークフローに接続することがあげられます。デザイナーはOPENPATHからデザインスキルだけではなく、仕事の納品時にエージェンシーが実際に行うことも学びます。ジュニアデザイナーは修了時に、すぐに貢献できるしっかりした基礎知識を身に付けています。これで、通常のキャリア初期の仕事に伴う間違いを減らします。シニアデザイナーは、専門分野、さらにはデザインの役割自体の進化に適した新しい働き方を学びます。

DUOTONEにとっての目標は、ただ目立つスタジオになることではありません。それは、業界全体でデザインの水準を上げることです。絶え間なく拡大するFigmaのエコシステムとともに、DUOTONEはデザイナーがAIを活用する新しい方法を開拓し続け、その人たちが本来すべきことを多く実行し、本当に重要なことに集中できるようにします。