Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, modular design exponentially decreases your production time and increases your bottom line.
Good links to Sketch plugins and helpers
How to use real data with Sketch. Needs plugins.
Using Precious Design Studio and Lukas Ondrej’s Sketch Data Populator plugin we were able to quickly prototype a template for the profile view and use a JSON file to add real data to the design.
Free download from design+code. Requires the San Francisco font, available from the Apple Watch Design Resources link on the WatchKit page (iOS Developer Certificate required).
100% vector including devices, icons and clocks. Every element, including the Apple Watch devices, icons and clocks have been vectorized in Sketch. You can resize, export and [use] them at any resolution.
- Percentage widths
- Math in width/height boxes
- Suffixes in width/height boxes
- Symbols + opacity, blending, shadow
- Document color presets
The days of detaching a symbol just to indicate an inactive or some other kinda state are over! With the new update, you can change the opacity, blending mode, or shadows of a Symbol and not muck up the original instance. Huge!
Also, bonus note, there was a visual change in how the symbol groups are displayed. When you’ve got one selected, you get a bright purple active color in the Layers List.
Swatches is a bare-bones plugin for generating colour palettes on the fly – just drop the .sketchplugin file in to your Plugins folder and you’re ready to go.
Fire it up and you’ll be prompted for comma-separated hexadecimal values. When you hit OK it’ll output a coloured tile, hex and RGB values, and even a label to name your swatch.
In digital graphics, computers draw vector shapes using a collection of points — a sort of connect-the-dots — and most programs use “Bézier curves” to create curved lines around those vector points. You may be familiar with their appearance in design and motion graphics tools, but understanding how they work will take out some of the pain and confusion when you’re trying to create a particular shape. Building off our understanding of vector shapes, this article will demystify designing with Bézier curves.
The Style Inventory … gives you an overview of all your used styles and helps you to merge styles of similar layers into one. This repositiory also contains a few other helpful plugins.
Example: Duplicate Artboard (next to the current artboard)
This improves the built in behavior of artboard duplication in Sketch. If the selected artboard is in the middle of other artboards, all artboards on the right side will be shifted to the right before the artboard is duplicated. Requires any layer of an artboard to be selected.
Shortcut: shift + ⌘ + D
Sketch Toolbox plugin manager, dynamic buttons, text and image placeholders, more.
Before we get started, go download Sketch Toolbox, which is a simple 3rd-party plugin manager for Sketch.
Swap Fill & Border
Clear Styles
Dynamic Button
Child Layers
Measure
Content Generator
Day Player – placeholder images
Page Switch
Sketch Commands
Sketch Plugins
17-part series on tools, tips, symbols, text styles, artboards, layouts, exports, UI kits, dynamic buttons, plugins/extensions and more. Excellent overview. Dynamic button extension is especially useful. Part 12 on the Foundation 5 UI kit is missing from the main link – but is available on YouTube.
Bootstrap 3 UI Kit – very extensive collection of elements, but not converted to symbols
