large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://blog.framer.com/4-ui-design-kits-to-kickstart-your-product-ideas-b08393c3d0a7?source=rss----a40a6ad4b5fc---4">Framer &#8211; Medium</a> | Framer Team </p>
<h4>iOS, Android, Web and wireframe Framer kits, plus a new beginner tutorial to get you started | <a href="https://framer.com/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=subtitle">Framer.com</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rYCWrGsGdOXHeiJwPYti4w.png"></p>
<p>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.</p>
<h3>How To Get The Kits</h3>
<ol>
<li><a href="https://framer.com/updates/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=post">Update to v109</a><strong>.</strong> 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.</li>
<li>The UI Kits are also available for <a href="https://framer.com/getstarted/resources/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=post">download from the Resources section</a> of our site.</li>
</ol>
<h4>Don’t have Framer? <a href="https://framer.com/download?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=post2">Get your free 14 day trial here.</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*T6lOJUNK3BDEuJORpCe48w.png"></p>
<p><strong>A New Beginner Tutorial<br /></strong>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8RANnYO9MaZxJdM1GFRYug.png"></p>
<p><strong>iOS UI Kit<br /></strong>This Framer-specific kit contains all the basic building blocks for iOS 11 apps, designed according to <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/themes/">Apple’s guidelines</a>. 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.</p>
<h4><a href="https://framer.com/getstarted/resources/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch">Download it here</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VTDMRayE504yei2AlECt6g.png"></p>
<p><strong>Android UI Kit<br /></strong>This robust kit has been carefully curated according to <a href="https://material.io/guidelines/">Material Design</a> 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.</p>
<h4><a href="https://framer.com/getstarted/resources/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch">Download it here</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sa0jqqnZG6Cy9ibRibyzgQ.png"></p>
<p><strong>Web UI Kit<br /></strong>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.</p>
<h4><a href="https://framer.com/getstarted/resources/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch">Download it here</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e_2Q8dOX4vbHC0KYBRzKjg.png"></p>
<p><strong>Wireframe UI Kit<br /></strong>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.</p>
<h4><a href="http://www.framer.com">Download it here</a></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G2nMBEsHA53j-2T4HnPL8Q.png"></p>
<p><em>You’ll find all of the above UI Kits available for download directly in your Framer Welcome window. If you don’t already have Framer, </em><a href="https://framer.com/download?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=footer"><em>download our free trial</em></a><em> and take these kits for a test drive. Once you’re ready to subscribe, join our ‘</em><a href="https://framer.com/invite?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=footer"><em>Refer a Friend</em></a><em>’ program to get a special discount.</em></p>
<p><a href="https://framer.com/features/design/?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=footer"><img alt="" src="https://cdn-images-1.medium.com/max/600/1*sdtKFiW1YN4FaMrHeNgUQQ.png"></a><a href="http://www.facebook.com/groups/framerjs"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*PHGNn6aQzjMXnmTEYat9GQ.png"></a><a href="https://framer.com/download?utm_source=medium&amp;utm_medium=post&amp;utm_campaign=uikits_launch&amp;utm_content=footer"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*axq8Dl8TDS3uoNDd9JzwVg.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b08393c3d0a7" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.framer.com/4-ui-design-kits-to-kickstart-your-product-ideas-b08393c3d0a7">4 UI Design Kits To Kickstart Your Product Ideas</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


4 UI Design Kits To Kickstart Your Product Ideas

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 | F…

Top Stories