web-dev-qa-db-ja.com

UX設計、プロトタイピング、ハンドオフ、プロジェクト管理、設計システムに最適な「オールインワン」ツールはありますか?

私はeコマースとして運営されている会社で働いており、プラットフォームとしてShopifyを使用しています。私は、上記の会社のプロダクトデザイナーであり、私と上司を含む2人のチームで、同じデザインに同時に取り組むことはめったにありません。

現在、ツールキットには次のものが含まれています。

  • Sketch:ワーキングスタイルガイドとコンポーネントライブラリの構築と更新、およびワイヤーフレームと忠実度の高いモックの設計に使用されます
  • Zeplin:1)開発ハンドオフ、つまり視覚的な仕様、アセットなど2)モックの共有とコメント3)プロジェクトを収容する4)私たちのスタイルを収容するガイド/コンポーネントライブラリ。
  • InVision Cloud:これを基本的なプロトタイピングツールに使用し、プロトタイプを関係者またはユーザーテスト参加者と共有します。チケットとプロジェクト管理にはFavroを使用します(素晴らしいとは言えません)、ドキュメントとデッキにはgoogle docsを使用します

しかし、私たちは無数の問題に直面しています。以下に主要なもののいくつかを、重要度の高いものから低いものの順に概説します。

  1. 設計システムマネージャー:全体的な設計システムポータルで、スタイルガイドとコンポーネントライブラリ、ルールと定義を実行し、バージョン管理を行って更新を管理します(これは本当に難しいことです)今を追跡する)
  2. 高度なプロトタイピング:アニメーション、コンポーネントの状態、インタラクティブな要素、条件/ロジックなどのより高度なものを追加して、開発者/利害関係者により適切に機能を提示する機能。デザイナーがより正確にコードを設計できるようにし、開発者がより多くの作業を行えるようにする、より高度な機能を備えた全体的に強力な開発者の引き継ぎ(FramerXが主導しているようです: https://www.framer.com/development
  3. レスポンシブデザイン:コンポーネントの制約を設定し、レスポンシブなサイズ変更を行うことで、設計をより高速かつ戦略的に行うことができます
  4. プロジェクト管理:プロジェクトステータスの追跡、チームメンバーへのタスクの割り当て、1つのプロジェクト内でのさまざまなプロトタイプと設計ファイルのネスト、およびバージョン管理機能
  5. 注釈とドキュメント-開発者の引き継ぎに関する仕様とドキュメントの注釈を作成するシームレスで簡単な方法(UXpinがこの責任を率先しているようです https: //www.uxpin.com/studio/user-guide/the-uxpin-editor/
  6. ユーザーフロー/サイトマップジェネレーター-これらを生成するツールがあると、手動で行う必要があるのではなく、すばらしいです(OverFlowがこれを行うようです)。

明らかに1つのツールにはすべてがありませんが、私はそこにあるすべてのツールに頭を抱え、どのツールまたはツールの小さなコレクションが私のチームにとって最も理にかなっているかを考えています。何かアドバイス?

1
Jessica G.

この質問に対する正しい答えはありません。当時の私の「教育された」好みは常に Figma に加えて、AsanaやJiraなどのタスク管理ツールです。

TL; Figmaの利点のDRバージョン:Sketchと同じかそれ以上ですが、すべてのプラットフォームとブラウザで使用でき、プロトタイピングとコメントのためにInVisionを置き換えます。開発者をFigmaにオンボードでき、必要なものの最新バージョンを入手できるため、Zeplin。

* Lengthyバージョン

設計システムマネージャー

フィグマはデザインシステムを構築・維持するための設備が整っていると思います。フォントスタイルと配色を定義でき、コンポーネントシステムと実装IMOはSketchよりもはるかに強力です。

高度なプロトタイピングfigmaの プロトタイピング 改善されて、過去2年間で束をやめ、InVisionに匹敵するようになりました。ホバー状態、スティッキー要素、垂直および水平スクロールなどを簡単にエミュレートできます。

レスポンシブデザインレスポンシブでスケーラブルなコンポーネントをデザインできますが、実際には、少なくとも2つのバージョンのレイアウトと、多くの場合2つのバージョンのレイアウトが必要です。各コンポーネント。 html/cssのような柔軟性が必要な場合は、htmlおよびcssで設計する必要があります。

コラボレーション「その場で」のコメントと返信は興奮するものではなく、InVisionやMarvelと同じですが、直接ツールでは、反復時間の削減に役立ちます。

単一の信頼できる情報源ファイルベースのスケッチとは異なり、Figmaファイルはクラウドでホストされ、ライブ更新されます。ファイルバージョンや競合はありません。チームに複数のデザイナーがいる場合、これは巨大です。 1日の終わりにスケッチファイルを同期するのは大変です。必要に応じて、Figmaファイルをオフラインにできます。

さらに、 開発者の引き継ぎ は、Zeplinの必要性や、設計者がアセットを抽出するのを待つ必要性を排除します。

コンポーネントとライブラリコンポーネントはスケッチのシンボルに似ていますが、インスタンスでオーバーライドできるものをより詳細に制御できるため、Figmaの実装は非常に優れていると思います(スケール、テキスト、内部シンボルだけではありません)。ある意味では、Figmaの移植はOOPクラスとインスタンスに近いです。ライブラリをミックスに追加すると、デザインライブラリを作成するための完璧なツールが手に入ります。

私は設計プロセスを構築して、Figmaに関連するすべての設計に加えて、「完了の定義」の薄層とJiraまたはAsanaチケットの関連リンクを作成しました。

2
Jurijs Kovzels