【パーツSketch講座】テキスト＋アイコンを変えても余白を保ったまま変形してくれるボタン

2018年12月23日 22:45

こんにちは。とあるIT企業に勤める新卒UI/UXデザイナーのオサマユ（@o3sama24）です。

仕事以外で何かアウトプットの機会が欲しいな〜と思っていたら半年が過ぎておりました……！ここでは普段のデザイン業務で気づいたことや私の興味があることについて記録を残していこうと思います。自己紹介はまた近いうちにしようと思います👩　さて、早速本題へ入りましょう。

📝目次
1. Sketchってなんぞや
2. アイコン＋文字入りのボタンを作りたい！
3. ボタンの作り方
3-1. Anima ToolKitをインストールする
3-2. ボタンの中身を作成する
3-3. AnimaでPaddingを設定する
3-4. テキストは右揃えに設定する
（🚨ここが大事！）

Sketchってなんぞや？

インターネットに関わるデザイナーの皆さんならきっとご存知でしょう。「Sketch」はWebやモバイルのUIデザインに特化したツールです。似たようなツールですと、AdobeXDも話題となっていますね。

下の記事は初学者に向け “ Sketchはどのようなことができるのか ” を中心に書かれていますのでぜひご一読を。

最近、私は業務でSketchを使ってAPPのUIを作り始めました。ただ、使い慣れていなくてSymbolを作るのも一苦労です（笑）

Webサイトを参考にしたいなと思ってもプラグインの紹介が中心で
パーツの作り方の解説記事が少ない（汗）！！！

ならいっそのこと“ 自分が使い方を覚えるためにも記事として残してしまえ ”と筆をとりました。Sketchを学び始めた、誰かの役に立てたなら幸いです。

この記事をオススメしたい読者
・基本操作はわかるSketch初学者

テキスト＋アイコン入りのボタンを作りたい！

私は下のようなテキスト＋アイコン入りのボタンをSymbol化して作りたいと思っていました。

そう、ただのボタンじゃありません……。余白を保ったまま変形してくれます。しかもアイコン付きで！

でも、普通に作ると大体こんな風になりますよね……。

悲しすぎる……😩
でも大丈夫！手順だけ覚えれば超簡単に作れます🙌

ボタンの作り方

3-1. Anima ToolKitをインストールする
まずはじめに「Anima ToolKit」というプラグインを入れてください。
細かいプラグインの説明は省きますが、ざっくりいうと作成したパーツにアニメーションやインタラクションをつけることができるプラグインです。これを使えば文字を増やしても、勝手に余白をつけてくれる仕組みが出来上がるのデス！

インストールは上記のリンクから行ってください。プラグインのSketchファイルを開けば、インストール完了です。インストールするとSketchのワークスペースの右下に「Anima」が追加されているのがわかりますね。