💎 The Wireframe Kit
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
⚙️ Installation
- Clone or download this repo
- Install the resources
- Open
TheWireframeKit.sketch
in Sketch - Optional but recommended: Add as library
File > Add as library…
- Enjoy!
🛠 Resources
The Wireframe Kit makes use of some resources:
Fonts
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
Icons
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.sketch
in 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.
📂 What's inside?
Text styles
The Wireframe Kit includes a set of predefined text styles.
Symbols
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.
Missing something?
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.
Metrics
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
Prototype
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.
🎉 All set!
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