UX開発者と協力する方法
現在、私のチーム（製品チーム）は、UIの改善と機能強化のモックアップを、苦労してつなぎ合わせたスクリーンショットを使用して設計しています。次に、それらを開発チームに複製しようとするテクノロジーチームに渡します。
複製は私たちが作成したデザインでは決してないため（そして常に色を少しずつ変えたり、形状、位置などを変更したりするため）、これは遅く反復的なプロセスです。
これを行う簡単な方法はありますか？基本的なフロントエンドを作成し、バックエンドにプラグインさせますか？
AxureやFigmaなどの優れたワイヤーフレームツールを使用すると、HTML/CSSコードをエクスポートできます。 （一見スケッチもそうですが、使ったことはありません）
もちろん、それはまだ機能していて、単にコピーして貼り付けることはできませんが、現在の方法よりも作業は大幅に少なくなります。開発者は、スクリーンショットから推測したり抽出したりする代わりに、必要なプロパティをすばやく正確に見つけることができます。
以下に、例を示した役立つリンクをいくつか示します。
Figma
私はFigmaがiOSとAndroidのオプションも提供しているため、追加の拡張なしの自然な形で）これで本当に最高の仕事をすると思います。
アクスル
Axure-HTML出力の表示と共有
-これは基本的に生成されたプロトタイプHTMLです。
クラウドベースの製品に新しく導入された機能は、実際には開発者の引き継ぎに合わせて調整されているようです： Axure Cloudの新機能：Inspect Your Designs
スケッチ
そして、私はこれもスケッチのために見つけました：
スケッチアートボードとアセットを開発者に引き渡す方法hand—彼らのOSに関係なく ：
開発者がファイルを開いてクラウドに保存し、元のスケッチファイルを（Sketch形式で）ダウンロードできるようにする場合は、— Avocode が適しています。
Michael Laiのコメントに心から同意します。実験できる優れたツールがあるかもしれませんが、プロセスとチーム構成を確認することは少なくとも同じくらい重要です。
悲しいかな、これはここのディスカッションスレッドで取り組むことができる試みであるとは思えません…
PS：このスレッドにはすでにいくつかのツールの提案があるので、このリストに Abstract を追加します。これは、チーム内で設計をレビューし、開発者に引き渡すための優れた検査機能とコメント機能を備えたデザイナーにgitのようなバージョン管理を提供します。
私たちのUXチームの全体のワイヤフレーミング/コンピングプロセスは、スケッチと抽象を中心に構築されており、非常にうまく機能します。
Abstractの背後にある会社は、プラットフォームを効果的に使用する方法に関するオンラインセミナーも提供しています。これは、プロセスとツールを連携させるのに役立ちます。
残念ながら、現在のみがSketchをサポートしています…
私はテストの目的でHTML/CSSプロトタイプを作成しますが、主に命名規則とコードメンテナンスに関して独自の標準があるため、そのコードをリサイクルするようにDevチームに依頼しません。 Sketch、Invision、Adobe XDは、最新のCSSプロパティに基づいています。つまり、これらのツールで作成されたモックアップは、CSSに簡単に変換できます。ビジュアルデザインのDevハンドオフでは、InvisionのInspectモードがその方法です。
私のプロセスに大いに役立ったのは、開発者を早い段階で紹介することです。制約について前もって話し合うか、制約がない場合は、期待し、設計にフィードバックしてもらいます。反復プロセスは理想的であり、あらゆる機会でデザイン（またはデザインの一部）をテストすることができました。
インタラクションを作成して開発者に引き渡すためのコードを生成できるUXPinやAxureなどのツールが必要なようです。 「基本的なフロントエンドを作成する」とはどういう意味ですか？ UIと設計チームが、開発者が使用できるUIフレームワークとライブラリを作成するということですか？デザインチームにフロントエンドコードを実行できるメンバーがいない限り、商用ツールがデザインとコードのギャップを埋めるのに役立つと思います。
別のチームとの共同作業に関連する3つの異なる要素を検討してください。
- プロセス-各成果物がどのように作成されるかを理解できる明確に定義されたプロセスがあり、それによって明確な方法でロジックを計算できますか？
- コミュニケーション-フィードバックを提供し、双方向で簡単にコミュニケーションできる確立されたコミュニケーションチャネルはありますか？
- 人々-必要な仕事の種類に適したスキルセットと態度を持つ人々はいますか？知識やスキルにギャップがあり、効果的なコラボレーションを妨げていますか？
設計システムは、設計および実装プロセスの実行方法に関するルールを確立し、すべてのリソースと資産を中央の場所に配置するため、設計/開発ワークフローのプロセスの側面を合理化する1つの方法であり、そのため、非常に効果的なレベルです。
コラボレーションツールを使用すると、チーム間のコミュニケーションをより効果的に行うことができます（Invision、Slackなど）。ただし、プロジェクトに費やされる時間と労力のオーバーヘッドを増やすこともできます。
設計および開発チームに適切な人材（つまり、フロントエンドを理解しているデザイナーとUX設計を知っている開発者）がいることは、設計の引き渡しから実装までのスムーズなワークフローを作成するために必要な知識と理解のギャップを埋めるのに役立ちます。
設計者が開発者と効果的に作業できるようにするには、これらの各側面に対処する必要があると思います。これは、単にツール、プロセス、または人を取り込むだけでなく、作業するプロジェクトに3つすべてを合わせるだけの問題だからです。
