This is a collection of UI Elements and design constructors aimed for rapid design and prototyping. Also so that designers speak the same language with developers. 😎
This is the file named
oskrhq-uikit.sketchabove.
You can locate and download these in the
_assetsfolder above in this page. Make sure you downloadMaterial Designicons fonts located in theIconsfolder.
| Plugins | What does it do? |
|---|---|
| Runner | Gives you a “Spotlight Search” tool within Sketch so that you can search a Symbol by name or words among other functionality. Really cool. |
| RenameIt | Allows you to rename multiple Layers at the same time. You are duplicating stuff, and being organized in your Sketch file, you might want to download this. 😎 |
| Save With Frame | The plugin will take your selected artboards and output them to a location of your choosing wrapped in an iPhone 6 frame. You can choose 4 different colors of the iPhone 7 and iPhone 6. |
| Stark | The color-blind simulator and contrast checker for Sketch. Design with accessibility in mind. |
| Sort Me | Sorts your artboards and layers. |
| Select By Name | Finds and selects the layers you are looking for. |
As a designer, after you download the file and all the resources, you will have everything you need to start composing experiences.
- If you are looking at the file for the first time, take some time to navigate through all the pages (top left area). These pages are meant to guide you and show you what the kit has, however you do not need to keep this pages in the file. You can delete them.
- Rename the file after you download it for your records.
Note: Since you downloaded the file locally, you essentially made a copy of the file so you will not affect anyone else if you delete or modify things. Feel free to play around, change visual styling, and experiment but always try to stick to the standards you put together.
The UI Kit is a Sketch document containing all the elements found in most applications. Hopefully, these elements have a 1-to-1 relation to coded components (html/js elements) - get with your front-end devs to achieve this. You can use these elements in your designs to come up with high fidelity and ready to code screens. A huge amount of time and effort has gone into developing these elements to ensure they're on brand, aligned with the components and work with the default guidelines. However, you should change the Anatomy of the UI (Typography, Color, Space, Iconography, etc) to fit YOUR product.
The kit is meant to deal with wide spread confusion, missed deadlines, increasing costs, so that you don't have to attend even more meetings with your team. Pretty much, so that the world is a better place. If you use this tool, you will be a happy bunny and everyone will love you - seriously.
The UI Kit covers the core UI elements common to most user interfaces. Every project generally requires bespoke components that are not available in the Kit. If that’s the case, knock yourself out and create something new, just don't reinvent what's already been done and if there is something you are creating that can use reused by other teams/designers, submit a Pull Request to this repo. Creating symbols in Sketch is easy but to ensure that the UI Kit remains a valuable tool for everyone, use the Color, Typography, Space, and Iconography defined in the kit when constructing Symbols.
To your own personal UI Kit, yes. To this one.... No. Period.
Unless you have a really good rationale for the change, feel free to change whatever you want - it is your copy... Keep in mind that every change and variation to the UI elements fragments the user's experiences and dilutes your brand integrity.
Because that’s what designers want to use. Sketch has become the tool of choice for both UX and Visual designers. It is also written in Javascript which gives us a lot of capabilities to bridge the gap between Code and Design.
- Part I: The Anatomy of all Interfaces
- Part II: Crafting a New Visual Language
- Part III: A dictionary for a Design Language