Sketchの図形周りの基本操作｜図形の作成方法から描画に関する細かい部分まで

今回はSketchの図形関連の操作についてまとめておきます。

図形描画系のツール

図形描画系のツールは下記の4つになります。

直線ツールと矢印ツールは、ツールバーの同じカテゴリ内に入れられていますが、性質が「Vector」や「Pencil」に近いので今回は省きます。

図形描画の基本

まずは長方形ツールに切り替えましょう。
切り替えた状態でフレーム上をドラッグアンドドロップすると、長方形が作られて、マウスを離したタイミングで選択ツールに自動で切り替わります。

shiftを押しながらドラッグアンドドロップすると、縦横の比率が変わらないまま図形を描画できて、正方形が作れます。

optionを押しながらドラッグアンドドロップすると、ドラッグ開始位置を中心として図形を描画できます（shiftとoptionの併用で、ドラッグ開始位置を中心にして正方形描画も可能です）。

他にも図形描画途中でマウスを外さずにspaceを押すと、押している間は描画中の図形を移動できます。

図形編集の基本

選択ツールで図形の縦・横・斜めの端をドラッグすると、それぞれの方向に図形のサイズを変更できます。
このときもshiftを押しながらで比率を変えずに変形、optionを押しながらで中央を中心に変形できます。

また、斜め端の図形の内側にある白丸をドラッグすると角丸にできます。

ちなみにこのときcommandを押しながらで、選択した角だけを変更できます。

図形ごとの特徴

基本的な動きはほとんど一緒ですが、図形ごとの特徴をまとめておきます。

長方形と楕円と角丸長方形

長方形の場合は、四隅にある白丸をドラッグして角丸にできます。
正方形を作成して角丸にすると見た目上は円形にもなります。

楕円の場合は白丸は表示されず、Figmaのように円の開始位置や終了位置の選択もできません。

角丸長方形に関しては、長方形の最初から角丸が付いているパターンなだけで、長方形とあまり変わりありません。
そのため、基本的に長方形ツールばかり使うことになります。

三角形ツール

他のデザインアプリケーションでは多角形ツールの角数を3つにすることで三角形を作成することが多いですが、Sketchの場合は三角形ツールとして独立しています。

機能としては三角形が作れるだけで、どの方向からドラッグしても、同じ向きの上真ん中に頂点が来る三角形が描画されます。

スターツール

ドラッグすると星形の描画ができます。

右上の「Center distance」で真ん中の点の位置を指定して、「Points」で頂点の数を指定できます。

多角形

ドラッグして多角形（デフォルトは五角形）の描画ができます。

右上の「Points」で頂点の数を指定できます。
指定できる数は「3」以上で、三角形や四角形（長方形）も一応つくれます。