whiskers
メニュー
blog

invision シリーズSketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    InVisionを実際のプロジェクトで使って見ていくつか小ネタがあったのでまとめてみました。

    ページ／アートボード

    Sketchで定義しているページ／アートボードですが、InVision側にページという概念がないので、InVision上ではアートボードが基準になることを意識しなければいけません。

    • ページ・アートボード名の先頭に-を付けると読み込み対象外にできる
    • すべてのアートボードはユニークな名前にする（同名のアートボードは上書きされる）
    • ページ名・アートボード名は長すぎると収まりきらないため簡潔にする必要がある。
    • SketchtoolやGulpで書き出しやすいようにページ、アートボード・レイヤー名は小文字が良い
    • アートボードの背景色オプションInclude in Exportはオフにし、InVision側で背景色を指定する（切り出しに背景色を指定したくない場合）
    • マニュアルソート・自動ソートの切り替え可能
    • ページ名にはアセット／ページ等に分けるためのプレフィックスを付けておくと何のページか分かりやすくなる

    状態を表現・管理するには

    Sketchではシンボルに状態を持たせることができません。現状ページに対し複数のアートボードを作りアートボード別に状態を作ることになります。この際、効率化するためにシンボルを使うことになりますがシンボルも状態毎に用意しなければなりません。シンボルはシンボル名を/で区切ることでグルーピングできます。また、シンボルの順番を制御したければ、シンボル名の先頭に数字を付けると順序を入れ替えが可能です。

    レスポンシブデザイン

    SketchとInVisionでレスポンシブデザインを行う場合、デバイス毎のデザインはアートボードではなくファイル自体を分けた方が良いです。欲を言えば別プロジェクトにしてしまった方が良いかもしれません。というのもInVisionでモックを作るためにはアートボードで状態を分けるしかなく、1つのプロジェクトに大量の画面が作られることになります。InVisionは画面のグルーピングができないため、現状プロジェクトを別にした方が管理し易いと思います。

    InVisionSync

    • 複数のSketchファイルをアップロードできる（すべて1つのファイルで行う必要はない）
    • フォントファイルはFontsフォルダに保存することで切り出しまで行ってくれるが、ライセンスに注意する
    • ディレクトリを作り、任意のファイルもアップロード、共有が可能

    How does Sketch artboard syncing work?

    スォッチ

    自身でカスタマイズしても良いですが、とりあえず使えそうなものを登録しておきたい場合はMy Sketch Colorsが便利です。Terminal.appから簡単にインストールできるようになっています。（SketchをAppStoreで買ったか、直接購入したかによってインストールコマンドが若干異なります）

    killall Sketch ; cd ~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application\ Support/com.bohemiancoding.sketch3/ && [ -f "assets-v55.sketchpreset" ] && mv assets-v55.sketchpreset assets-v55.sketchpreset.backup && curl -O https://cdn.rawgit.com/RayPS/my-sketch-colors/master/assets-v55.sketchpreset && open /Applications/Sketch.app ; echo 'All Done!!!'
No matching processes belonging to you were found
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 44002    0 44002    0     0  47402      0 --:--:-- --:--:-- --:--:-- 47364
All Done!!!

    以上、小ネタの紹介でした。

    参考記事

    シリーズ

    1. InVisionでできることまとめ
    2. InVisionでソースファイルやアセットファイルを同期するInVisionSync
    3. Sketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）
    4. InVisionの新機能：プレゼンテーションやレビューに便利なTour Point

    関連記事

    魚を楽しく食べるハック！魚ッカソンに行ってきた #gyockathon

    • Invision, Sketch 3, gyockathon

    InVisionの新機能：プレゼンテーションやレビューに便利なTour Point

    • Invision

    InVisionでソースファイルやアセットファイルを同期するInVisionSync

    • Invision, Sketch 3

    InVisionでできることまとめ

    • Invision, Sketch 3

    コメント・フィードバック