Before we get started, go download Sketch Toolbox, which is a simple 3rd-party plugin manager for Sketch [which] provides a directory of plugins on github that you can browse and install directly. (I’m not 100% how the directory is populated, though.) My favorite features are:
- You can search by plugin name, description, or developer name
- It downloads and installs the plugin for you
- It shows you which ones you’ve already installed
PLUGINS:
Sketch App Sources is a collection of free design resources created by named designers from the Sketch community who wants to show what a wonderful tool, Sketch 3, can be. There are ui, icons, sliders, buttons, website templates, mobile applications and many more free .Sketch files you can download and use on your next web design project.
With Sketch Mirror, you can preview your designs on your iOS devices while you work on them, making it the perfect companion for Sketch.
Made for Sketch.
Sketch Mirror shows a live preview of your document on your iOS device. Because we built Sketch Mirror exclusively for Sketch we’ve integrated it directly into the Mac app.Swipe to Navigate.
An example of this deep integration is that we support Pages and Artboards in Sketch and you can swipe between artboards on your device while you can continue your work on the Mac.Multiple Devices.
Want to preview your iPhone and iPad artboards at the same time? Want to compare standard resolution with retina? Using Wi-Fi, you can connect to multiple Sketch Mirror devices simultaneously.
Streamline 1600+ vector icons for iOS and Android. Adapt line thickness. Selected (filled-in) states and Sketch format available.
It’s all the goodness of Font Awesome in easily accessible symbols crafted specifically for Sketch 3!
Just go to Insert > Symbols and choose the Font Awesome icon you’d like to include. The icons are organized alphabetically and aliases are included.
You can safely delete the Instructions artboard and/or page and start your own Sketch project with the power of Font Awesome!
Sketch uses one unit, styles only relevant to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to template multiple screens.
Design isn’t hard to learn. That’s because most of us are already building products and are familiar with what design means. What used to be complex and confusing is now simple and effective, thanks to Sketch, an app that is entirely focused on user interface design. Unlike Photoshop, you don’t need to worry about photo editing and the hundreds of other settings that are noises to designing a simple application.
- Learn the “Insert”-Shortcuts
- Always have the right zoom
- Scrolling
- Hide/Show sidebars
- Presentation mode
- Ruler
- Moving objects
- See margins while moving
- Resizing objects
- Naming and grouping objects
- Bonus: Resources
On sketchappsources.com you can find a great collection of free design resources for Sketch 3 – I can recommend you to use them in your projects.
Uses meteor.js. YouTube video of a plugin in development. Sketch/Steel.
Good beginner tutorial for Sketch 3.
Sometimes you need to tweak or slightly redesign an existing web page without original assets. Some common ways to do this would be to recreate a page from scratch, tweak it in a web inspector, or in the worst case make a screenshot and mess with bitmap (if you enjoy pain). Another hacky way to do that is to actually convert the web page to a vector graphic. Here is how I do it:
1. Convert page to SVG
Option one: Use http://derailer.org/paparazzi/ like so https://www.youtube.com/watch?v=9cgHQyXm4_Y to import a page into sketch. If it doesn’t work well try option two.Option two: Go to http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx and insert the desired URL of a web page and the screen size.
Note: Sometimes you want to access a page behind a login, or an offline document. You can use this chrome extension http://cl.ly/VRdx to save a webpage as a single document and feed its internal code to hiqpdf converter.