2016/06/18 09:31

Sketchでサイズ、スペース、カラーやフォントサイズなどを記入

STEP1: 前提

try

comment

response

no response

STEP2: プラグイン

try

comment

Sketch Measureのプラグインをインストールする。

response

no response

STEP3: カラーリングページの複製

try

image

image

comment

カラーリングしたScreenページを複製してページの名前をMeasureにする。

response

no response

STEP4: サイズ

try

image

image

comment

高さや横幅の指定がある要素にサイズを大まかに記入する。Plugins > Measure > 2.Measure sizeを選択する。Resolution setupは、Standard @1x (px)を選択してOKをクリック。

サイズラベルは移動、削除できるので、見やすい位置に配置し不必要なラベルは削除する。

response

image

STEP5: スペース

try

image

comment

要素と要素のスペース(margin・padding)を大まかに記入する。スペースを記入したい二つのオブジェクトを選択し、Plugins > Measure > 3.Measure spacingを選択する。

response

image

STEP6: カラーやフォントサイズ

try

image

image

comment

カラーやフォントサイズを大まかに記入する。Plugins > Measure > 4.Get propertyを選択する。取得したいプロパティを選択してOKをクリック。ただし、Color formatはColor hex, E.g. #FFFFFF 100%に統一する。また、カラーはカラーパレット以外の色を使っている時に記入するくらいで良い。

response

image

STEP7: 完成図

try

image

image

image

comment

重複しているスタイルは記入しなくて良い。

response

no response

STEP8: 完成ファイル

try

comment

完成ファイルはこちらからダウンロード

response

no response

Track list including this course
Sketchでカラーリング
2016/06/18
teranishi
4
course
  1. Sketchでカラーパレット作成
  2. Sketchでワイヤーフレームのカラーリング
  3. ロゴについて
  4. Sketchでサイズ、スペース、カラーやフォントサイズなどを記入