Sketchで透過オブジェクトを含むグループごとスライスする

はじめに

最近、PhotoShopの代わりにSketchを使うことも増えてきました。

SketchはMake Exportableで@2xや@3xもまとめて簡単に切り出せていいなーとか思ってたら、よくあるアイコンの下に固定サイズの透過オブジェクトがあるパターンで、グループごと切り出しても透過オブジェクトのサイズに切り出せずアイコン自体のサイズになってしまって困りました。

プラグインとかいれないで解決できたのでメモ。

確認バージョン

Version 3.6.1 (26313)

解決策

グループ化する

ヘルプアイコンと24x24の矩形をグループ化。

アイコンと透過レイヤーを選択

スライスツールを使ってオブジェクトを選択

スライスツールはここ。

外側を選ばないと、アイコンだけ切り出すことになるので注意。

アイコンだけ選んだ場合

選択すると切り出した結果が右側に表示されるが、背景も含んでしまっている。

Export Group Contents Onlyにチェック

グループ以外のオブジェクトが除外されるので透過になる。

あとは必要に応じて@2や@3を追加してExportShapeでOK。