The only Sketch toolkit you’ll ever need to create topnotch wireframes for your awesome app and web project. ~Created by Elwin van den Hazel
- Clone or download this repo
- Install the resources
- Open
TheWireframeKit.sketchin Sketch - Optional but recommended: Add as library
File > Add as library… - Enjoy!
The Wireframe Kit makes use of some resources:
The official Apple SF Pro Typeface (Regular & Bold) and the Fira mono font are used. Download & install the fonts first before you start:
- 📦 Download Apple San Francisco Pro
- 📦 Download Fira mono
For the icons, we suggest to make use of the official Google Material Design icon set. To use this icon set:
- 📦 Download the icon set.
- Open
material-design-icons-sharp.sketchin Sketch and add as a libraryFile > Add as library….
It is possible, of course, to use your own or other icon libraries. As long as the icons are 24 x 24px in size.
The Wireframe Kit includes a set of predefined text styles.
The Wireframe Kit includes all the basic symbols you’ll need for your next project. With this set of symbols, you can create endless variations and combinations to build your interface.
Need something that’s not in The Kit? Be creative and see if you can make something new by combining existing symbols.
If that’s not working out, create a new issue.
To keep your wireframes consistent, The Kit makes use of the base-2 numeral system (2, 8, 16, 32, 64, ...) for the size, spacing and aligning of elements.
Pro tip: In sketch, use the “alt” key + mouse hovering to check the distance between elements
If you have a recent version of Sketch (> 49) you can make use of the prototype feature of sketch. 💪
ℹ️ Check here for more info if you want to learn more about Sketch prototype.
Now go and create some awesome wireframes! 👌
If you notice any typos, errors, inconsistencies or if you have any questions or suggestions for improving The Wireframe Kit, please create a new issue