![](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2015/10/editor_satake1.png)
Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう
![](https://www.tam-tam.co.jp/tipsnote/wpdata/wp-content/uploads/2016/04/ban.png)
Craftについて
プロトタイプで有名なInVisionから出ている、
ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopの無料プラグインです。
公式サイト
http://labs.invisionapp.com/craft
ライセンス
https://labs.invisionapp.com/craft-license
InVision
https://www.invisionapp.com
サポート環境
- OS X version 10.10 〜
- windows 古いバージョンは動くものがあるみたいですが、今後はOSXへ注力するそうです。(こちらの「Is Windows still supported by Craft?」より)
- Photoshop CC 2014.1 〜
- Sketch 3.4 〜
本記事での確認環境
- Craft version 1.2.1
- OS X El Capitan version 10.11.3
- Sketch3 version 3.6.1
どんな機能があるの?
2016年3月現在、4つの機能が使用できます。
Photos [画像機能]
画像をレイヤーに挿入することができます。
複数レイヤーに一括で画像を挿入することもできます。
4つのリソースから画像を引っ張ることができます。
- ローカルフォルダ
- ドロップボックス
- unsplash(海外のフリーストックフォトサイト)
- WEB
![スクリーンショット 2016-03-30 20.48.47.png スクリーンショット 2016-03-30 20.48.47.png](https://qiita-image-store.s3.amazonaws.com/0/54611/78c74540-515f-b240-b76b-0edeaecd543f.png)
WEBからもいけちゃいます。
ブラウザが立ち上がるので
挿入したい画像をクリックします。
![スクリーンショット 2016-03-30 20.45.58.png スクリーンショット 2016-03-30 20.45.58.png](https://qiita-image-store.s3.amazonaws.com/0/54611/e455578c-2944-6635-87e5-db4876f4a4ac.png)
Type [テキストデータを扱う機能]
サンプルデータを挿入できます。
![スクリーンショット 2016-03-30 21.00.45.png スクリーンショット 2016-03-30 21.00.45.png](https://qiita-image-store.s3.amazonaws.com/0/54611/f2fd1172-c481-88e4-9893-aba1132e5fd9.png)
サンプルデータは自分で用意して使用することができます。
![スクリーンショット 2016-03-30 21.00.07.png スクリーンショット 2016-03-30 21.00.07.png](https://qiita-image-store.s3.amazonaws.com/0/54611/c52074ff-34a1-3b08-de8f-227339c99a07.png)
Duplicate [複製]
レイヤーを複製する機能で、複製の方法が2種類あります。
inside Selection
![1.png 1.png](https://qiita-image-store.s3.amazonaws.com/0/54611/4b1e927c-79ab-002c-debb-d390807e8a5b.png)
![スクリーンショット 2016-03-30 20.39.46.png スクリーンショット 2016-03-30 20.39.46.png](https://qiita-image-store.s3.amazonaws.com/0/54611/ec31b131-7fef-c762-c7a8-52da9739ce32.png)
Specific Count
![2.png 2.png](https://qiita-image-store.s3.amazonaws.com/0/54611/32d9d32c-9727-e0c3-c5ab-3a57b83ec4d0.png)
Styles [スタイル]
スタイルガイドを生成することができます。
スタイルガイドを変更すると、
そのスタイルを適用させたレイヤーを一斉に変更することができます。
1.スタイルを決めて「Creat Styles」をクリック
![スクリーンショット 2016-03-30 21.29.52.png スクリーンショット 2016-03-30 21.29.52.png](https://qiita-image-store.s3.amazonaws.com/0/54611/89f7e184-1903-1c51-9859-b4e2f0578f3f.png)
2.スタイルガイド生成
![スクリーンショット 2016-03-30 21.33.41.png スクリーンショット 2016-03-30 21.33.41.png](https://qiita-image-store.s3.amazonaws.com/0/54611/81a8e726-5159-3630-2cf2-00197c6e06a8.png)
3.スタイルガイド変更
![スクリーンショット 2016-03-30 21.24.48.png スクリーンショット 2016-03-30 21.24.48.png](https://qiita-image-store.s3.amazonaws.com/0/54611/ee9f1b40-fc9b-6f01-bf51-64a965cf60f7.png)
4.スタイルガイドの変更が元のレイヤーにも反映される
![スクリーンショット 2016-03-30 21.25.10.png スクリーンショット 2016-03-30 21.25.10.png](https://qiita-image-store.s3.amazonaws.com/0/54611/ea2e4dc1-2046-c259-abc8-c1d5ce3ea42f.png)
インストールしてみよう
1.公式サイトからメールアドレスを送信
http://labs.invisionapp.com/craft
2.着信メールからダウンロード
3.CraftInstallerを起動し、「Install Craft Manager」をクリック
![スクリーンショット 2016-03-20 16.09.47.png スクリーンショット 2016-03-20 16.09.47.png](https://qiita-image-store.s3.amazonaws.com/0/54611/d0515b2d-1c4f-db1c-8d16-34e42610fc4d.png)
4.macの場合はメニューバーにCraftのアイコンが出てきます。sketch3とphotoshopどちらかを選択してインストールします。
![スクリーンショット 2016-03-20 16.11.56.png スクリーンショット 2016-03-20 16.11.56.png](https://qiita-image-store.s3.amazonaws.com/0/54611/03e557a0-4028-3912-1dc4-2e6833f2b19a.png)
参考サイト
https://support.invisionapp.com/hc/en-us/articles/207773013
http://creative-tweet.net/blog/2016/02/invision-lab-craft-impression.html
http://coliss.com/articles/build-websites/operation/design/craft-for-ui-design-plugin.html