SketchのプラグインCraftの使い方(インストールとコンテンツの挿入)
Craftとは
Craftとは、inVISIONが提供するSketchとPhotoshop用の無料プライグインです。
SketchでUIデザインするときに便利な機能がたくさんあります!
Craftのダウンロードとインストール
トップページにメールアドレスを入力し、「GET CRAFT NOW」をクリックしてプラグインをダウンロードします。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/crafttop-1-1024x567.png)
ダウンロードしたファイル「CraftManager.zip」を解凍し、アプリケーションフォルダに移動します。Craftを起動するとMacのメニューバーにアイコンが表示されます。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/macmenu.png)
追加されたアイコンをクリックし、進めていくとスケッチ用プラグインのインストール画面が表示されます。「install」をクリックしてプラグインをインストールしましょう。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/craftinstall.png)
インストールが完了するとSketchにメニューが追加されます。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/crafttool-1024x669.png)
画像やテキストの流し込み
Dataパネルを使って、画像やテキストの流し込みをしてみましょう。
①Dataパネルを開きます
②Photosを選択
③新しい画像を使う場合、開いてるブロックをクリックします。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/data1.png)
④アイテム名や使う写真のディレクトリを選択します。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/data2.png)
準備が整いましたので、画像を挿入したいところをクリックして、Dataパネルを使ってみるとどうなるか見てみましょう。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/data3.gif)
画像があっという間に追加されましたね。
テキストも「Type」から同様に追加できます。
コンテンツの複製
デザインを作る上で同じものが並ぶ場合はありますよね。
duplicate(複製)パネルを使って、画像やテキストの流し込みをしてみましょう。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/duplicate1-1.png)
複製したい方向のフォームに複製したい「数」と「間隔」を入力します。
青いボタンを押すと複製されます。
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/duplicate2-915x1024.gif)
もしも、コンテンツ素材があらかじめ用意されている場合は、先に「画像やテキストの流し込み」で利用した「Data」パネルを利用しましょう。
あらかじめ「Data」パネルから素材を流し込んでいると、ランダムに画像とテキストが挿入されます!
![](https://blog.splout.co.jp/wp-content/uploads/2019/06/duplicate3-768x1024.gif)
あっという間にコンテンツが複製されましたね。
Craftには、プロトタイプ作成など他にも様々な便利な機能がありますので、改めて紹介したいと思います。