Passion make things more better

Ruby on Rails / React.js / Swift / AWS / Docker

エンジニアがSketchを使い始める時にやったアレコレ

僕がSketchを使うにあたり初めにやったことをまとめました。

基礎知識のインプット

使い方を知らないと元も子もないので、まずは基礎知識のインプットを行いました。 とりあえず以下のリンクを読んで、ざっくりと把握しました。

UIデザインの作成ツール!誰でも分かるSketchの使い方【初心者向け】

これで抑えた点は、ざっくりと以下のような項目になります。

  • とりあえず何か置きたいときは、左上の「Insert」を押せばいいらしい
    • 押すといろいろ出てくるので、見ればわかるかと
  • artboardを使えば、デバイスに応じた画面サイズの枠を作れるらしい
  • 図形の操作(色塗ったりとか)は右側でいろいろやるらしい
    • 項目がそこまで多くないので、結構直感的に使える
    • スライスの設定も右側の下の方でできる
  • マスクは図形を置いて右クリックして「Mask」選択でできる
  • 「File」-> 「New From Template」でよくある系のベーステンプレが現れる
    • コピーして使いたいところに貼り付ける感じで使うのかな
  • ちゃんとショートカットがある
    • これは使い慣れてきたら覚えればいいかくらいに捉えました

プラグイン

「こういうことできないのかなぁ..」と考えていて、あれこれ調べていたら、どうやらプラグインなるものがあるらしい...(そりゃそうだろ)。

プラグインの管理

プラグインの管理どうやるのが良いのだろうか、と探していたらSketch Toolboxを使うのがよくあるパターンらしい。

コマンドでやったほうがいいよ、みたいに書いている人もいましたが、僕はSketch Toolboxを使いました。

使い方は開けばわかると思います笑。installの時はsearchのところに対象のプラグインをいれて、表示された物のinstallボタンを押すだけです。

とりあえず入れたプラグイン4つ

エンジニア視点でとりあえずこんなのあったらなぁ、というのを入れました。

Content Generator for Sketch

仮画像を当てるのに使えるプラグイン

Sketch Measure

フォントサイズとか余白をかき出してくれるプラグイン

Sketch Palettes

配色をパレット化して保存できるプラグイン

Sketch Use FontAwesome

エンジニアなら使ってる人多いですよね!FontAwesomeのアイコンをそのまま使えるプラグインです。 そんなアイコン一個一個作れないよ、という人が多いと思うので。

最後に

あくまでエンジニアの人がSketchを使い始めるときの初めの一歩くらいの感覚で読んでいただけると。 僕の場合、Sketchはワイヤーを作る時に使うことが多いので、これで事足りてしまいます。誰かのお役に立てると幸いです。