FRONTEND CONFERENCE sketch Hands-on

今日の目次

• sketchについて
• sketchの特徴
• インストール
• 基本操作
• 実践お役立ち編
• プラグイン紹介

sketchについて

• SketchはMac専用アプリです。Windows版はありません。
• IllustratorやFireworksのようなツールです。
• アプリやWebのデザイン・UI設計に特化したデザインツールです
• sketch単体ではプロトタイプはできませんが、他サービスとの連携が柔軟なところが特徴です。

sketchの特徴

• 安い（年間９９＄）
• 軽い
• スマホのデザインに最適化されている
• 画像のEXPORTが高機能
• 素材が豊富
  • sketchappsources
    
• プラグインが豊富
  • sketchappsources|plugins
    

インストール


下記よりsketchをダウンロードしてください。
sketchの本家サイト

画面説明



• ページ
  • 
  • レイヤーではなく別のデザインデータ毎に管理するための区切り
    例えばバナーやアイコンなど
• キャンバス
  • 絵を挿入するところ
    
• アートボード
  • 
  • 画面毎の区切り
• レイヤーとグループ
  • 
  • 他デザインツールと同じようにレイヤーを管理する部分
    
• ツールバー
  • 
  • よく使うツールを登録してるところ
• インサート
  • 
    
  • 挿入アイテムのツールボックス

基本操作

• アートボードの作成
  • 
  • a
• 図形の挿入
  • R
• テキストの挿入
  • T
• 色・線・影の選択・編集
  • 
• 複製
  • command + D
• 整列
  • 
• スポイト選択
  • alt + control + D
• カラー登録
  • 
• スタイルコピー/ペースト
  • alt + command + c
  • alt + command + v
• 背面・前面の移動
  • alt + command + ↓
  • alt + command + ↑
• グループ化
  • command + g
• オブジェクト選択
  • commandを押しながら選択
• マスク
  • control + command + m
• スライス
  • 

実践お役立ち編

• デフォルトUIの使い方
  • 
• スタイル登録
  • 
• 座標の計測
  • alt
    
• グリッドの設定
  • 
• シンボル化
  • 
• シンボルのオーバーライド
  • 
• シンボルの差し替え
• シンボルの命名
• Sketch Mirror
  • 
  • ダウンロード
  • iPhoneにてダウンロードしてください

プラグイン

• Sketch Toolbox
  ダウンロード
  • GUIでプラグインをインストール出来るようになります。
• Dynamic button
  • Sketch Toolboxでインストールしてみてください。