初めまして。オフィス狛 デザイン部です。
プログラム系の記事以外にも、デザイン系の記事も増やしていこう！・・・と言うミッションがデザイン部に課せられたので、
これからどんどん記事を書いて行こうと思います。よろしくお願いします。
さて、突然ですが、皆様はInvisionをご存知でしょうか？
InVision | Digital Product Design, Workflow & Collaboration
Invision は簡単にモックアップが共有できるとても便利なサービスです。
しかし、ページ数の多いプロトタイプを作る際、
現状は psd 形式のデータを直接アップロードすることは不可能な為、
Photoshop ユーザーの場合、複数のアートボードで作ったモックをわざわざ png などの
形式に書き出してアップロードするのですが、やっぱり少し面倒です……。
Craft というプラグインを利用すれば簡単にプロトタイプが作成でき、更新も１クリックで便利です！
ただ、Photoshop で連携させるのに少し時間がかかってしまったので、今回は連携の手順をご紹介させて頂きます。
慣れてしまえば１分程度で Invision に同期できるようになりますよ！
① Invision上にプロジェクトを作成。
最初にInvisionのマイプロジェクトページの＋ボタンを押します。
プロジェクトタイプを選択する画面に遷移するので「PROTOTYPE」を選択します。
次のページに遷移したらプロジェクト名と表示端末を選択します。
この時点で空のプロトタイプが完成しています。
② 便利なプラグイン、Craft をインストール。
ファイルのアップロード方法を聞かれるので「SYNC YOUR PROJECTS」の下のダウンロードボタンをクリックしてください。Craftのインストーラーのダウンロードが始まります。
Craftのインストーラーは公式サイトからもダウンロードできます。
インストーラーを使い、Craftのインストールが終わるとPCのツールバーにCraftのアイコンが表示されます。
Photoshop版のインストールボタンを押すとインストールが始まります。
インストールが終わったらPhotoshoを起動（起動していた場合は再起動）しましょう。
Photoshopメニューバーの「ウインドウ」から「エクステンション」を選択してください。
「Data」「Duplicate」「Duplicate」「Freehand」「Stock」「Sync」が増えていればインストールは成功です！
③ InVisionと連携させる。
Invisionと同期するのに使用するのは「sync」機能なので今回は「sync」をクリックしてください。パネルにsyncパネルが追加されます。
パネルが出てこない場合アイコンをクリックするとsyncパネルが出てきます。
ログインを促すメッセージと「Sign in to InVision」というボタンが出てくるので、ボタンを押すとメールアドレスとパスワード入力欄が出てきます。
InVisionに登録したメールアドレスとパスワードを入力しsign inボタンを押せばInvisionとPhotoshopの連携ができました！
④ プロトタイプを完成させる
さあ、プロトタイプにページを追加してみましょう！プロトタイプに追加したいファイルを Photoshop で開きます。
syncパネルを開き、タブから自分が制作した同期したいプロトタイプを選択します。
アートボード全てを同期するか、選択したアートボードのみ同期するかとサイズ（1xか2x）を選択し、「sync to InVision」ボタンをクリックします。
選択したプロトタイプを確認するとページが更新されているかと思います。
同じ手順でアートボードを最新の状態に更新することもできます。
いかがでしたでしょうか？
今回インストールしたCraftは他にも色々な機能があります。
ダミーのテキストや画像を自動的に挿入してくれたりする機能が代表的ですね。（ちなみに、私は多機能すぎてまだ使いこなせていません）
使いこなせば、さらに時短になると思うので皆さん是非使ってみてください！
Craft , Invision , Photoshop
https://clippingpathgraphics.com/
返信削除