Log in to like this post! Design a Consistent, Buildable Progressive Web App with JS Blocks UI Kit Spasimir Dinev / Thursday, May 18, 2017 Every morning as I go up the stairs in our office, I see the Infragistics logo with “Design, Develop, Experience” slogan underneath. Our Ignite UI for Angular components slice development times drastically - right out of the box you get great experience for the users down the road. And with the addition of the UI kit for Sketch we’re just releasing, you bet we’ve covered design as well. How did the UI kit come about? We are a team of designers and developers, working together on Ignite UI JS Blocks - Angular components for progressive web applications. Sketch is used extensively throughout the process of creating their styling. From the simplest of buttons to the more complex cards and grids, we use Sketch to design the pixel-perfect styles, then to test them in demo screen- and app designs, and when finally happy with the outcome - write the necessary code. The UI kit was naturally created. We needed all existing components contained in one file to: easily share and track changes of the whole Material Theme for JS Blocks (hence, it’s on GitHub) have a base when creating consequent themes - it’s much easier when all design elements are in front of your eyes. It’s true. With the introduction of symbol overrides in Sketch, we saw a great opportunity to help speed up the design processes of any designer who works on a JS Blocks project. And here it is - we’re proud to share our Ignite UI JS Blocks UI Kit with all of you. How to use the kit Out of the box you drag and drop components on Sketch artboards and get a beautiful preview of your final app within minutes. The design elements are based on Material Design guidelines to ensure consistency in the final compositions. This UI kit is actually buildable! It gives a designer the correct visual representation of what a developer will produce out of the box with JS Blocks. Fonts, sizes, colors, shadows, paddings and margins - all included. The designed components are scalable inside Sketch. While they are mobile first, all components in JS Blocks are made for progressive applications, hence what you have in the kit can be stretched for tablet and desktop effortlessly. You can extend the functionality of the kit with the new flex-like functionality of the free Auto Layout plugin. Functionality is paramount. There’s no fluff in this kit - you get what you need to create functional, efficient, performance-optimized progressive web applications. Should you want fluff — you have the freedom to change anything you like in Sketch. The kit covers the whole ux/ui design process. Use it to quickly prototype screens, customize and edit elements until you get your final app design, and hand off to development with assets exportable for any screen and format needed. Customize Swap icons Change them on the fly. Use the included material design icons, or import your own set for further personalization of your app design. Tip: use IconJar for some icon management. Sort your icons by projects/styles and drag&drop them inside your Sketch project. Override labels to quickly create customized lists. We have created several preset lists with headers, avatars, primary and secondary text placeholders, and icon placeholder. Including a badge to your avatar is as simple as copy-pasting one of the presets we have. Also, use this feature to enter dummy paragraphs, configure error messages and hints in forms, etc. Tip: Use the free Craft plugin to auto-generate images and random texts. Test colors See changes instantly on buttons, navigation bars, checkboxes, and on the icons included in the kit. You’re, of course, not limited to the preset colors. Go ahead - swap them with your own color theme and it will automatically update colors throughout your UI kit. Complete overhaul We like to tinker and we hope you do too. The UI kit is a good place to start, but how your application will look depends on your needs, ideas, and preferences. Available components The ever-expanding component list includes: Data grid Switch, RadioButton Button, Button Group Input Carousel Tabbar List Search bar Avatar with Badge Navigation Drawer Navbar Dialog Progress Indicators Range Slider Toast and Snack bar To recap JS Blocks UI kit is a free, open-source UI Kit designed originally for Sketch 41 to work seamlessly with the open-source Angular UI components IgniteUI JS Blocks, crafted by Infragistics. The kit features advanced usage of nested symbols & symbol overrides, and follows the Material Design guidelines by Google. Its purpose is to help both designers and developers save precious time by providing 1:1 Sketch components to the actual Angular counterparts Infragistics provides.