4kaku design

マーケティングを勉強しているWebデザイナーのノート

プラグインで自分仕様にすることで、こまごまとした作業にかかる時間が短縮できるSketch。
今回はボタン内に入るテキストの長さに応じてボタンの幅を変えてくれる「Dynamic button plugin」をご紹介します。


「Dynamic button plugin for Sketch.app」とは


「Dynamic button plugin for Sketch.app」は、その名の通りSketch上で作ったボタンの幅を動的に変更できるプラグインです。2015年1月11日現在、Sketch最新版ver. 3.2にも対応済み。



使い方

1. プラグインのインストール

こちらでプラグインがダウンロードできます。現在ベータ版ですが、Sketch Toolboxならプラグインを一元管理できるのでおすすめ。

Github経由で引っ張ってくる方法が主導更新不要で一番スマートじゃないかと思い、現在勉強中です。これについても後日まとめます。

2. テキストを入力し、ボタン用グループを作成

ボタンにしたいテキストを入力。日本語テキストでボタンを作る場合は、この時点で上下の余白を調整しておきましょう。
テキストレイヤーを選択したまま、Command + J で「flex button」というレイヤーグループが生成されます。これが動的に幅が変わるボタンです。




3. ボタンの余白(padding)を変更

Dynamic buttonではテキストレイヤーのレイヤー名で余白(padding)を変更することが可能です。レイヤー名を「0:0:0:0」から「0:20:0:20」に変更し、テキストレイヤーのみを選択したままCommand + J。



画像では「0:20:0:20」に変更しましたが、これはCSSでいう「padding: 0 20px 0 20px」にあたります。ようするに、上・右・下・左の順で余白を設定しています。コーディングをする人なら感覚的にわかりやすいのではないでしょうか。



装飾も加えて、少しボタンらしくなりました。

4. テキストを差し替えたら「Command + J」

これで動的に余白が変えられるボタンが出来上がりました。あとは普通にテキストを差し替え、テキストレイヤーを選択してCommand + Jでボタンが修正されます。このとき、「flex button」グループを選択してしまうと、グループ全体を収めるボタンが新たに生成されてしまうのでご注意ください。




四角形レイヤー「BG」には効果もつけられますし、テキスト自体にシャドウなどをつけることも可能。ささいな作業ですが、いちいち文字を差し替えるたびにオブジェクトの幅を調整するのはストレスです。

今回は定番中の定番プラグインのご紹介でしたが、随時便利なSketchプラグイン、素材についてまとめていきます。