Webデザイン

Sketchプラグイン「Automate」を使ってみたらとても便利だった話

Sketchプラグイン「Automate」を使ってみたらとても便利だった話

やぁみんな! atomだよ!
今回は、Sketchプラグイン「Automate」を使ってみたらとても便利だった話をしようと思うぞ。

Sketchプラグイン「Automate」は、Sketchでのデザインワークの際に必要になる色々な操作をオートでこなしてくれる優れモノなんだ。
ひとつひとつの機能は別々のプラグインとして配布されているものも多いけど、それらが All in One になってるっていう感じかな。
ちょっと機能が多すぎて一度には紹介しきれないので、何度かに分けて紹介していこうと思うぞ。

Arrange

Change Places Between Two Objects

選択した2つのオブジェクトの位置を入れ替えるぞ。
サイズの違うオブジェクトでも、オブジェクトの左上の座標を基準に入れ替えてくれる。

Change Places Between Two Objects (center)

こちらも選択した2つのオブジェクトの位置を入れ替えるぞ。
こちらは、オブジェクトの中心座標を基準に入れ替えてくれる。

Tile Objects

選択した複数のオブジェクトをタイル状に並べてくれるぞ。
並べ方は以下から選ぶことができる。

【Grid】

横方向、縦方向に、指定したカラム数、マージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標とY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【Left to Right】

横方向に(左から右に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標とY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【Top to Bottom】

縦方向に(上から下に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標とY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【Right to Left】

横方向に(右から左に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も大きいX座標と最も小さいY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【Bottom to Top】

縦方向に(下から上に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標と最も大きいY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【TopLeft to Bottom Right】

斜め方向に(左上から右下に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標とY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【BottomRight to TopLeft】

斜め方向に(右下から左上に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も大きいX座標とY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【BottomLeft to TopRight】

斜め方向に(左下から右上に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も小さいX座標と最も大きいY座標を基準にして、レイヤーリストの下から順に並べてくれる。

【TopRight to BottomLeft】

斜め方向に(右上から左下に向けて)、指定したマージンで並べてくれるぞ。
選択している全オブジェクトの中の、最も大きいX座標と最も小さいY座標を基準にして、レイヤーリストの下から順に並べてくれる。

Tile Objects by Position X

選択したオブジェクトのY座標はそのままに、横方向に指定したマージンを開けてくれる。
選択したオブジェクトの中で最もX座標の小さいものを基準にして並べるぞ。

Tile Objects by Position Y

選択したオブジェクトのX座標はそのままに、縦方向に指定したマージンを開けてくれる。
選択したオブジェクトの中で最もY座標の小さいものを基準にして並べるぞ。

Tile Objects Horizontally by Index

選択したオブジェクトのY座標はそのままに、横方向に指定したマージンを開けてくれる。
レイヤーリストの一番下にあるオブジェクトを基準にして並べるぞ。

Tile Objects Vertically by Index

選択したオブジェクトのX座標はそのままに、縦方向に指定したマージンを開けてくれる。
レイヤーリストの一番下にあるオブジェクトを基準にして並べるぞ。

Arrange Objects

選択したオブジェクトを、指定したマージンで横方向、縦方向に並べてくれる。
基準は選択したオブジェクトの中で最も小さいX座標とY座標だ。
並べ方は、「Snap Distance」で指定する数値によって変わってくるぞ。

Order Layers By …

選択したオブジェクトのレイヤーリストを並び替えてくれるぞ。

Position X…X座標が小さい順

Position Y…Y座標が小さい順

Name…名前順(123、ABC、あいうえお)

Kind…種類順(グループ、シェイプ、テキスト)

Reverse Layer Order

選択したオブジェクトのレイヤーリストの並び順を逆に並び替えてくれるぞ。

Collapse All Groups and Fit Canvas

レイヤーリスト上のすべてのアートボードを折りたたみ、作業スペース上のすべてのアートボードを表示してくれるぞ。
折りたたまれるのは一番上層(アートボード)だけで、それらに含まれているグループやシンボルは折りたたまれないままになる。
すべてのグループ、シンボル、アートボードを折りたたんでくれる、Viewメニューの「Collapse All Groups」とは違う動きだね。
Fit Canvasの動きはViewメニューの中のそれと同じだ。

機能が膨大すぎるので続きはまた次回。。。

とにかくいろいろな機能がてんこ盛りで紹介しきれないので、今回はこの辺で。
随時アップデートしていくので、みんなよかったら参考にしてみてくれよな!