invision シリーズInVisionでソースファイルやアセットファイルを同期するInVisionSync
InVisionSync
InVisionを使ってプロジェクトを管理する際にソースファイルを同期しスライスの自動書き出しをおこなってくれる便利な機能がInVisionSyncです。InVisionSyncをインストールし、ソースファイルをアップロードすることで使えるようになります。フリー版でも利用可能です。
主な機能
主な機能はこの3つ。
- ソースファイル（
.sketchや.psd、.ai）の自動同期 - デザインデータからアートボード・スライスの自動書き出しと同期
- フォントファイルの同期（ライセンスに注意）
InVisionSyncの便利なところ
なんと言ってもソースファイルの自動同期とスライスの自動書き出しです。同期が実行されると変更箇所を検知してブラウザ側のプレビューなども自動で更新されます。変更はすべてアクティビティに履歴が残り、画面（アートボード）毎にリビジョンが作成されます。
InVisionSyncの使い方
InVisionSyncのページの下部にダウンロードリンクがあります。アプリケーションファイルをダウンロードしたらインストーラーを使ってインストールを実行します。インストールが完了するとアカウント情報を要求されるので入力して初期設定を済ませます。インストールが完了するとユーザーディレクトリ内にInVisionフォルダが作られます。これでInVisionSyncの準備は完了です。
あとはサイトからプロジェクトを作成し、Sketchファイルをアップロードします。アップロードが完了すると下記のようにデザインデータのアートボードをもとにスクリーンが定義されます。
アップロードしたSketchファイルはInVisionフォルダ内のプロジェクトディレクトリ > Assets > Source Filesに保存されます。以降はこのファイルを編集することになります。ただし、InVisionSyncが起動していないと同期が行われないことに注意してください。
変更履歴とリビジョン
誰がどのスクリーンを変更したのか、アクティビティでチェックできます。
変更された内容はスクリーン単位でリビジョンが作られ、時間軸で変化をチェックすることができます。
変更が加えられた際、ファイル自体のリビジョンも作られ、復元が可能です。
実際にアップロードしたプロジェクトがこちら。プレビューはパスワード制限を付けなければ外部に公開可能です。コメントも受け付けられるのでアカウントがなくてもレビューすることができます。
InVisionSyncの注意点
InVisionSyncは複数のアカウントを同時に同期することができません。InVisionフォルダの中のファイルは残りますが、アカウントを切り替える際、アカウント情報の再入力が必要です。複数アカウント管理できるようになると便利なんですけどね。
もう少し無料で使い込んでみたらProfessional版も試してみたいなー、評価版とかあれば使いたいのだけど。
シリーズ
- InVisionでできることまとめ
- InVisionでソースファイルやアセットファイルを同期するInVisionSync
- Sketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）
- InVisionの新機能：プレゼンテーションやレビューに便利なTour Point