デザイン

デザイン

Sketchを騙してみた結果、変幻自在なボタンシンボルのできあがり!

160 views

変幻自在なボタンシンボルを作成する方法

 

かなり前、PhotoshopからリリースされたFireworksはデザイナーの働き方を良い意味で変えてくれたのですが、やはりSketch派にはSketchがいいのです。

 

Sketchにおけるスイッチシンボル、シンボルのオーバーライド、リサイズ機能を含む最近のアップデートは興奮モノで、私の生活を本当に楽にしてくれました。

 

しかし改良の余地はまだまだ。

 

ラベルとアイコンを使ってボタンをつくる時、シンボルはオーバーライド状態にあります。このボタンとオーバーライドしたアイコンとラベルの両方をボタンの真ん中に収め複製したいのです。

 

ラベルの右側にアイコンが来るようなケースの場合
1-elcqnu3hjnyncbr0detqgg

オーバーライドのセクションでシンボルのテキストを編集

1-0nweejzvapkpgs35z48-qq
シンボルの構造と設定。中央揃えにすること!

 

左側にアイコンが来るように設定したい場合どうするのか?カンタンそうですけど時間がかかります。テキストを変更するとき、何かしらの理由でラベルの拡大は右側のアイテムにしか反映されないのです。

 

あきらめようと思いました。

 

1-g3sdtzs1dr43gxkehcjnbg

オーバーライドセクションにおけるシンボルのテキスト編集ではアイコンは動きません。

 

そうだ!Sketchを騙してみようと閃いたのです!

 
ラベルを180度回転させてみることにしました。
1-_c0kypyagn4w1u2eryepjq

一発で期待通りの動き

 

ただ180度回転させただけで、求めていた結果になりました。

1-cp73_yujfjpliayta9-meq

完璧!

 

補足

 

・アイコンが逆さまになったら、テキストと同じように180度回転させます
・シンボルのオーバーライドを通してカンタンにアイコンを取り替えるにはアイコンサイズを固定します
・ボタンのサイズ調整はカンタンです

 

1-cpbsiwjrzlrfxmqhhbrx4g

 

成果

1-9m_vb8ljiakt12i2owdwow
定位置

1-qc4m3heybyt6wuwjvh7blg
サイズ変更可能

 

注意

 

Zeplinを使っているなら正しい位置に反映されないなど問題が発生するかもしれません。サンプルファイルをチェックしZeplinに書き出してみるといいです。個人的には大きな問題ではないと感じています。

 

Sketchがアップデートされたら無効になる可能性も否めません。初めてチュートリアル記事を作成しました。もっと良い方法が見つかったら教えてほしいなと思います。

 

ボタン作成の設定はこちら

 

※本稿はHacking the Button in Sketchを翻訳・再編集したものです。

関連記事

おすすめ記事