スマホアプリ、スマホWEB制作アプリSketchのテクニック

Sketchのテクニック

● シンボルを作成していろんなページで同じパーツを使い回す

シンボルにしたいオブジェクトを選択した状態で「Layer」→「Create Symbol」を選択してシンボルを作成。 後はそのシンボルをコピーペーストでいろんなページに配置すれば、シンボル修正時にすべてのページで反映されます

● Sketchのプラグインを検索して自動でインストールする

こちらのアプリ sketchtoolbox をインストールすると簡単にプラグインを追加することができます。
http://sketchtoolbox.com/

こちらのアプリ Sketchpacks for macOS も簡単にプラグインを追加することができます。
Sketchpacks for macOS https://sketchpacks.com/

● Sketchのプラグインを手動sketchplugin手動でインストールする

・その1. プラグインファイル(xxxxx.sketchplugin)をダブルクリックする

・その2. 自力でプラグインフォルダに移動させる

Finderのメニューから「移動」「フォルダ移動」を選択し

~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

移動する。 ここにダウンロードしたプラグインファイルを置く。

● スケッチおすすめプラグイン一覧

・画像、アイコン貼り付け系

・Unsplash It Sketch Plugin(Unsplash Itから自然の風景画像を取得して貼り付けてくれる)
・day-player(Unsplash Itから画像を取得して貼り付けてくれる。ぼかしエフェクト有り)
・Content Generator for Sketch(適当な人物画像データを入れてくれる)
・Craft(適当な画像を生成して貼り付けてくれる)
・sketch-iconfont(Font Awesomeなどのアイコンフォントを検索して使用できるようにする)
・Clipboard Fill(クリップボードにコピーした画像をペーストするだけでクリッピングマスク状態でペーストできる)

・レイアウト系

・Pixel Perfecter( Command + Option + control + P で小数点の値が入っているオブジェクトを自動選択)
・Sketch Guides(「Show Rulers」で定規を表示しているときにガイドを簡単に作成する)
・Autolayout	(レスポンシブ対応のwebページを作成時に自動でセンタリングをキープや背景自動伸縮など)

・ユーティリティ系

・Export All Text(全てのテキストオブジェクトを書き出し)
・Sketch Palettes(良い感じのカラーセットを自動で生成してくれる)
・Sketch Measure	(オブジェクトの情報を簡単に調べる)
・Sketch Page Switch	(ページ切り替えショートカットで行えるようにする)
・Sketch Style Inventory	(スタイルを楽に扱えるようにする)
・Sketch Distributor	(便利な整列プラグイン)
・Duplicator	(連続して複製する)
・Rename It	(レイヤー名一括変更)
・Sort Lauyers	(レイヤーをソートする)
・CSSketch	(cssを編集する)
・Font Finder(同じフォントを選択する)

● 他のレイヤーからスタイルを取ってくる

レイヤーのスタイルをコピー + Option + C

レイヤーのスタイルをペースト + Option + V

● レイヤーの順序を移動

レイヤーを上位に移動 + Option +

レイヤーを下位に移動 + Option +

● カラーピッカーを表示

Ctrl + C

No.1157
07/06 15:25

edit