2018年7月4日

デザイン

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

目次

  1. はじめに
  2. Magic Buttons Sketch Pluginとは
  3. セットアップ / 使い方
  4. まとめ

はじめに

今日ご紹介するのは、ボタンの文字を入れるだけでパッと綺麗な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でできることは大きく3つあります。

  • ショートカット (Cmd + Shift + m) でボタンないのテキスト変える
    こちらはボタンシンボルのテキストレイヤーのオーバーライドとして機能する
  • テキストサイズと自分で決めたpaddingに応じて、ボタンをリサイズする
  • CSSのpaddingと似たコンセプトと挙動をする

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

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. ボタンをカスタマイズする

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

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つの要素をカスタマイズすることで自分好みのボタンを作ることができます。

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

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

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

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

padding-leftpadding-right シンボルをそれぞれ隠しても良いのですが、1つのシンボルに統合したい場合はサンプルのテンプレートのように `master-padding` というシンボルを作ると便利です。

まとめ

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

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP