236 lines
9.4 KiB
HTML
236 lines
9.4 KiB
HTML
<h1 id="awesome-sketch-awesome">awesome Sketch <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<blockquote>
|
||
<p><a href="http://bohemiancoding.com/sketch/"><strong>Sketch
|
||
3</strong></a> has become very popular in the Design community. How much
|
||
do you know about it?</p>
|
||
</blockquote>
|
||
<p>A curated list of awesome Sketch videos, articles, plugins, whatever,
|
||
for designers, developers, or neither.</p>
|
||
<p>Found something cool? Please, <strong><a
|
||
href="contributing.md">contribute</a></strong>!</p>
|
||
<p>–</p>
|
||
<ul>
|
||
<li><a href="#videos">Videos</a> :movie_camera:</li>
|
||
<li><a href="#guides">Guides</a> :blue_book:</li>
|
||
<li><a href="#articles">Articles</a> :newspaper:
|
||
<ul>
|
||
<li><a href="#tips-and-tricks">Tips and Tricks</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
</ul></li>
|
||
<li><a href="#community">Community</a> :sunglasses:</li>
|
||
<li><a href="#plugins">Plugins</a> :electric_plug:</li>
|
||
<li><a href="#templates--ui-kits">Templates & UI Kits</a>
|
||
:scissors:</li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#other">Other</a></li>
|
||
</ul>
|
||
<h2 id="videos">Videos</h2>
|
||
<h6 id="tutorial-only">Tutorial-only</h6>
|
||
<ul>
|
||
<li><strong><a
|
||
href="https://www.youtube.com/playlist?list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS">Sketch
|
||
3 Tutorials</a></strong> (25 <em>awesome</em> lessons for
|
||
beginners)</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLLnpHn493BHHUZe9bihv37Z6CyXBTyb-9">Exploring
|
||
Sketch plugins</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/user/learnsketch/videos">LearnSketch
|
||
channel</a></li>
|
||
</ul>
|
||
<h6 id="process-of-designing-dashboards-mobile-apps">Process of
|
||
designing dashboards, mobile apps</h6>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLdOb4Jg-Lxg-g4NyfQZkgkfwXJpMFwo5E">Sketch
|
||
3 Workflow playlist</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCSdp5logiFTM3SyLJrHabOQ/playlists">SketchApp
|
||
TV playlists</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=6SyFaRNVuUA">Sketch 3 for
|
||
iOS App Design Step by Step</a></li>
|
||
</ul>
|
||
<h6 id="general-screencasts">General screencasts</h6>
|
||
<ul>
|
||
<li><a href="http://www.sketchcasts.net/">SketchCasts</a> <em>(paid
|
||
mostly)</em></li>
|
||
</ul>
|
||
<h2 id="guides">Guides</h2>
|
||
<ul>
|
||
<li><a href="https://readymag.com/u91593485/guidetosketch/">A Guide to
|
||
Sketch</a></li>
|
||
<li><a href="http://sketchshortcuts.com/">Sketch Shortcuts</a></li>
|
||
<li><a
|
||
href="http://www.bohemiancoding.com/sketch/support/documentation/">Documentation</a></li>
|
||
<li><a href="https://www.switchtosketchapp.com/">Switch to
|
||
Sketch</a></li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<h6 id="tips-and-tricks">Tips and Tricks</h6>
|
||
<ul>
|
||
<li><a
|
||
href="http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/">11
|
||
tips for prototyping with Sketch</a></li>
|
||
<li><a href="http://saloon.io/10-tips-tricks-for-sketch/">10 Tips &
|
||
Tricks for Sketch</a></li>
|
||
<li><a
|
||
href="https://medium.com/design-idea/7-tips-for-sketch-users-e09c27c7ce08">7
|
||
Tips for Sketch Users</a></li>
|
||
<li><a
|
||
href="http://webdesign.tutsplus.com/tutorials/9-sketch-features-you-should-be-using--webdesign-18016">9
|
||
Sketch Features You Should be Using</a></li>
|
||
<li><a
|
||
href="https://medium.com/product-labs/5-tips-to-help-you-design-faster-in-sketch-a9db54d10a72">5
|
||
Tips to Help You Design Faster in Sketch</a></li>
|
||
</ul>
|
||
<h6 id="tutorials">Tutorials</h6>
|
||
<ul>
|
||
<li><a
|
||
href="http://unitid.nl/english/spot-the-difference-fireworks-and-sketch-3">Fireworks
|
||
vs. Sketch</a></li>
|
||
<li><a
|
||
href="https://medium.com/@bazdeas/supercharge-your-workflow-in-sketch-ebc9e5274845">Supercharge
|
||
your Workflow in Sketch</a></li>
|
||
<li><a
|
||
href="http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534">Sketch
|
||
for Beginners: Design a Login Form Interface</a></li>
|
||
<li><a
|
||
href="http://webdesign.tutsplus.com/articles/the-a-to-z-of-sketch--cms-22030">The
|
||
A to Z of Sketch</a></li>
|
||
<li><a
|
||
href="https://medium.com/sketch-app/mastering-the-bezier-curve-in-sketch-4da8fdf0dbbb">Mastering
|
||
the Bézier Curve in Sketch</a></li>
|
||
<li><a
|
||
href="https://medium.com/@ericajaclyn/typography-in-sketch-3-linked-text-styles-9946a32af688">Typography
|
||
in Sketch 3: Linked Text Styles</a></li>
|
||
</ul>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a href="http://teamsketch.io/">TeamSketch</a>, a community for
|
||
Sketch designers powered by Slack</li>
|
||
<li><a
|
||
href="https://plus.google.com/communities/105292892811319179094">Google+
|
||
group</a></li>
|
||
<li><a href="https://www.facebook.com/groups/sketchformac/">Facebook
|
||
group</a></li>
|
||
<li><a href="http://www.reddit.com/r/sketchapp">on Reddit</a></li>
|
||
<li><a href="http://sketchtalk.io/">SketchTalk</a>, unofficial
|
||
forum</li>
|
||
<li><a href="http://sketchhunt.com/">Sketch Hunt</a></li>
|
||
<li><a href="https://www.designernews.co/">Designer News</a> <em>(people
|
||
talk a lot about Sketch there!)</em></li>
|
||
</ul>
|
||
<h2 id="plugins">Plugins</h2>
|
||
<blockquote>
|
||
<p>A plugin manager like <a
|
||
href="https://sketchpacks.com">Sketchpacks</a> is highly
|
||
recommended.</p>
|
||
</blockquote>
|
||
<h6 id="must-have-heart">Must-have :heart:</h6>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/timuric/Content-generator-sketch-plugin">Content
|
||
Generator</a></li>
|
||
<li><a href="https://github.com/rodi01/RenameIt">RenameIt</a></li>
|
||
<li><a href="https://github.com/utom/sketch-measure">Sketch
|
||
Measure</a></li>
|
||
<li><a
|
||
href="https://github.com/getflourish/Sketch-Style-Inventory/">Style
|
||
Inventory</a></li>
|
||
<li><a href="https://github.com/ddwht/sketch-dynamic-button">Dynamic
|
||
Button</a></li>
|
||
<li><a href="https://github.com/mauehara/sketch-page-switch">Page
|
||
Switch</a></li>
|
||
<li><a href="https://github.com/hrescak/Sketch-Flex-Layout">Sketch Flex
|
||
Layout</a></li>
|
||
</ul>
|
||
<h6 id="nice-to-have-thumbsup">Nice-to-have :thumbsup:</h6>
|
||
<ul>
|
||
<li><a href="https://github.com/webpatch/Handy-Tools/">Handy
|
||
Tools</a></li>
|
||
<li><a href="http://easier.cc/">Easier.cc</a> (Files up to 5 MB)</li>
|
||
<li><a href="https://github.com/abynim/UserFlows">User Flow</a></li>
|
||
<li><a href="http://sketchrunner.com">Sketch Runner</a></li>
|
||
<li><a href="https://github.com/x-raizor/Efficiency">Efficiency</a></li>
|
||
</ul>
|
||
<h5 id="get-more-plugins">Get more plugins</h5>
|
||
<ul>
|
||
<li><a href="http://www.sketchappsources.com/plugins.html">SketchApp
|
||
Resources: Plugins for Sketch</a></li>
|
||
<li><a href="https://github.com/sketchplugins/plugin-directory">Sketch
|
||
Plugin Directory</a></li>
|
||
<li><a href="http://sketchplugins.com/">SketchPlugins mailing
|
||
list</a></li>
|
||
<li><a href="http://awesome-sket.ch/">Awesome Sketch Plugins</a></li>
|
||
<li>Websites related to resources (see <a href="#other">Other</a>
|
||
section).</li>
|
||
<li>In the <a href="#community">Sketch community</a></li>
|
||
</ul>
|
||
<h2 id="templates-ui-kits">Templates & UI Kits</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/luandro/sketch-responsive-design-template">Responsive
|
||
Web Design Template</a>, a template with <a
|
||
href="https://fortawesome.github.io/Font-Awesome/">Font-Awesome</a> and
|
||
<a href="http://bootstrapuikit.com/">Bootstrap UI Kit</a> as symbols for
|
||
fast web design.</li>
|
||
<li><a href="https://github.com/nvk/sketch-ios">Sketch iOS
|
||
Templates</a>, a collection of many iOS templates.</li>
|
||
<li><a href="https://github.com/teracyhq/wireframe">Teracy Wireframe
|
||
Kit</a>, created to help speed up your wireframing process. Includes
|
||
basics UI elements for web, mobile and other devices.</li>
|
||
</ul>
|
||
<h2 id="services">Services</h2>
|
||
<ul>
|
||
<li><a href="https://zeplin.io">Zeplin</a> – design, prototyping and
|
||
collaboration</li>
|
||
<li><a href="https://marvelapp.com">Marvel</a> - design, prototyping and
|
||
collaboration</li>
|
||
<li><a href="https://avocode.com">Avocode</a> – get CSS, export assets,
|
||
measure and handpick colors.</li>
|
||
<li>Invision Inspect – it gives developers access to measurements,
|
||
colors, and assets from a designer’s prototype</li>
|
||
<li><a href="https://sympli.io">Sympli</a></li>
|
||
<li><a href="https://www.goabstract.com/">Abstract</a> - Version control
|
||
and collaboration for Sketch files.</li>
|
||
</ul>
|
||
<h2 id="other">Other</h2>
|
||
<ul>
|
||
<li>(Newsletter) <a href="https://bohemian.curated.co/">Sketch official
|
||
newsletter</a></li>
|
||
<li>(Newsletter) <a href="http://sketchtricks.com/">Sketch
|
||
tricks</a></li>
|
||
<li>(Resources) <a href="http://www.sketchappsources.com/">SketchApp
|
||
Resources</a></li>
|
||
<li>(Resources) <a href="http://sketch.land">SketchLand</a></li>
|
||
<li>(Resources) <a
|
||
href="http://sketchresources.com/">SketchResources</a></li>
|
||
<li>(Resources) <a href="http://sketchapp.tv/">Sketchapp TV</a></li>
|
||
<li>(Resources) <a href="http://sketchrepo.com/">Sketch Repo</a></li>
|
||
<li><a href="http://sketchapp.rocks/">SketchApp Rocks</a></li>
|
||
<li><a href="http://www.sketchtips.info/">SketchTips</a>, a blog about
|
||
Sketch</li>
|
||
<li><a href="https://medium.com/sketch-tricks">sketch-tricks on
|
||
Medium</a></li>
|
||
</ul>
|
||
<h2 id="keep-up-to-date">Keep up to date!</h2>
|
||
<p>Sketch has got a <strong>fast-growing community</strong>. Joining
|
||
them (<em>see <a href="#community">Community</a> section ↑</em>),
|
||
following their <a href="http://bohemiancoding.tumblr.com/">blog</a> and
|
||
subscribing to their <a
|
||
href="https://bohemian.curated.co/">newsletter</a> are the best ways to
|
||
keep up to date so far.</p>
|
||
<hr />
|
||
<h6 id="license">LICENSE</h6>
|
||
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p>To the extent possible under law, <a href="http://diessi.ca">Diéssica
|
||
Gurskas</a> has waived all copyright and related or neighboring rights
|
||
to this work.</p>
|
||
<p><a href="https://github.com/diessica/awesome-sketch">sketch.md
|
||
Github</a></p>
|