Adobe Max japanに参加したかったきゅん(@kyun_anothercas)です。
先日のAdobe Maxとても参加したかったです・・。
(なんか毎年言ってる気がする・・・)
さて、今回は個人的に使っているsketchのプラグインについてです。
adobeの話をしておいて、Sketchかよって思いますが、今回はSketchなのです。
前回の記事でsketchの素晴らしさを説明しました。sketch元々の機能だったりこんなことができますよー！という内容でした。
http://loop-bitter.xyz/2017/11/01/sketch/
sketch単体でも素晴らしいのですが、プラグインを活用してはじめて便利さに気付いたりします。webデザイナーには必須のツールだと思います。
今回はsketchをより便利にする僕が入れているプラグインを紹介したいと思います。あまり詰め込んでいないのと、初心者向きなプラグインを厳選して入れているので、ぜひ参考にしていただけたらと思います。
今回はさっと紹介していこうと思います！
craft
ダミーテキストや画像の表示にはおすすめのプラグインです。
テキストも、人名、記事、カレンダー、値段、アドレス、住所などなどダミーでワンクリックで追加ができてしまいます。
画像もダミーで用意されており種類も豊富です。dropboxから自分の画像を入れ込むこともできます。これができることにより、毎回ブラウザから検索をかけて、適当な画像を探す心配もなくなりますね！
プロトタイプの作成もできるので、これはマストで入れておくべきだと思います！
icon font
デザインをしていてよくアイコンを使うことありますよね？
このプラグインはワンクリックでアイコンを表示してくれるものです。
コーディングをしていて、よく見かけるのがfont awesomeですが、これももちろん入っています。他にもいろいろなアイコンがあるのでデザインを作成する上で頭を悩ますこともないと思います。
今後は、ネットからアイコンを拾ってきて、貼り付けるようなことをしなくていいので便利です。
marketch
このプラグインはsketchで作成した、コーディング用のファイルに書き出してくれるプラグインですね。
今までだとphotoshopで作成したものをPSDファイルでコーダーに渡してそこからコーディングしていきます。
しかし、、
余白とかフォントサイズとか測るのだるい・・
そもそもphotoshopないとPSD開けないじゃん・・なんてことに陥ってしまいますが！marketchは違います。Sketchがなくてもデザインデータを確認ができてしまいます。
htmlファイル一式で書き出されてブラウザ上で確認ができます。
余白だったり、フォントサイズ、カラーコードもさっと確認ができます。(僕はわざわざスポイトツールで色を取っていて時間がかかってしまいました・・)
結構べんりですよね！サクッとコーディングができてしまいそうです。ようは指示書としても機能しているということになりますね。
サクッと確認できますが、デザインしている状態で、レイヤーのサイズ感などを意識して作っておかないと、しっかり機能しないのでこの部分は大事だなーと思いました
Distributor
レイヤーの並びを調整してくれるプラグインになります。細かい機能ですが、めちゃめちゃ多用しているので書いておきます。
レイヤーとレイヤーが並んでいますが、わざわざ、間隔を測ってレイヤーを並べるのもしんどいですよね。
しかしDistributorを使うと一瞬で終わります。
縦に間隔を10px空ける設定をすると、なんとそれぞれのレイヤーが10pxの間隔を空けて並べることが可能です。
今までアホみたいにサイズを測って、グリッド引いて、なんて事してましたがこれは便利ですね。
個人的に思うこと
細かいけど役に立つものを厳選して紹介しました。個人的にはcraftをもう少し深堀って使いこなせたらなーなんて思いました。
きっと僕はまだまだ使いこなせていないんだろうなと思います・・。もっと便利なプラグインがあって、まじか！と思うようなものがあると思います。書いてて思いましたが、もう少し勉強をしていかなければ・・！と思いました。
他にもこんな便利プラグインあるよ、なんてものあれば是非是非教えて欲しいです。
photoshopと比べて、簡単に便利に作れるツールなのでSketchは是非使ってくださいー！
