ツールとチュートリアル

合理化されたチームコラボレーションのためにInVisionのCraftを使用する

チームの何人かのメンバーが古い古いバージョンのスタイルガイドで作業していることに気付いたときに、デザインの変更について話し合うためにリモートミーティングに参加したことがありますか？タイトルのフォントが異なり、ボタンの色が間違っており、最新のデザインでショッピングカートのバスケットアイコンが変更されました。会話は脱線し、新しいログインフローについて話し合う代わりに、人々を正しいファイルに誘導しようとして貴重な時間を費やしています。 app_screens_final-Final-FINAL-noreally-v4.sketch 。

私たちはこのような生活を続けることはできません。

チーム（特にリモートチーム）でのコラボレーションには、固有の課題があります。複数の設計者、開発者、管理者、および利害関係者を同じページに配置し、同じバージョンのスケッチファイルを探すのは大変な作業です。また、デザインの書体スタイルの1つに変更を加えたい場合、それらがすべて同時に更新されることを確認するのは大変なことです。

InVision LABS Craftは、ワークフローと設計および開発チームとのコラボレーションを合理化する、SketchおよびPhotoshop用の強力なプラグインのセットです。 Craftを使用すると、アセットとスタイルの共通ライブラリを簡単に作成および維持し、デザインにリアルタイムで注釈を付けてマークアップし、InVisionに即座にアップロードし、更新をクラウドに同期できます。

I. Craft for Sketchをインストールし、クラウドと同期する

Craftのインストールから始めましょう。 CraftはAdobePhotoshopとSketchの両方で使用できる強力なプラグインのセットですが、この記事ではSketchでの使用に焦点を当てます。まず、Sketchのバージョンが最新であり、Finderのアプリケーションフォルダにインストールされていることを確認します。次に、 https://www.invisionapp.com/craft Craft PluginManagerをダウンロードします。

私はどのタイプのLLCを持っていますか

Craftは、チームのワークフローを最適化するための強力なプラグインのセットです。

ファイルを開き、指示に従ってCraft PluginManagerをインストールします。完了すると、オペレーティングシステムヘッダーのクイック起動アイコンの中にクラフトアイコンが表示されます。それをクリックして、Sketchプラットフォームの各プラグインをインストールすることを選択します。 Craftは、Sketchのバージョンが最新であることを確認し、目的のプラグインがアクティブ化されたら、プログラムをすばやく再起動するオプションを提供します。

Craft Managerは、オペレーティングシステムのヘッダーに表示されます。

Craftの主な魅力の1つは、チームがスタイルを同期できることです。資産 Dropbox、Googleドライブ、Boxなどの一般的なクラウドプラットフォームで共有され、全員が同じライブラリで作業できるようにします。

あなたとあなたのチームはInVisionAppにアカウントを持っている必要があります。 InVisionサイトにログインし、ユーザープロファイルに移動して、[同期]タブを開いて、同期を設定します。そこで、チームがファイルを共有するために使用する優先クラウドプラットフォームを選択できます。指示に従い、InVisionがデバイスのクラウドに同期するための権限を付与します。

スクリーンショット

モバイルデバイス向けのレスポンシブウェブデザイン

共有クラウドを使用してCraftをインストールおよび構成したので、チームの共有スタイルの設定を開始できます。

Sketchでドキュメントを開き、インスペクターパネルの横に表示される新しいCraftパネルを確認します。ここには、Craft Managerでアクティブ化したインストール済みプラグインがあります：同期、ライブラリ、データ、複製、フリーハンド、ストック。チームコラボレーションに関するこの記事の目的のために、私たちは主に同期、ライブラリ、およびフリーハンドに関心があります。

Craftプラグインがインスペクターパネルの横に表示されます。

II。チームのスタイルと共有リソースのライブラリを構築する

Craftのお気に入りの1つは、プラグインのライブラリです。これを使用すると、デザインのスタイルガイドを生成し、スタイルとアセットをチームと共有できます。自分のファイルで作業しているチームメンバーが多数いる場合、全員の作業環境で変更が同時に更新されるようにすることは、大きな頭痛の種になる可能性があります。ライブラリはこのプロセスを完璧にします。

ワンクリックスタイルガイド

スタイルガイドの作成は、多くの設計者が可能な限り延期する設計および開発プロセスで必要なステップの1つです。デザインの複雑さ、オブジェクトとテキストスタイルの数、およびデザイン変更の速度によっては、作業が困難になる場合があります。 Craftのワンクリックスタイルガイドの機能は、ボタンを押すだけでドキュメントからテキストのスタイルと色を生成し、それを独自のシンボルページに保存して、言い訳をすることです。

ライブラリアドオンをクリックして開始し、[ドキュメント]タブに移動します。そこに、ドキュメントにすでに存在するスタイルガイドページを生成するオプションが表示されます。

ワンクリックでスタイルガイドを生成します。

Voilà—Craftは、1つの簡単なアクションでスタイルガイドを生成し、ドキュメントのテキストスタイルと色に追加し、開発者に配布するために整理されたページを作成しました。生きるなんて時間だ！

ラベルを付け直したいものがあるかどうかを簡単に確認し、スタイルガイドを作成することで作業時間を節約するために背中を軽くたたいてください。あなたまたはあなたのチームが行う必要のある変更はすべて、共有クラウドに送信して即座に同期することができます。

まるで魔法のように、クラウド上で共有される、きちんとした読みやすいスタイルガイドとドキュメントスタイルがあります。

魔法のように、クラウド上で共有される、すっきりとした読みやすいスタイルガイドとドキュメントスタイルがあります。

アセットライブラリ

デザイナーとして、私は再利用可能なコンポーネントのパターンライブラリを維持すること、および設計プロセスをスピードアップし、不整合を最小限に抑えるためのスタイルガイドを維持することを大いに支持しています。 Craft Libraryプラグインを使用すると、ヘッダー、フッター、ナビゲーションメニュー、アイコン、ボタン、その他のシンボルをグローバルアセットライブラリに簡単に追加できます。 1つに変更を加えてチームに送信すると、全員が同じシンボルのセットで作業します。パターンを気にする人にとって、クラフトは啓示です！

[ライブラリプラグイン]パネルで、[共有]オプションに切り替えます。ここには、ライブラリをインポートするか、新しいライブラリを作成するオプションがあります。少なくとも1つのライブラリを作成すると、使用可能なカテゴリのドロップダウンリストと、独自のカテゴリを追加する機能が表示されます。アイコンとボタンに別々のカテゴリを作成することをお勧めします。また、ヘッダー/フッター用に1つ、ユーザーアバターなどの再利用されたアセット用に1つ作成することをお勧めします。

組織を配置したら、アイコンなど、ドキュメント内の任意の記号を選択し、スペース[+]をクリックします。パネルでライブラリに追加します。

ソフトウェア開発の仕様書

ヘッダー、アイコン、ボタンなどのグローバルアセットを整理してから、更新を共有ライブラリにドロップします。

あなたとあなたのチームがあなたのデザインで相互作用するとき、あなたはおそらくこれらの共有に変更を加えるでしょう。アセットを更新したら、[変更を送信]をクリックするだけで、チームにリンクされている全員に、「変更をプル」メッセージとともに更新に関する通知が即座に送信されます。

Craftは、ライブラリリソースが更新されると警告を発するため、各メンバーは変更を取得して同期を維持できます。

III。同期とフリーハンドを使用してデザインを共有し、フィードバックを得る

キャンバスをInVisionに即座に同期

電子メールを介したPDFドキュメントの無限のサイクルの時代は終わりました-InVisionを使用すると、クリック可能なプロトタイプを簡単に作成して、チーム全体で共有できます。 InVisionの標準ワークフローは、デザインから画像ファイルをエクスポートし、サイトのプロトタイプにアップロードすることです。 CraftスイートのSyncプラグインは、これらの手順のほとんどを排除します。

Syncを使用すると、チームアカウントのプロトタイプにアートボードを直接追加および更新できます。クラフトパネルの同期機能に移動し、画面から宛先を選択するだけです。ここから、新しいプロトタイプを開始して、フィードバックのためにチームと共有することもできます。

同期により、InVisionプロトタイプを最新の状態に保つことに関して、すべてが信じられないほど簡単になります。

招待状またはリンクを介してプロトタイプを共有すると、チームメートがプロトタイプをクリックしてコメントを追加するのがとても簡単になります。開発者は、検査モードを使用して設計の詳細を調べることができ、仕様作業の時間を節約し、設計の変更に応じてファイルを更新する必要がなくなります。

検査モードを使用すると、チームメートはデザインのスタイルを簡単に確認でき、CSSコードを取得することもできます。

チームを招待して、デザインにコメント、注釈を付け、描画します

Craftは、ホワイトボードを使用して同じ部屋で会議を行う余裕がないリモートのコラボレーションチームのもう1つの問題点に対処します。フリーハンドを使用すると、設計者はパーツまたはその設計ドキュメント全体をキャプチャし、InVisionの共有プロジェクトと即座に同期できます。このプロジェクトでは、チームの全員が注釈を付けたり、コメントしたり、描画したりすることができます。

ドキュメントで、[フリーハンド]パネルに移動し、ドキュメントまたは選択したアートボードからフリーハンドプロジェクトを作成することを選択します。

フリーフォームコラボレーション用のフリーハンドスペースを作成します。

プラグインがフリーハンドスペースを生成した後、誰とでもリンクを共有して共同作業を開始できます。ツールは非常に単純で、Freehandは誰が何を言ったかを追跡するため、シームレスに共同作業するのが簡単になります。デザインを更新すると、パネルを使用してフリーハンドスペースを即座に更新できます。今、誰も混乱していませんこれまさに上司が話している15個のアイコンのうち。

まるでそこにいるかのようです。

IV。独自のワークフローのための追加機能

Craftのチームコラボレーションの可能性に非常に興奮していましたが、スイートには、個々の設計ワークフローを簡素化するのに非常に魅力的な他のアドオンが付属していることがわかりました。

スクラムチームに最適なサイズはどれくらいですか？

Webから架空のコンテンツをすばやく追加する

「待って、そのlorem ipsumテキストはどういう意味ですか？」のほんの数例最終的なモックアップで実際のコンテンツを使用する必要があることを認める前の会議中。しかし、写真、ヘッドライン、投稿、その他の架空のコンテンツをインターネットでデザインやモックアップに載せる必要があるのは誰ですか？ 3番目または4番目の名前の後に、自分の想像力で偽のユーザーを作成するのは難しい場合があります。

データはCraftスイートの素敵なプラグインで、コンテンツの置き換えを新鮮な空気のように簡単にします。レイアウトで図形を選択し、データプラグインに移動して、自分のフォルダーから写真をドロップしたり、任意のカテゴリからランダムなUnsplash画像を即座に追加したりできます。独自のカスタムクエリを作成して、何度も使用することもできます。

Sketchを離れることなく、架空のコンテンツを即座にデザインに取り入れることができます。

見出しや本文のコンテンツなどのテキストを追加するのはとても簡単です。目的のテキストボックスを選択し、[タイプ]タブの多くのカテゴリから選択するだけです。私のチームは、特に「モチベーション」カテゴリのヘッドラインをテストコンテンツとして使用することを楽しんでいます。

ソフトウェア設計文書テンプレートワード

あなたの人生はCraftではるかに意味があります。

このデータを使用すると、ランダム性の低いものが必要な場合に備えて、任意のWebサイトからコンテンツを追加することもできます。プロセスは基本的に同じであり、デザインに実際の関連データをすぐに詰め込むことができます。

均等な間隔でコンテンツの列と行を生成する

生活の中でCraftが必要なもう1つの理由は、オブジェクトとオブジェクトのグループを完全に順序付けられた、等間隔の行と列に非常に高速に複製できることです。面倒なコピー+貼り付けを忘れてください。オブジェクトまたはグループを選択し、列と行の数、および間隔を指定するだけです。

列と行の数、および間隔を指定します。

データプラグインと統合する方法に特に満足しています。データによって生成されたダミーコンテンツを複製すると、すぐに新鮮で生成されたコンテンツが得られます。ユーザーの写真でいっぱいの巨大なグリッドが必要ですか？完了したと考えてください。写真、ヘッドライン、プレビューを含む記事ページのコンテンツリストを設定する必要がありますか？問題ない。

データから架空のコンテンツを入力したら、すぐに完全なリストを作成します。

iStockおよびゲッティイメージズから直接ファイルを追加する

フィラーコンテンツの段階を通過し、の画像が必要ですか？ ヒーロー モックアップの高品質？ Craft Suiteに最近追加されたのは、Stockプラグインです。これを使用すると、SketchデザインをiStockまたはGettyImagesを使用してアカウントに直接リンクできます。パネル内で関連する画像を見つけて、ワンクリックでデザインに追加します。設計ワークフローの中断が1つ少なくなります。

ブラウザを開かなくても、アカウントの高解像度画像をデザインに組み込むことができます。

結論

設計チームは、コラボレーションワークフローを改善し、全員の同期を維持する方法を常に模索しています。 SketchとInVisionは、インタラクションデザイナーの展望を変えました。 Craftは、チームにとってこれらのツールの可能性を高め、距離に関係なく全員のプロセスを合理化および接続します。 Craft for Sketchプラグインセットを使用すると、設計作業の時間を節約できます。