Sketch のバージョンが 41 になって、ネストしたシンボルをオーバーライドできるようになったので、同じようなシンボルを作らなくても良くなったので試した。

試行手順

iOS の Navigation Bar をここでは作成する

  1. UI 部品のシンボルを作成する
  2. ベースシンボルを作成して部品シンボルを配置する
  3. Artboard にベースシンボルを配置する
  4. シンボルの『Overrides』プロパティを変更する

1. UI 部品のシンボルを作成する

ScreenShot 1.png

シンボルの色は変更できないので『Title』は『Black』と『White』のシンボルを作成した。

シンボル名を『/』で区切っておくと以下のようにシンボル選択時にグループ化・階層化される。

ScreenShot 3.png

2. ベースシンボルを作成して部品のシンボルを配置する

[Insert] -> [Symbols] からシンボルを選択してベースシンボルに配置していく。

ScreenShot.png

ネストしたそれぞれのシンボルはベースシンボルから非表示にできるので、左側のシンボルを重ねて配置している

3. Artboard にベースシンボルを配置する

[Insert] -> [Symbols] からシンボルを選択してArtboardに配置する。

Bar.png

4. シンボルの『Overrides』プロパティを変更する

ScreenShot 4.png

以上のように設定すると、

Bar.png

のようになる。

シンボルの色は変更できない

バージョン 41 の段階ではシンボルの色はオーバーライドできないので、色ごとに部品のシンボルを作成しておく必要がある。

サンプル

ios_bar.zip

Next PostPrevious Post