chat

AIにTokyo Techiesについて質問する!
開発プロジェクトにおけるデザインワークフローの強化:Figmaを整理する戦略的アプローチ
UI/UXデザイン
文責:
Brian Chang

効果的なデザインワークフローは、特にダイナミックな開発環境において、生産性とコラボレーションにとって非常に重要です。2名からなるデザインチームとして、私たちは最近、Figma環境とファイル構造の再構築の必要性を認識しました。当初は機能していた既存のシステムも、プロジェクトの成長に伴い、効率を阻害し始めていました。

この記事では、時系列に基づいたファイル整理から画面中心のモデルへの移行について概説します。この戦略的な転換により、イテレーションの速度、承認プロセス、および開発者にとっての全体的な明確さが大幅に向上しました。

課題:「開発スプリント」ベースのファイル整理がもたらすいくつかの問題

Figmaファイルの整理における元々の方法は、「Sprint 33」や「Sprint 34」のように、開発スプリントにちなんで名付けられたページを作成することでした。これは論理的な出発点のように思えましたが、すぐにその限界が明らかになりました。スプリントベースの命名法は恣意的であり、以前のサイクルからの特定の画面のイテレーションの検索が煩雑になりました。さらに、個々のスプリントページは、プラットフォームのさまざまな部分からの多様な画面セットや、無関係なデザイン要素の多数のイテレーションを含む、広範なリポジトリへと発展することがよくありました。

このきめ細かく直感的な構造の欠如は、いくつかの運用上の非効率につながりました。新しいデザイナーのオンボーディングは困難であり、開発者は現在のタスクに関連する特定のデザインを見つけるのに頻繁に苦労しました。プロダクトマネージャーやデザイナーにとって、レビュープロセスはデザインが散在しているために複雑になりました。最も重要なこととして、個々の画面の明確で連続的なイテレーション履歴が存在せず、デザインの進化がばらばらのFigmaページに断片化され、意思決定の追跡や以前のバージョンへの効率的なアクセスを妨げていました。

解決策:「ユーザーが使用する画面」を最優先にした設計と、サブページの活用

これらの根本的な課題に対処するために、Figma内で新しい組織化パラダイムを実装し、開発のタイムライン(スプリント)から製品のコアコンポーネント(画面と機能)への焦点の移行を行いました。この画面中心の手法は、いくつかの主要な要素で構成されています。

  1. 各コア画面の専用メインページ: 「ダッシュボード」、「チャット履歴」、「外観」など、アプリケーションの主要な画面または重要な機能に直接ちなんで名付けられたトップレベルのFigmaページを作成しました。これにより、Figma環境内で製品の明確なハイレベルのアーキテクチャ概要がすぐに提供されました。
  2. 開発作業用の「↳ イテレーション」サブページ: 各メイン画面ページ直下に、「 イテレーション」という一貫した名前のサブページを作成しました。このスペースは、その特定の画面に関連するすべての進行中のデザイン作業とバージョン管理の専用ハブとして機能します。
  3. 各画面のメインコンポーネント: 各画面の最終的な本番環境対応バージョンは、それぞれのメインページにマスターコンポーネントとして保持されます。たとえば、「ダッシュボード」ページにはマスターの「ダッシュボード」コンポーネントが配置されています。
  4. 制御されたイテレーションプロセス: 画面の変更または新しいデザインが開始されると、その対応するイテレーションサブページ内で作業が行われます。マスターコンポーネントのインスタンスが切り離され、集中的な編集、レビューの準備、および最終的な開発者への引き渡しが可能になります。本番環境に移行する場合は、メインコンポーネントが適宜更新されます。
  5. セクションによるコンテキストに応じたスプリント追跡: 主要な構造を煩雑にすることなくスプリント関連のコンテキストを維持するために、イテレーションサブページ内でFigmaの「セクション」機能を利用します。たとえば、「ダッシュボード」と「チャット履歴」の両方の画面が「スプリント45」中に更新された場合、それぞれのイテレーションサブページには「スプリント45」セクションが含まれ、そのスプリントの特定の画面に関連するデザイン作業のみが格納されます。画面間のインタラクションが関連している場合は、Frame URLを提供して2つをリンクします。
  6. 全体像を把握するための「すべてのページ」概要: 最後に、「すべてのページ」というタイトルのトップレベルのFigmaページを作成しました。このページは、すべてのメイン画面コンポーネントのインスタンスを集約し、以前は欠けていた、本番環境のアプリケーション全体の最新の統合された視覚的参照を提供します。

成果:明確性、効率性、コラボレーションの向上

この画面中心の組織構造の採用により、デザインと開発のオペレーションが明らかに強化されました。主な利点は、すべての画面の透明性が高く、すぐにアクセス可能なバージョン履歴が確立されたことです。各画面の専用の「→ イテレーション」ページは、過去のデザインの選択肢のレビューや、異なるバージョンの比較を容易にする、明確で時系列的な記録として機能します。

Figmaワークスペース内のナビゲーションは、すべてのチームメンバーにとって大幅に直感的になりました。デザイナーはタスクに必要な正確な画面を迅速に見つけることができ、特定の機能の仕様やアセットを探している開発者は、必要な情報への明確な道筋を得ることができます。これにより、曖昧さが著しく減少し、以前はデザイン要素の検索に費やされていた時間が短縮されました。

Figma環境全体がより論理的に構造化され、メイン画面からそのイテレーション開発までの明確なトップダウンの理解が促進されます。この強化された組織化により、認知負荷が軽減され、デザイナーはコアな責任に集中できるようになります。開発者への引き渡しプロセスも大幅に効率化されました。広範で多岐にわたるスプリントページをナビゲートする代わりに、開発者は、作業に関連する画面のみを含むイテレーションページ内の特定のセクションへの直接リンクを受け取ります。この焦点を絞ったプレゼンテーションにより、プロダクトマネージャーやリードデザイナーのデザインレビューもより効率的になります。

さらに、イテレーションページの構造は、「ビフォーアフター」の状態の提示を自然に促進し、開発者に不可欠なコンテキストを提供し、必要な変更の理解を向上させます。この明確なフレームワークは、以前のバージョンを簡単に参照および比較できるため、より迅速なデザインイテレーションをサポートします。すべての関係者にとっての明確さと理解しやすさの向上は、より効率的なフィードバックループを促進し、承認サイクルの短縮に直接貢献します。

結論:デザインを組織戦略の一つに位置付けることは、企業を飛躍させる原動力となる!

成長を続ける企業内のコンパクトなデザインユニットである私たちのチームにとって、この洗練されたFigma構造は、貴重な戦略的資産であることが証明されました。これは、最新のデザインツールのネイティブ機能を活用した思慮深い組織化が、チームの規模に関係なく、ワークフローの効率と部門を超えたコラボレーションを大幅に向上させる可能性があるという原則を強調しています。この移行は、デザインファイルに秩序と明確さをもたらしただけでなく、開発パートナーをエンパワーし、最終的には、管理上のオーバーヘッドではなく、革新的なデザインソリューションにより多くの時間とエネルギーを費やすことを可能にしました。画面中心の組織モデルは、デザインオペレーションの最適化を目指す他のチームにとっても、堅牢なフレームワークを提供すると考えています。

tt heading

Also Read

No items found.

各種SNSでも情報発信中

ビジネスを次のステップへ
Tokyo Techiesが伴走します
icon down