4 UI Design Kits To Kickstart Your Product Ideas
iOS, Android, Web and wireframe Framer kits, plus a new beginner tutorial to get you started | Framer.com
Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →
These days, Framer offers a great starting place for fleshing out your product ideas. Whether you’re iterating on checkout scenarios or designing a new in-app calendar, chances are, you’d rather not start from scratch. That’s why we’ve released a series of iOS, Android and Web UI Kits, each containing all the native visual elements you need to quickly design screens and flows. And if you’re in the early stages of UX exploration, our Wireframe Kit provides all the foundational structure you need to kick off your process.
How To Get The Kits
- Update to v109. You’ll find all the UI Kits and a new beginner tutorial listed in your welcome window. Simply click to open any kit as a new project.
- The UI Kits are also available for download from the Resources section of our site.
Don’t have Framer? Sign up free.
A New Beginner Tutorial
Get a feel for Framer’s new interface by opening up this tutorial, available in the welcome window. It provides an overview of how our adaptive layout and advanced vector editing make it a breeze to design everything from beautiful icons to multi-screen flows.
iOS UI Kit
This Framer-specific kit contains all the basic building blocks for iOS 11 apps, designed according to Apple’s guidelines. Consider it a template for mocking up screen flows or a way to grab and use specific UI elements. The kit comes packed with 8 different keyboards and modals, as well as 4 phone screen templates that offer everything from launch simulation to notifications and widgets. Native-level buttons, navigation bars, dropdown lists, sliders and typography — it’s all packaged in one handy starter kit.
Android UI Kit
This robust kit has been carefully curated according to Material Design guidelines. It contains 8 different keyboard types, 4 modals and 4 different phone templates that each present a variety of scenarios, including launch, notifications, quick actions and lock screens. A key differentiator in our kit is that we provide you pre-made OS screens that mimic application behavior from start to finish. Putting utility and functionality first, the components of this Android UI Kit are easy to insert into any of your Framer projects.
Download it here
Web UI Kit
Whether you’re designing a simple product website or complex data dashboard, our contextual Web UI Kit provides all the readymade components you need to get started. From content blocks, form elements and various button states to navigation bars and input tables, everything is designed to be used together or pulled apart. Need to inject some personality? Select from over 1,161 icons, available directly in our in-app library.
Download it here
Wireframe UI Kit
UX designers will love this robust kit that prioritizes functionality, behavior and content hierarchy above all else. We’ve included 3 different devices, stripped of everything but the essentials. Scalable arrows also indicate general flow directions and are a great resource for testing various sequences and scenarios. All-inclusive and responsive by design, we recommend this multi-platform Wireframe Kit as a starting point for any product design work.
Download it here
