Sketchのシンボル機能とは？シンボル機能の使い方を紹介
Sketchを利用する際に知っておくと便利なSymbols(シンボル)機能について紹介します。
シンボル機能を使うことで、複数のオブジェクトを一括でデザインを変更したりすることができます。
例えばアプリデザインの際など、同じパーツを複数画面で使い回ししているケースで、シンボル機能を使うことで簡単にデザインの修正をすることができます。
Sketchのシンボル機能とは？
例えばWebデザインやアプリデザインなど同じパーツを使いまわしたりする場合があります。
そういった時に、
「やっぱりこのパーツのサイズを変えよう」
「パーツの色を変えてみよう」
ということはデザインをしているとよくあります。
こうした際に、その使い回しているパーツ１つ１つのデザインを変えていくのはとても手間がかかりますよね。
そういった時に活躍してくれるのがSketchのシンボル機能になります。
Sketchのシンボル機能を使ってみる
それではさっそくSketchのシンボル機能の使い方を見ていきましょう。
今回はスマホデザインで複数ページに渡ってヘッダーのパーツを使い回す場合を想定します。
ヘッダーの色や大きさ、ハンバーガーメニューの位置が一応決まったので複数ページに渡りヘッダーデザインを使い回すものと仮定します。
シンボル機能を使う場合は、レイヤーを複数選択して画面上部にあるシンボルボタンを押すことでレイヤーをシンボル化することができます。
今回はメニューバー、テキスト、ヘッダーの背景を丸ごとシンボル化しました。
ボタンを押すと、確認のダイアログが表示されます。
この時に「Send Symbol to “Symbols ” Page」と書かれた箇所にチェックを入れましょう。
これにチェックを入れることでシンボルをページ上で管理することができます。
シンボル化に成功すると、アイコンが表示されページの箇所に新しくSymbolsが追加されます。
シンボルのデザインを変更してみる
それではシンボル化に成功したので、ここでヘッダーにあるハンバーガーメニューの位置を右から左に変更する依頼が来たと仮定してみましょう。
さっそくページのSymbolsからデザインを変更していきます。
すると、シンボル化したパーツのデザインが全て変更されます。
今回はハンバーガーメニューの位置を変更しただけですが、ヘッダーの大きさや色、テキストなどシンボル化したオブジェクトであれば自由自在に変更することができます。
まとめ
いかがでしたでしょうか？
今回、Sketchのシンボル機能について紹介しました。
うまく使いこなすことで作業効率をぐっと上げることができます。特にデザインが複雑化して来た時には威力を発揮する機能です。ぜひ参考にしてみてください。
▼関連記事
