noteやブログで使えるカバー画像をサクッとつくれるサービスを公開しました 作業効率UP！InVision Studioのショートカットキーまとめ Webサービスは総合格闘技である

Mix & match illustrations of people with a design library. Rotate and position the…

Sketchのデザインリソースをダウンロードできたり、様々なところで配布・公開されているものをまとめているサイトのまとめです。 中には素材に限らずちょっとしたテクニックやチュートリアルを紹介したり、便利なツールやプラグインの紹介をしているサイトもあるので、普段からSketchを多用している人はもちろん、これから使ってみようと思っている人もぜひチェックしてみてください。 紹介しているサイトの多くはフリーの素材を中心にまとめてはいますが、サイトでは特にライセンスの記載がなくても配布・公開元では制約がある可能性もあるので、利用する場合はそちらも併せて確認することをおすすめします。 Sketch App Sources ひとつ目からここだけ覚えておけば十分なレベルのサイトですが、Sketchのデザインリソースを数多くまとめているサイトで、現時点（当エントリー公開時点）でも2800以上がまとめられて

Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。 ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成できます。

Your brand is a living, evolving entity that needs to keep pace with the market. Your brand is a living, evolving entity that needs to keep pace with the market.

PSDDD.co is an extensive collection of free Photoshop PSD & Sketch App resources for professional UI designers.

A collection of great design reads — UI, UX, web design, prototyping and beyond with Sketch

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.

Whether you design a small App or a full-fledged web portal — buttons are everywhere. Luckily we can use Symbols to keep our workflow DRY. But even if you have only 3 different types of buttons you likely end up having more than 30 Symbols, considering all the different colours and states. Wouldn’t it be nice to only have one Symbol for all buttons? Thanks to

3 things I see in products, that make my heart break

If I type too much up here, you’ll just end up skipping to the GIFs anyway, but in case you did read this, add a comment to this article saying “Jon, you had me all wrong! My interest hangs on your every word.” Enjoy! 😄 1. Drag-and-Drop to Replace a Shape FillThe fastest way to replace a photo fill in a shape with a photo of R2D2: “Beep bop boop beep beep beep.” — R2D2How-To: Select the shape you

複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr

Webデザイナーにプロトタイピングツールはもう不要…？ こんなプラグインが出ていました。 Click-Thru Prototype 「Sketch plugin that creates a HTML click-through prototype of a website design」とのこと。 これがすごい便利！ ・Sketchで作成したスクリーンの特定の箇所にリンクが貼れる ・もちろんリンク先のアートボードを指定可能 ・クリックしたときにJavaScriptで表示するアラートも再現可能 ・スマホのメニューみたいなのも再現可能 ・PC・タブレット・スマホのレスポンシブWebデザインも再現できる なんじゃこりゃ！！ Click-Thru Prototypeの使い方 まずはプラグインをインストール。githubから落としてもいいですが、今回はSketch Toolboxを使用します。コレ

こんにちは。Sketch大好き・デザイン大好きのデザイナーです。 みなさんは、デザインしていて「もうこんな時間・・」「時間足りない・・」と思ったことはありませんか？ 作業を効率化すれば時間をぐっと短縮することができます。 今日は毎日デザインをしているあなたにSketchのショートカットキーをご紹介したいと思います。 Sketchの初心者の方もそうでない方も、是非見てみてください。 （そもそも「Sketchってなんぞ」という方は「Sketchでデザインをして気付いたPhotoshopより優れているポイント」と合わせてお読みください。） ワークスペース表示 まずはSketchのウィンドウ全体（レイヤーリストとインスペクタとワークスペース）にまつわるのショートカットキーのご紹介です。 アートボード追加 レイヤーリスト表示・非表示 インスペクタ表示非表示 レイヤーリスト・インスペクタ表示非表示 プ

Adobeが開発を終了したことをきっかけにFireWorksの代替ツールとして注目さはじめた、オランダ・アムステルダムに拠点をおくBohemian Codingが開発する Sketch 3 の「日本語フォントで行間( line )がおか… 特に使用頻度の高いヒラギノでおかしいので、Zeplinなど連携ツールを使っている人も困っているのでは。 そしておそらくみなさん「そろそろ解決方法見つかってるかも」と思ってぐぐる → ない という経験をされているのでは。 上記ブログの方が開発元のBohemian Codingに問い合わせてくれてますが、彼らもこの問題を把握しているものの、まだアップデートはされないまま…( ˘ω˘ ) ずっとこの問題に悩まされていたのですが、今日！優秀な後輩と同僚が裏技を発見したので共有します！ わかったこと日本語というより、OpenTypeのフォントにのみバグがおこる。