Sketchでネストされたシンボルを作成する方法

ファイル内の複数の異なる場所に存在するアイコンを変更する必要がある場合は、どうしますか？そして、レイアウト全体を修正するのに何時間も費やしたばかりのアイコンに割り当てられた色を少し変更する必要がある場合はどうしますか？

Sketchを使用すると、上記のすべての変更をすぐに行うことができます。シンボルは、大規模な設計システムを作成するためのSketchの最も強力な機能の1つです。今日は、ネストされたシンボルを非常に効率的な方法で使用する方法を説明します。

「ネストされたシンボル」とは何ですか？

ネストされたシンボルは、Sketchにすでに存在する他のシンボルから作成された通常のシンボルです。ある種のように聞こえる インセプション ？実際、そうです。ただし、心配しないでください。この短いチュートリアルの後、ネストされたシンボルを使用して時間を節約するのは非常に簡単です。

次の例を見てください。私は2つの単純な記号を取り、それらを組み合わせて別の記号を作成しました。

他のシンボルから新しいシンボルを作成することにより、新しいシンボル内にネストされた元のシンボルの設定を上書きすることができます。

ネストされたシンボルを作成する方法

ネストされたシンボルを作成するプロセスを理解するために、上記のボタンの例を作成しましょう。

ステップ1：カラーシンボルを作成する

ボタンの色をいくつか作成することから始めましょう。境界線のない100pxx 100pxの長方形を作成し、それに青い塗りつぶしを追加します。名前 カラー/プライマリーブルー。 この長方形を右クリックして、[シンボルの作成]を選択します。長方形をダブルクリックしてシンボルメニューにジャンプし、シンボル全体を複製します。

コピーの名前をに変更します カラー/セカンド-ブルー 、塗りつぶしを別の色に変更します。このプロセスをもう一度繰り返して、他の色を作成できます。

ステップ2：アイコンシンボルを作成する

ネストされたシンボルを作成するために、もう1つの要素であるアイコンを使用します。プロセスは色の場合と同じです。アイコンが作成され、それがシンボルになります。次に、シンボルメニューで、アイコンが内部にあるシンボル全体が複製され、一意の名前が付けられます。

重要：アイコンのアートボードのサイズは同じである必要があります。

ステップ3：ネストされたシンボルでボタンを作成する

ネストされたシンボルを作成するには、手順1と2で作成した色とアイコンのシンボルを使用します。

色付きのシンボルを新しいアートボードに配置し、ボタンの形に変換することから始めます。その上にテキストを追加し、その上にアイコン記号を配置します。次に、これらすべてのレイヤーを選択し、グループ化して、新しいシンボルに変換します。

それです！これで、シンボル置換を使用して、より少ないステップでボタンを希望どおりにフィットさせることができます。

ステップ4（オプション）：レイヤーに絵文字で名前を付けます！

わかりやすくするために、レイヤー名として絵文字を使用できます。それを行う方法を知りたい場合は、私の前の記事を見てください： 絵文字を使用したスケッチファイルの管理 。

ネストされたシンボルとそのオーバーライドの最終結果は次のとおりです。