Developers Blog/記事一覧/デザインデータは、メンバーみんなのもの。Figmaデータの運用方法その1

デザインデータは、メンバーみんなのもの。Figmaデータの運用方法その1

2024/8/28 12:122024/8/29 11:40

はじめに課題プロジェクトの管理方法プロジェクトのフォルダの命名パターンを決めるファイルの作成方法ファイルの命名規則ファイルのページ構造おわりに

はじめに

デザイナーの丸尾です。

みなさんは、デザインツールとして何を使用していますか？

ALTURA XではAdobe XDから移行し、ここ数年はFigmaをメインのデザインツールとして使用します。

現在弊社では並行して複数のプロダクト開発をしています。

とくにプロダクト開発において、デザインデータはデザイナーだけのものではなく、社内全てのメンバーにとっても日々の業務の中で利用するものになります。

そんな多くのメンバーが必要とするデザインデータですが、初期の頃は画面も少なかったため、問題ありませんでしたが、機能が増えていく中で様々な課題が浮き彫りになってきました。

課題

見たいデザインデータが見つからない or 見つかるのに時間がかかる

デザインが膨大で、読み込みに時間がかかる

どれが検討中で、どれがFixしているものなのかわからない

テスト時にどの状態が正しいのか、判断できない

新メンバーのキャッチアップに時間がかかる

デザインの経緯がわからない

最新のデザインがどれなのかわからない

ALTURA Xが開発している健診システムは、特に多くの機能が必要となり、また構造もとても複雑のためデザインデータの運用方法の見直しは、必要不可欠でした。

ここでは、私たちが実際にどのようにデータの運用方法を見直したのかご紹介します。

プロジェクトの管理方法

まず見直したのはデザインファイルの管理方法です。

Figmaのチーム配下に、プロジェクトごとに分けて作成していきます。

プロジェクトのフォルダの命名パターンを決める

プロジェクト単位で取り組んでいるファイルの作業場など

例）

001_Design System

002_Project Name

チームやユーザーに関するファイルを集めた雑多な作業場を作りたい場合など

ファイルの作成方法

続いて、各プロジェクトの配下にマスターファイルまたは機能毎にファイルを作成をします。

Master

FeatureA

FeatureB

FeatureC

ファイルの命名規則

マスターファイル

例）Master_LIFELOG(v.1.0.0)

フィーチャーファイル

例）Feature_ダッシュボード(v.2.1.2)

ファイルのページ構造

Cover	ダッシュボードでの一覧性を担保する為、サムネイル用にPageを作成し、テンプレートファイルをコピー後Cover として設定（フレーム右クリックで設定可能）
デザインリサーチ	インスピレーションとして使用する、スクリーンショットの保管場所
検討	アイデアを具体化、却下されたアイデアを保存する場所
フロー確認	フィードバックのために、Fixしたアイデアを構造化されたユーザーフローにまとめる場所
プロトタイプ	フローでは再現できない、よりリアルにインタラクションやクリックスルーを表現するための場所
実装用マスター	Fixされたデザイン、このデザインをマスターにマージする
Local components	該当ファイル固有のコンポーネントの保管場所

おわりに

これらのプロジェクト・ファイル・ページ構造に変更したことで、抱えていた多くの課題はかなり解決または改善することができました。

次回は、「デザインの経緯がわからない」「最新のデザインがわからない」などの課題について、触れていこうと思います！