スケッチチュートリアル

InVisionの新しい設計システムマネージャーについて知っておくべきことすべて(構築方法など)

チームコラボレーション、シンプルに。

彼の名前は今ではおなじみに聞こえるかもしれませんが、Ransom E. Oldsは自動車産業の創始者であり、大量生産の家長であると多くの人に考えられています。たぶん、あなたはオールズモビルについて聞いたことがありますか?彼はあの男です。

この忘れられた先駆者は、彼が世界初の大量生産自動車であるオールズモビルカーブドダッシュの構築を支援した組立ラインの開発に貢献したとされています。今、車があります!

組立ラインの発明の功績は、非常に重要な追加の1つであるため、ヘンリーフォードに寄せられることが多くあります。

組立ラインは、これまでに開発された最も並外れた革新の1つです。初めて、品質を犠牲にすることなく製品を迅速かつ一貫して組み立てることができました。当て推量はありませんでした。ラインから出てくる製品は、常に同じように見え、同じように機能していました。

このコンセプトは、生産を加速し、生産性を向上させるために、すべての業界で改善および適応され、最終的に設計システムを使用した主流の設計プラクティスに取り入れられました。

適切な時点

1人以上の社内設計チームで大規模にデジタル製品を構築している場合は、設計システムの構築を開始するときが来るかもしれません。

高度さと複雑さにはさまざまなレベルがありますが、すべてのシステムには、再利用可能な要素とコンポーネントのコレクションが含まれています。設計要素の要素セットに落ち着いたら、それらを使用する方法と時期を体系化し、設計チームが組み立てラインスタイルの製造のために中央の場所に保存することができます。

InVision Design System Manager(DSM)

私たちは、毎日新しいデザインツールがリリースされるような産業革命を経験していますが、混乱を見通すことは困難です。

さまざまなツールを詳しく調べた後、最終的にInVision DSMプラグインに戻ってきました。これは、InVisionがデザイン配信ワークフローの中心であり、今後もその中心になるからです。エコシステムにとどまることは私にとって理にかなっています。

注:代理店がSketchに非常に深く根付いているため、Studioに切り替えていません。現時点では、費用のかかる切り替えになりますが、除外していません。私は素晴らしいことを聞いており、将来的にはより適切な時期になるかもしれません。

DSMは設計システムのFordであり、選択した設計ツールを放棄することなく、設計システムの更新とスケーリングを容易にするコンセプトの改善を提供します。

スケッチライブラリを使用しないのはなぜですか?

完全に理解できる質問—私は同じことを尋ねました。私が好きな理由は次のとおりです。

  • ドラッグアンドドロップインターフェイス
  • コンポーネントを検索できます
  • シンボルはツールボックスで視覚的に整理されます
  • チームの共有がより簡単に
  • バージョン履歴とバージョン展開
  • 自動生成されたオンラインスタイルガイド

設計システムの構築

InVision DSMで設計システムを構築するために必要なすべてのステップを分析しましょう。本格的な設計システムには通常、設計、哲学、およびコードが含まれていることに注意してください。この記事ではデザインの部分について説明しますが、これは大規模な組立ラインの一部にすぎないことを認識してください。

スタイルとシンボルを既に作成していると仮定します。まだ作成していない場合は、InVision DSMが提供するサンプルデザインシステムであるRenderを使用して自由にフォローしてください。

設計システムのさまざまなコンポーネントを構築していた設計システムスケッチファイルを開き、始めましょう。

ステップ1:ライブラリの作成

InVision Webダッシュボードに移動して、DSMをクリックします。

画面の同期を開始する前に新しいInVisionプロジェクトを作成する必要があるのと同じ方法で、新しい設計システムライブラリを作成する必要があります。設計システムの成長に伴い、システムコンポーネントを複数のライブラリ(デスクトップ用、iOSモバイル用、Androidモバイル用、コアコンポーネント用、製品固有のコンポーネント用など)に分割することをお勧めします。

[新しいライブラリを作成]をクリックして開始します。

ステップ2:プラグインのダウンロード

設計システムの「シェル」の準備ができました。次は、要素、コンポーネント、保存されたスタイルを入力します。

InVision Craftプラグインをまだダウンロードしていない場合は、インストールしてください。以前に使用したことがない場合は、アプリが起動しても何も表示されないため、アプリを開いたときに混乱する可能性があります。 Macのメニューバーにあります。

必ず上部の[ツール]タブでDSMツールをアクティブにしてください。

正しくインストールすると、スケッチ内に新しい垂直ツールバーが表示されます。

ステップ3:ライブラリセクションを理解する

下部の歯車の形をクリックします(Craft Managerでアクティブにしたツールによっては、別の場所にある場合があります)。 DSMツールボックスが新しいウィンドウで開き、新しいライブラリシェルがすでに選択されているはずです。

プロのヒント:Command + Lを押して、このウィンドウを表示および非表示にします!

DSMライブラリは、デフォルトで5つのセクション(「フォルダ」と呼ばれる)に分割されています。

  • 色:システムで使用されるすべての色を配置します
  • テキストスタイル:保存したすべてのテキストスタイルを配置します
  • レイヤースタイル:保存したレイヤースタイル(塗りつぶし、境界線、影など)をすべて配置する場所です。
  • アイコン:ここで、すべてのデザインシステムアイコンシンボルを整理できます。
  • コンポーネント:ここにすべてのシンボルを配置します。

フォルダー

フォルダーは、おそらくDSMで最も便利なツールです。フォルダーを使用すると、設計システムの各部分を思慮深く整理して、それを使用するすべての人にとって意味のあるものにすることができるためです。他のフォルダー内にフォルダーを作成して、より深い組織を追加することもできます(現在は2レベルのネストに制限されています)。

ステップ4:色を追加する

[色]フォルダを選択し、右下の[+]ボタンをクリックします。このカラーパレットに名前を付けるように求めるモーダルがポップアップ表示されます。カラーシステムに基づいて複数のカラーパレットを使用できるため、1つまたは複数のカラーパレットを自由に作成できます。

DSMはドキュメントをスキャンして、使用するすべての色を見つけます。このパレットに追加するものを選択して、[色の追加]をクリックします。

色見本の下のテキストをクリックして、色をもう少し便利な名前に変更します。

DSMでは、ライブラリ内のコンポーネントに説明を追加できます。これは、使用ガイドラインと設計原則を追加するのに最適です。

リッチテキストエディターは非常に優れています。独自の独自の書式設定でハッキングする必要はありません。

ステップ5:テキストスタイルを追加する

まだテキストスタイルを使用していない場合は、すぐに始めてください。テキストスタイルを使用して製品を設計する場合、スタイルを更新してから同期するだけで、ファイル全体でフォントを簡単に更新できます。

とにかく、DSMがすべてを自動的に行うため、テキストスタイルの追加は非常に簡単です。 [テキストスタイル]フォルダをクリックし、右下の[+]ボタンをクリックします。

重複しているように見えますが、そうではありません。左揃えと中央揃えの2つのテキストスタイルを設定しています!

DSMは、ドキュメント内のすべてのテキストスタイルを自動検出します。 [すべて選択]をクリックして、[テキストスタイルを追加]をクリックします。

ステップ6:レイヤースタイルの追加

[レイヤースタイル]フォルダーをクリックして、前の手順を繰り返します。とても簡単!

ステップ7:アイコンを追加する

DSMライブラリにアイコンを追加するために、アイコンがシンボルである必要はないことに注意することが重要です。

!!!非常に重要な注意!!!
DSMは、シンボルの深いネストをサポートしています。つまり、カラーシンボル手法を使用してアイコンの色を変更できる場合、DSMはすべてのネストされたシンボルのファイルを自動的にスクレイピングし、それらをライブラリに自動的にインポートします。つまり、カラーシンボルをインポートする必要はありません。最終的なコンポーネントを構成する個々のネストされたシンボルではなく、最終的なシンボルコンポジットをインポートするだけです。

[アイコン]フォルダーをクリックして、アイコンレイヤーまたはシンボルを選択し、[+]ボタンをクリックして追加します。注:一度に複数のアイコンを選択し、それらを一度に追加できます。一度に1つずつ行う必要はありません。ふう。

アイコンを理解しやすいサブフォルダー構造に整理することを強くお勧めします。後で見つけやすくなります:

私は通常私を次のように分けます:

  • アプリアイコン:TwitterやFacebookなどの製品アイコン。
  • UIアイコン:設定、削除、ユーザープロファイルなどの標準UIアイコン
  • トグルアイコン:チェックボックス、ラジオ、スイッチなど。
  • その他のアイコン:上記のカテゴリに当てはまらないもの。

ステップ8:コンポーネントの追加

あなたは今それのこつを持っているはずです! [コンポーネント]フォルダーをクリックし、[+]ボタンをクリックして、再利用可能な要素とコンポーネントの追加を開始します。

ここで、フォルダー構造を整理します。

DSMは、より大きなシンボルコンポジットを構成する深くネストされたシンボルを自動的にインポートするため、「最終コンポーネント」をDSMにインポートするだけでよいことに注意してください。

上記のチップには、さまざまなアバタースタイル(画像、イニシャル、アイコン)、チップの色、テキストの色を選択できるように、多数のネストされたシンボルがあります。最終的なチップシンボルをDSMにインポートするだけで済みました。デザインシステムのチップを別のファイルで使用している場合、DSMは、同じアートボードサイズのネストされたシンボルを含む、ネストされたすべてのシンボルを持ち込みます。

本当にいいです

ステップ9:システムの展開と使用

必要なすべてのコンポーネントを設計システムに追加し終えると、チームの全員がすぐに使用できるようになります!共有DSMライブラリの最新かつ最高のファイルでファイルを更新するには、[同期]をクリックするだけです。

エンタープライズプランでは、ライブラリのバージョン管理、ユーザーのアクセス許可、ライブラリのアクセス制御など、より洗練された機能を実行できます。

エンタープライズプランで新しいバージョンをリリースする場合は、左上のドロップダウンをクリックして、[新しいバージョンをリリース…]を選択します。

新しいデザインシステムのバージョンが存在します。以前のバージョンを既にリリースしている場合は、[バージョン履歴]をクリックして変更内容を確認できます…

これにより、コンピューターでアプリを更新したときに表示されるのと同じように、変更ログのWebビューが表示されます。

上のスクリーンショットよりも詳細で詳細なものを目指して、チームが何が変わったのかを知ることができます。

チームと言えば、新しいDSMライブラリを使用、編集、管理するために他のデザイナーを招待することになるでしょう。

ウェブインターフェースのライブラリ内から、画面右上の[招待]ボタンをクリックします。他のデザイナーを招待できるポップオーバーが表示されます。

注:エンタープライズプランを使用している場合、このライブラリを表示、編集、または管理(管理)するようにユーザーを招待する機能が追加されます。

DSMホーム画面の[人物]タブにアクセスして、共同編集者を表示、編集し、ライブラリに追加することもできます。

これらの権限と役割は、エンタープライズプランでのみ使用できます。

DSMプラグイン内からこのページにすばやくジャンプすることもできます。

ステップ10:システムを更新する

あなたは新しいデザインシステムの「マスターライブラリアン」であるため、新しいコンポーネントを追加する場合でも、既存のコンポーネントを更新する場合でも、随時更新する必要があります。

更新するコンポーネントを含むフォルダーをクリックしてから、+ボタンをクリックします。 DSMがシンボルが既に存在することを検出すると、次のようなダイアログボックスが表示されます。

新規作成するか、既存のものと置き換えるかを決定すると、変更がDSMライブラリに反映されます。

ライブラリで更新が行われると、設計チームのメンバーにコンポーネントが更新されたことが通知されます。

彼らがしなければならないことは、ドキュメントと同期するライブラリをクリックするだけで、変更はドキュメントに反映され、既存のオーバーライド(テキストなど)はすべて保持されます。

Real-Quick-Side-Note:ライブラリシンボルをいじってはならない人は、共同編集者権限内で管理者または編集者ではなく、閲覧者に設定することができます。不要な変更からシステムを保護してください!

概要

この記事では、ライブラリを作成し、Craftプラグインをインストールし、ライブラリをビルドして、システムを展開する方法を学びました。これで、あなたとあなたのチームは、新しい設計システムを使い始める準備ができました!

InVisionがRenderと呼ばれるサンプルデザインシステムを作成するのを手伝ったので、Webビューでどのように見えるかを確認できます。 SketchファイルとCraftプラグインをダウンロードすると、Renderシステムを開始点として使用して、DSMツールで独自のライブラリのアセンブルを開始できます。

InVisionで完成したデザインシステムを表示するには、上記をクリックしてください!

設計システムを構築していないときは、UX Power ToolsでSketchツールを使用して、より優れた、より効率的なデザイナーにしています。

TwitterでUX Power Toolsをフォローする
Twitterでフォローしてください
LinkedInでこんにちは
代理店のブログからいくつかのことを学ぶ