Sketchの基本。

Sketchの基本。
Sketchの基本。
Buy on Leanpub

Introduction

この書籍について

この書籍では、Sketchの基本的な使い方にフォーカスし、各機能を詳細に解説した電子書籍です。

※本書に掲載した会社名や製品名などは、各社の商標・登録商標です。

Sketchとは

SketchはBohemian Coding社が開発するベクタードローイングツールです。2013年5月、Adobe Fireworksが事実上の開発中止を宣言された際に、代替ツール(当時はSketch 2)として一躍脚光を浴びました。

モバイル・デスクトップアプリのユーザインターフェイス(UI)デザインにフォーカスしたツールですが、ウェブサイトデザインをはじめ、プレゼンテーションスライドの作成など、UIデザイン以外にも利用することができます。

デザインツールということで、PhotoshopやIllustratorと比較されることが多く、機能的な面でバージョンを重ねてきたこれらのアプリには及ばない部分は多岐に渡ります。しかし、UIにデザインに特化したツールならではの機能も備えながら、最低限必要な機能がコンパクトにまとまっており、それゆえに動作も軽快なアプリケーションに仕上がっています。

またAdobe Experience Design(XD)やAffinity Designerといったデスクトップアプリや、クラウドベースのFigmaなど、競合とされるツールが次々とリリースされています。

こうしたツールはどうしても「つくること」にフォーカスしてしまいますが、プロジェクトメンバーやクライアントとどのようにコミュニケーションをとるか、「デザイン」をつくった後のオペレーションはどうするかなど、ただ単に「デザインをつくる」という基準で選ぶことができなくなりつつあります。

特に「このツールを使っておけば、今後も安心」といったことではなく、それぞれのツールの特性を理解し、ケースバイケースで使い分けが必要となってくるでしょう。

その中でもSketchは、サードパーティが提供しているウェブサービスへの対応が多く、足りない機能は強力なプラグインシステムによって拡張することができるため、旧来のワークフローでは考えられなかったことができるようになっています。

Sketchを使うことで、そうしたワークフローを再考するきっかけとなり、そしてあなたの手になじむツールになるために、この電子書籍が一助となれば幸いです。

以下の項目についてご注意ください。

  • macOS Sierra 10.12.6 + Sketch 47.0で執筆・確認しています。公開されているVersion historyを元にアップデート内容を確認しておりますが、完全に検証できていない場合もあります。また、最新版を元にしているため、古いSketchでは書籍に掲載している内容と実際の機能に違いがでる場合もあります。
  • 内容の修正については、アップデートで変更があった部分を優先的に差し替えているため、スクリーンショットで使っているOSのバージョンが統一されていませんので、ご了承ください。
  • ショートカットはUS配列キーボードを前提に設定されているため、JIS配列キーボードでは正しく動作しない場合があります。
  • Leanpubを利用して電子書籍を生成しているため、レイアウトなどはシステムに依存です。また画像が圧縮された結果、実際の表示とは異なる可能性もありますので、合わせてご了承ください。

この電子書籍以外の書籍をお探しの方

紙のSketch単著としては、2017年5月23日に発売されたUIデザイナーのための Sketch入門&実践ガイド(BNN新社・著者 吉竹遼氏)があり、基本的な使い方からチュートリアルまで幅広く学べます。

また、Sketchでできることをもっと俯瞰的に知りたい方は、少し古いですがこもりまさあき氏の著書「Sketch 3 Book for Beginner」もあります。

01_Sketchの基礎

Sketchを使う上での基礎知識

すべて英語

英語圏のアプリケーションであることから、メニューからツールバーの至る所まで基本的に英語です。ただ、そこまで難しいものではないため、使っていくうちに慣れるでしょう。

キャンバス/アートボードは透明

キャンバスやアートボードは白く見えますが、透明の扱いです。書き出しで白が必要な場合は、背景に白い矩形を配置しましょう。またアートボードの設定で背景色が指定でき、それを書き出しにも含めることができます。

プリントメディアには不向き

アートボードがプリセットされている紙の規格サイズを見る限り、1inchを72pxとして算出された値になっています。つまり、Sketch自体はpxに固定されているため、mmやcmなどの単位で指定するにはpxへの換算が必要となります。またRGB以外のカラースペースを扱えないため、Illustratorの代わりに印刷物を作成することはできません。確かにPDFとして保存はできますが、それを印刷データとして印刷所へ出すのはおススメしません。

レイヤーが多くなると描画が遅くなる

Adobe Illustratorとのパフォーマンス比較の動画がアップされていましたが、確かにレイヤーが多くなると描画が遅くなる傾向があります。これはグループ化を適宜することで、ある程度は回避することができます。またページをうまく利用し、レイヤー数をコントロールしましょう。

また、アップデートでもパフォーマンスの改善が頻繁にされています。

ドキュメントの検索

Help → Search」から、ウェブ上にあるドキュメントを検索することができます。また、メニュー項目もキーワードがヒットすればハイライト表示できますので、アップデートでいつも使っているメニューがなくなってしまった場合は、検索してみるとよいでしょう。

日本語の扱いが苦手

日本語(和文)自体は扱えますが、細かい組版や縦書きのサポートなど、日本語(東アジア圏)特有の機能はサポートされていません。

特にOpenTypeフォントの行間を任意に設定するとバウンディングボックスがずれるバグがあり、対応待ちの状態です。

基本操作

コピー&ペーストと複製

コピー&ペーストした場合、コピー元の同一の座標にペーストされます。同一座標へペーストした場合、オブジェクトが現在のキャンバスに表示されていない時は、現在表示しているキャンバスの中央にペーストされます。

レイヤーをドラッグ中にOptionキーを押す、または「Edit → Duplicate」(ショートカット:Command + D)で複製ができます。

PreferencesのLayersで、「Offset duplicated Layers」にチェックを入れると、XY座標とも+10ピクセルの位置にペースト(または複製)されます。

挿入されるレイヤー深度は、選択しているレイヤーがあればその上、なければ最上位にペーストされます。

異なる座標のものを同位置(左上が基準点)にペーストする場合は「Edit → Paste → Paste Over Selection」(ショートカット:Command + Shift + V)です。

またコンテキストメニューから「Paste Here」を選べば、コンテキストメニューを出すためにクリックした位置へペーストすることができます。

レイヤーの描画

矩形や楕円などのツールを選択し、任意の場所からドラッグすることでレイヤーを描画することができます。Shiftキーを併用すれば幅・高さの比率を固定、Optionキーを併用すれば中心から描画することができます。
Shiftキーを併用し描画した場合は、比率にロックがかかります。

また、描画中にSpaceキーを押したままにすると、描画する位置をドラッグで調整することができます。

レイヤーの選択

ツールを選択していない通常の黒いマウスポインターの状態が、いわゆる選択ツールです。そのままオブジェクトをクリックすれば、選択状態に移行します。

ドラッグによる選択も可能で、ドラッグの範囲にかかったレイヤーをすべて選択することができます。

ドラッグ中にOptionキーを押しておくと、ドラッグの範囲へ完全に入ったレイヤーのみを選択することも可能です。

また、レイヤーを選択している状態でTabキーを押すと、レイヤーリスト(ウィンドウ左側の部分 後述)を上から下に向かって順番に選択できます。Shiftキーを押しながらTabキーを押すと逆順になります。

レイヤーの移動

レイヤー選択中に矢印キーを押すと1pxずつ、Shiftキーを併用すると10pxずつ移動することができます。

移動距離を調整するには、PreferencesのCanvasにある「Nudging」の値を変更します。上側が矢印キーのみを押した場合の移動距離、下側がShiftキーを併用した場合の移動距離の設定です。

またドラッグで移動させる場合、CommandとOptionキーを押しておくと、クリックする場所に関係なく選択しているレイヤーをドラッグすることが可能です。選択中のレイヤーが画面外にあっても、他のレイヤーが上に被っていても問題ありません。

レイヤーのサイズ変更

Commandキーを押しながら矢印キーを押すと、左上起点でサイズを1pxずつ変更できます。移動と同じくShiftキーを併用すると、10pxずつでサイズ変更をすることができます。

スマートガイド

レイヤーを選択している状態でOptionキーを押すと、選択したレイヤーとマウスポインターでハイライトしているレイヤーとの距離が表示されます。

レイヤーリスト上でマウスオーバーしたレイヤーとの計測も可能です。

マウスオーバーしているレイヤーとの距離が表示される
マウスオーバーしているレイヤーとの距離が表示される

さらにCommandキーを押すことで、グループ内のレイヤーとも計測できるようになります。

グループ内にあるTwitterアイコンとの距離を計測
グループ内にあるTwitterアイコンとの距離を計測

編集モード

パスのアンカーポイントやテキスト自体を編集する場合、次のいずれかでレイヤーを編集モードにします。

  • レイヤーをダブルクリック
  • レイヤーを選択し、Enterキーを押す
  • レイヤーを選択し、ツールバーの「Edit」をクリックする(ただしテキストレイヤー・グループレイヤーでは有効になりません)

編集モードを終了するには、ESCキーを押します。グループレイヤーの中を編集していた場合は、親のグループレイヤーが選択されます。

02_Preferences

Sketch → Preferences…」(ショートカット:Command + ,)で表示される「Preferences」を解説します。

Generalタブ

Auto-Save

Auto-Save file while Editing」にチェックを入れると、自動保存が有効になります。デフォルトでは有効になっていますが、一時ファイルがドライブ容量を圧迫することがあるため、無効化できるようになりました。

Vector Import

Insert PDF and EPS files as Bitmap Layers」にチェックを入れると、PDFとEPSファイルをビットマップレイヤーとして挿入します。Optionキーを押したままにしておくと、設定している動作が反転します。

Sketch Mirror

Show Current Artboard」にチェックを入れると、Mac上で表示しているアートボードをSketch Mirror側でも表示します。

Canvasタブ

Zoom

Animate Zoom」にチェックを入れると、ズームイン/ズームアウトのエフェクトがかかります。

Zoom in on Selection」にチェックを入れると、選択しているレイヤーがキャンバスの中央に来るようにズームイン / ズームアウトします。

Zoom Back to Previous Canvas Position」にチェックを入れると、「View → Actual Size」(ショートカット:Command + 0)で、前回100%表示をしていた状態に戻ります。

動画: Preferences - Zoom Back to Previous Canvas Position.mp4]

Nudging

矢印キーでの移動距離を設定します。上側が矢印キーのみを押した場合の移動距離、下側がShiftキーを併用した場合の移動距離です。

Guides

ガイドラインやスマートガイドの表示色を設定します。

Layersタブ

Pixel Fitting

Fit Layers and points to pixel bounds」にチェックを入れると、レイヤーやアンカーなどがピクセルにスナップフィットします。通常はチェックを入れておきましょう。

New Groups

Select group’s content on click for new groups」にチェックを入れると、次回グループ化したレイヤーから、インスペクタの「Select group’s content on click」が自動的に有効化され、グループ内のレイヤーを直接選択できるようになります。

また「Select group’s content on click」オプションを無効にしている場合は、Commandキーを押しながらクリックすることで、チェックした状態と同じ動作になります。

この設定が有効になる対象はそのグループのみで、グループ内のグループに内包されるレイヤーを選択するには、そのグループレイヤーの「Select group’s content on click」を有効にする必要があります。

Editing Shapes

チェックを入れると、オープンパスの編集時、始点となっているアンカーをクリックすると、クローズパスになります。チェックを外すと、編集対象のアンカーが切り替わるようになります。

Duplicating

Offset Duplicated Layers」にチェックを入れると、ペーストおよび複製した際に位置をオフセット(X/Y座標とも+10px)します。

Rename Duplicated Layers」にチェックを入れると、複製時にレイヤーをリネームします。Make Gridを実行しレイヤーが複製される場合も、この設定が適用されます。

Flatten bitmaps

Layer → Flatten Selection to Bitmap」を実行した場合の解像度を設定します。@1xが一般的な解像度、@2xが高解像度向けです。

@2xの場合、解像度の足りないビットマップ画像が含まれていると、その部分はぼやけてしまうため注意が必要です。

Pluginsタブ

プラグインの管理を行います。プラグインのアップデートがある場合、アップデートが可能です(プラグインの対応が必要です)。

プラグイン名の左にあるチェックボックスで、プラグインの有効化/無効化を切り替えます。

左下の歯車マークまたはコンテキストメニューから、有効化/無効化の切り替え・アンインストールなどを行うことができます。

左下のFilterでインストールされているプラグインリストからインクリメントサーチをすることができます。

[Get Plugins…]ボタンで、BohemiaCodingのサイトへジャンプします。

Libraries

Sketchファイルを登録し、登録されたファイルにあるシンボルをドキュメント間で共有する機能です。

左下の歯車マークまたはコンテキストメニューから、有効化/無効化の切り替え・削除などを行うことができます。

[Add Library…]ボタンでSketchファイルを選択し、ライブラリへ登録します。ウィンドウへドラッグ&ドロップでも登録可能です。

Presetsタブ

スライスやレイヤーの書き出し設定で使うプリセットの設定ができます。パネルの左が設定済みのプリセットの一覧、パネルの右が現在選択しているプリセットを編集します。

プリセット一覧のラジオボタンで、スライスや書き出し設定した際のデフォルト設定を選択します(一覧にDefaultとありますが、これはSketchのDefaultです)。

プリセットを追加するには、リスト下の「+(プラス)」を、選択した設定を削除するには「−(マイナス)」をクリックします。

プリセット内の書き出し設定を追加するには、プリセット名の右にある「+(プラス)」をクリックします。

Sizeは書き出すサイズで、倍数や幅・高さを入力できます。Prefix/Suffixは、ファイル名に付ける接頭辞および接尾辞です。プルダウンメニューから接頭辞か接尾辞を選択し、文字を入力します。Formatは書き出すフォーマットを選択してください。

Cloudタブ

Sketch Cloudのアカウントを設定するパネルです。詳しくは「19_Tools - Sketch Cloud」で解説します。

アカウントを作成済みであれば[Sign In]ボタンを、まだアカウントを作成していないのであれば[Create Account]ボタンを押せば、それぞれのウェブページへジャンプします。

03_Application Window

Sketchのウィンドウについての解説です。大まかに4つのエリアがあります。

ツールバー

ウィンドウ上部にあるのがツールバーです。メニューのショートカットアイコンが並んでおり、メニューバーから選択する手間が省けます。コンテキストメニューより「ツールバーのカスタマイズ」をすることができます。

View → Show/Hide Toolbar」(ショートカット:Command + Option + T)で表示・非表示を切り替えることができます。

Touch Bar

Touch Barが搭載されたMacBookであれば、対応した項目が表示されます。挿入するレイヤーの選択や色など、状況に応じて切り替わります。

上:特に何も選択していない状態では挿入するレイヤーの選択や表示の拡大縮小のボタンが表示される。 下:Rectangleレイヤーを選択した状態で、塗り・線色の設定やパス編集モードなどのボタンが表示される。
上:特に何も選択していない状態では挿入するレイヤーの選択や表示の拡大縮小のボタンが表示される。 下:Rectangleレイヤーを選択した状態で、塗り・線色の設定やパス編集モードなどのボタンが表示される。

レイヤーリスト

Sketchでは矩形や楕円のパスはもちろん、テキスト・グループ化したものもレイヤーとして扱います。キャンバスに存在するレイヤーは、ウィンドウ左側にあるレイヤーリストへ表示されます。

レイヤーリストの上部に現在のページ名が表示され、下部にあるフィルターはレイヤー名でレイヤーリストの絞り込みができます。(ショートカット:Command + F)

ページ名右にある をクリックすると、ページリストを表示できます。

View → Show Layers List」(ショートカット:Command + Option + 1)で表示・非表示を切り替えます。

インスペクタ

ウィンドウ右側がレイヤーのサイズや位置・エフェクトを編集するためのインスペクタです。インスペクタには、選択しているレイヤーに応じたプロパティや、使えるエフェクトなどが表示されます。

インスペクタで数値を入力するテキストボックスでは、四則演算が可能です。またテキストボックス下のラベル(下にラベルがない場合は、その項目のラベル)部分を左右にドラッグすることでも数値の変更ができます。

インスペクタの上部にはレイヤーの整列ツールがあり、下部にはレイヤーに書き出し設定を行う「Make Exportable」ボタンがあります。

View → Show Inspector」(ショートカット:Command + Option + 2)で表示・非表示を切り替えます。

キャンバス

ウィンドウ中央部分がキャンバスで、この中で編集を行います。キャンバスのサイズは無限で、どこまでもスクロールし複数のアートボードを配置できます。

キャンバスには複数のアートボードを持つことができるため、ワイヤーフレームをデバイスごとの幅で作成する場合や、複数サイズあるアイコンを1つにまとめる場合などに役立ちます。

ウェブ向けのボタンやロゴなどのいわゆるパーツであれば、アートボードを使わず作成することも可能です。

17_Update

Sketch 47

バージョン47のリリースノートをざっと翻訳しました → オリジナルのリリースノート:https://sketchapp.com/updates/#version-47

新しい機能

  • ライブラリを内蔵:ドキュメントや他のデザイナー間でシンボルを共有することができます。→Libraries
  • Smooth Corners:矩形の角丸のカーブを調整し、iOSで使われている効果を実現できるようになりました。→Smooth Corners

機能強化

  • 複雑なドキュメントでシャドウのパフォーマンスを改善しました。
  • ネストされたシンボルを編集するときのパフォーマンを改善しました。
  • シンボル・共有スタイル・テキストスタイルのアピアランスが改善され、余分なサブメニューを表示しなくなりました。(スラッシュで区切ったアイテムが1つの場合、サブメニューが表示されません)
  • パスの編集でアンカーポイント間の真ん中に新しいポイントを挿入するショートカットを、Command + クリックからShift + クリックへ変更しました。→アンカーポイントの追加と削除
  • “iOS UI Design”ドキュメントをライブラリとして内蔵し、iOS11とiPhone X向けにアップデート、アイコン及びUI要素にスムームコーナーを使うように更新しました。
  • Command + Eのショートカットで選択している個別のレイヤーを書き出せるようになりました。→書き出し
  • iPhone 8およびiPhone Xのアートボードプリセットを追加しました。

Sketch 46

バージョン46のリリースノートをざっと翻訳しました → オリジナルのリリースノート:https://sketchapp.com/updates/#version-46

新しい機能

  • プライベートシェアリング:Sketch Cloudからあなたのドキュメントを共有したい人を招待できます。→Sketch Cloundのドキュメントの設定
  • テキストの揃え:テキストレイヤーのバウンディングボックスに対する垂直方向の揃えを調整できるようになりました(要Fixed設定)。→Alignment
  • ヘルプトピックの検索:Sketchのヘルプメニューから関連するオンラインドキュメントを検索できるようになりました。→ドキュメントの検索

機能強化

  • ResizingオプションのFix WidthとFix Heightは、それらのラベルをクリックしても切り替えられるようになりました(これまではアイコンのみがヒットエリア)。
  • プラグインアップデートのインストールが早くなりました。(Updateボタンを押せばすぐにアップデートできるため、あらかじめダウンロードしているものと思われます)
  • インストールしているプラグインに互換性がない場合、Sketchは通知するようになりました。→Sketchのアップデートによる無効化
  • テキストレイヤーとの距離を計測するとき、Controlキーを押したままにすると、バウンディングボックスではなくBeselineまたはCap Heightとの距離を計測できるようになりました。→テキストレイヤー内の文字との距離計測
  • Insert > Styled Textメニューで、大きな段落スペース(Paragraphの値)を持つText Stylesのアピアランスを改善しました(Paragraph分のスペースがなくなりました)。
  • “Resize to Fit”をArtboardインスペクターへ表示されるように戻しました。→Artboard
  • Shareメニューから選択しているレイヤーを書き出せるオプションを追加しました。→書き出し
  • Shared Styleの同期(Control + S)とShared Styleのリセット(Option + Control + S)のキーボードショートカットを追加しました。→共有スタイルの変更・同期
  • フォントがない古いファイルを開くときの動作を改善しました。(フォントが見つからない場合、ウィンドウ右上に表示が出ます →インストールされていないフォントを置換する
  • Pixel Fittingの環境設定を単純化し、1つのオプションに減らしました。→Pixel Fitting

Sketch 45

バージョン45のリリースノートをざっと翻訳しました → オリジナルのリリースノート:https://sketchapp.com/updates/#version-45

新しい機能

  • プレゼンテーションモードは、UIを隠すだけでフルスクリーンにならないように再設計されました(タブ付きウィンドウでも機能します)。
  • プラグインはSketch内で自動的にアップデートを取得するようになりました。互換性のないプラグインは無効化されるため、Sketchをクラッシュさせることはありません。
  • アンカーポイントを挿入するときスマートガイドが表示され、新しいアンカーポイントが既存のアンカーポイントの軸にスナップするようになりました。
  • カラーポップオーバー(スウォッチ)がスクロールできるようになりました。さらにカラーピッカーを折りたたむことで、プリセットを表示するスペースを増やすことができます。

機能強化

  • プラグインを無効にした直後にプラグインメニューから削除されるようになりました。
  • 現在のアートボードを削除した場合、Mirrorの表示がドキュメントの一覧に戻るようになりました。
  • 矢印キーおよびShift+矢印キーでの移動距離をCanvas Preferencesで設定できるようになりました。
  • メニューにより一貫性を持たせ、使いやすく改善しました。
  • ベクター編集で最初のポイントをクリックしたとき、パスを閉じるかパスを選択するかのどちらかを選べる設定を追加しました。
  • 回転しているシェイプを選択するときの精度が向上しました。
  • アートボードを“Resize to Fit”でリサイズしたとき、外側の線や影のオフセットを含めるようになりました。
  • Layer › ConstraintsメニューにLayer Resizingのショートカットが設定されました。

プラグイン周りは必ずアップデートを確認しましょう。

43より採用された新しいファイルフォーマットについて

Sketch 43より新しいファイルフォーマットが採用され、ドキュメント情報やレイヤー情報を記載したJSONファイルとビットマップファイルを内包するZIPアーカイブ形式になりました。

オープンなファイルフォーマットを採用したため、Gitをはじめとしたバージョンコントロールシステムでの管理がしやすくなり、プラットフォームに関わらずさまざまなツールがリリースされることも期待されています(例えばWindows向けやブラウザを使ったSketch Viewerなど)。

JSONファイルやビットマップファイルを取り出すには、Sketchファイルの拡張子をzipに変更し展開するだけです。

さらに、ZIPファイルを展開してできたフォルダ内にあるファイルやフォルダを再びZIPとして圧縮したのち、拡張子をsketchに変更するだけで、Sketchファイルへ戻すことも可能です(ZIPファイルを展開して生成されたルートフォルダを圧縮した場合、エラーで開けませんのでご注意ください)。

ただ、JSONファイルを編集することもできますが、実は目に見えているレイヤー構造より複雑になっているため、直接JSONファイルを編集することは避けたほうが良いでしょう。


App Store版からのアップデート

移行期間はすでに過ぎてしまいましたので、あらためてライセンスを購入しましょう。過去に作成したスウォッチ等は移行することができます。

移行方法

長い間Sketchを起動していない場合は、念のため一度起動しておきましょう。

Mac App Store版をお使いの方は、先ほどの「Leaving the Mac App Store」より、最新版をダウンロードしZIPファイルを解凍します。

解凍してできた「Sketch.app」を「アプリケーション」フォルダへ移動させ、すでにインストールされているMac App Store版を上書きした上で起動すればOKです。

プラグインやアートボードプリセットの移行方法

起動時に移行される場合がほとんどですが、プラグインやアートボードなどの移行がうまくいっていない場合、Mac App Store版のフォルダから、直販版のフォルダへ必要なファイルやフォルダを移動させればOKです。

Mac App Store版の設定保存先
~/Library/Containers/com.bohemiancoding.sketch3.beta/Data/Library/Application Su\
pport/com.bohemiancoding.sketch3
直販版の設定保存先
~/Library/Application Support/com.bohemiancoding.sketch

これらのフォルダへ移動するには、Optionキーを押しながらFinderの[移動]メニューを開いて、「ライブラリ」からたどるか、[移動]→[フォルダへ移動…]で上記のパスをコピペしてください(改行マークがある場合は、一旦テキストエディタなどで1行に整形してください)。

対象のファイルやフォルダ
  • Pluginsフォルダ
  • artboards.plist:アートボードのカスタムプリセット
  • assets-v62.sketchpreset:カラーやグラデーションのプリセット
  • textStyle-v62.sketchdefault:ちょっと用途が不明ですが、デフォルトのテキストスタイル?
  • Templatesフォルダ:カスタムテンプレートを保存している場合
  • plugins.plist:Preferencesのプラグインマネージャで設定した内容を移行したい場合

「v62」とある部分は、これより小さい数字の場合があります。また移動したのにきちんと反映されない場合は、「v63」とある(場合によってはこの数値より大きな)ファイルを一旦デスクトップなどに移動させた上で、Sketchを再起動させてみましょう。ただし、新しく作成してしまっている場合は、消えてしまいますので、ご注意を(どちらかしか残せません)。

アップデート後の処理

Sketch ToolboxがMac App Store版のフォルダへインストールしてしまうため、先述のMac App Store版の設定保存フォルダを削除しておきます。

ダウンングレードする

Updatesページより、過去のバージョンをダウンロードできます。

https://sketchapp.com/updates/

ただし新バージョンで開いて保存してしまったファイルは、古いバージョンで開くことができない可能性があります(Auto Saveを無効にしてる場合、開くだけなら問題ありません)。特にバージョンアップ後の不具合から、すぐにバグフィックス版がリリースされることが多く、プロジェクトで使っている場合は少なくともこのバグフィックス版が出るまで待った方がよいでしょう。