ボタン作りがラクになる！Magic Buttons

はじめに

今日ご紹介するのは、ボタンの文字を入れるだけでパッと綺麗なpaddingを整えてくれるプラグイン、Magic Buttons Sketch Pluginです！

このようなプラグインはすでにいくつか出回っていますが、バグがあるものが多かったり、大規模なデザインシステムをそのプラグインで管理しようとすると粗が目立ったりします。

私が今使っているpaddyはかなりシンプルで便利ではあるのですが、シンボル化したりボタンにアイコンをつけたりすると、うまくいかなかったりすることもあります。

特にボタンはデザインで何回も何十回も何百回も出てくるものなので、あまり手間をかけずにいじれるようになりたいですよね。

そんな方のために、今日はMagic Buttons Sketch Pluginという今年の5月にでた新しいプラグインをご紹介します！

Magic Buttons Sketch Pluginとは

概要

Magic Buttons Sketch Pluginとは、ボタンのリサイズ、テキスト、パディングを自動で行ってくれるプラグインです。

課題

みなさんはこういう経験をされたことはありますか？

こちらは公式のMagic Buttons Sketch Pluginで使われている例なのですが、同じような経験をしたことがある方はいらっしゃると思います。
テキストを変更し、ボタンの背景をリサイズし、左右の余白が同じか気になるので、挙げ句の果てには長方形を使って、ボタンの余白を測る…。

これが一回とかならまだ我慢できますが、何回も同じようなことをしたくないですよね…。

そんな方のために開発されたのがMagic Buttons Sketch Pluginです。

解決

Magic Buttons Sketch Pluginは自分が魔法使いになったかのように、ボタンをリサイズしたり、テキストを変更したり、パディングを変えたりすることができます。

キーボードのショートカットキー (Cmd + Shift + m) を押して、出てくるモーダルにボタンの中のテキストを入力すると、自動的にそのテキストに合わせてボタンがリサイズされます。

さらに、リサイズされたボタンはCSSのように、パディングの余白をしっかりと守ってリサイズされます。

ダウンロード

Magic Buttons Sketch Pluginをダウンロードされたい方はこちらからどうぞ。
Magic Buttons Sketch Pluginをダウンロード

できること

Magic Buttons Sketch Pluginでできることは大きく３つあります。

プラグイン自体は無料です。

Magic Buttons Sketch Pluginのリポジトリ
Magic Buttons Sketch Plugin

セットアップ / 使い方

1. プラグインをダウンロードする

まだ、プラグインをダウンロードしていない方は、こちらもしくは、公式リポジトリからクローンしてください。
Magic Buttons Sketch Pluginをダウンロード

ダウンロードしたzipファイルを解凍し、magic-buttons.sketchplugin をダブルクリックすればインストール完了です。

2. ボタンテンプレートをダウンロードする

0から自分のボタンシンボルを作っても問題ありませんが、最初は少しわかりにくいので、Magic Buttons Sketch Pluginが用意してくれている、ボタンテンプレートをダウンロードし、それをベースとして進めることをお勧めします。

プラグインをダウンロードした際に一緒に入っている magic-buttons-sample-sketch-file の中の magic-buttons-sketch-sample-template.sketch を開いてください。

もし消してしまったり、見つからない方はこちらからダウンロードしてください
Magic Buttons Sketch Pluginをダウンロード

ファイルを開くとこのような画面が出ます。

3. ボタンをリサイズしてみる

Buttons Sample Templatesのすぐ下のボタンを選択し、Cmd + Shift + m でプラグインを起動します。

お好きな文字を入力して、確定するとボタンが自動的にリサイズされます！

4. ボタンをカスタマイズする

リサイズできるボタンは全てシンボル化されていないと動かないのですが、
ボタンのシンボルは３つの要素で構成されています。

Magic Buttons Sketch Plugin特有の構成

1. padding-left (シンボル)
   こちらは padding-left というシンボルで、ボタンの左のpaddingを決めています。
   名前は padding-left じゃないと動かないので注意してください。

2. padding-right (シンボル)
   こちらも padding-left 同様、シンボルじゃないと動かないです。
   名前も padding-right という縛りがあります。

3. padding-view (シンボル)
   こちらはMagic Buttons Sketch Pluginが動くために必要、というわけではないのですが、要素と要素の間のpaddingをみるためにつかいます。

その他の要素

1. text 要素 (シンボルであってはならない — 普通の要素にする)
   特にレイヤー名に縛りはないので、お好きに作っていただいてOKです

2. button-background要素 (シンボルでも普通の要素でもOK)
   ボタンの背景色を設定します。

上にあげた５つの要素をカスタマイズすることで自分好みのボタンを作ることができます。

5. デザイン用にボタンを書き出す

Magic Buttons Sketch Pluginで作ったボタンは、デフォルトでpaddingなどの隙間が見えやすいように設定されています。

実際に清書用にボタンやデザインを書き出す場合は、こういったpaddingなどを消します。

master-paddingとpadding-viewのシンボルを隠してから書き出しましょう。

まとめ

以上、今日はボタンの文字を入れるだけでパッと綺麗なpaddingを整えてくれるプラグイン、Magic Buttons Sketch Pluginをご紹介しました。

無料で使えて、他のプラグインと違い、アイコンなどにも対応していて、テンプレートをダウンロードすることができるので、試してみる価値はありそうです。

また、シンボルを使ったフローが想定されているので、大規模なデザインシステムに取り入れやすい印象を受けました。