Published on <a href="http://ift.tt/2s4ZO9t">| Prototyping: From UX to Front End &mdash; Medium</a> Greg R 
In my last article “<a href="http://ift.tt/2sPsPDr">New Framer Workflow — 10 things you’ll love ❤️️</a>” I covered most exciting new features of Framer, including the Design workspace. There’s one thing however that would make this new workflow much more complete and productive… look no further, because there it comes— iOS UI Kit for Framer!
🔥 You can download it from <a href="http://ift.tt/2s4R82Y">http://ift.tt/2s4R82Y</a>
The UI Kit is based on the one from Sketch that you’re all probably familiar with. But there’s more! Framer’s got great potential for going beyond static images.
<blockquote>Imagine a UI Kit that gives you all the fancy system animations out of the box!</blockquote>
That’s what Framer is capable of and this is what I thought the ideal UI Kit should do. So even though it will evolve, here’s what I figured out.
<h4>UI Elements Library</h4>
<img alt="" src="http://ift.tt/2sPyTf8">
For a start there are some basic building blocks for iOS apps on an iPhone 7 canvas. Framer now offers point measurements instead of pixels so the components are on an 1x scale. They should scale to the other sizes though as they’re all vector-based.
<img alt="" src="http://ift.tt/2s4R7fq">
<h4>SVGs + Text and Shapes</h4>
The UI Kit is made with SVG vector files imported to framer combined with editable text fields and shapes. There is no idea of symbols/groups nor nested symbols just yet in Framer, meaning all has to be kept simple but I the layers are well organized so that you can easily work with the Kit.
<h4>Sample Animations</h4>
All the Framers’ power is in animation and prototyping. In the file you’ll find sample animations such as showing keyboard or switching through tabs. For now there are just a few of them for a start, but plenty more are coming in future releases if you give this idea a thumbs up!
<img alt="" src="http://ift.tt/2sPgM8W">
<h3>How does it work?</h3>
1.Download the UI Kit from <a href="http://ift.tt/2s4WgUI">http://ift.tt/2s4WgUI</a>. I kindly ask for your email to get the download link. This is because right now this is a beta and I will email you as soon as new updates are available. Don’t worry — I hate spam too. You can opt-out anytime.
2.To preview the animations, swap the Artboards so that the one you want to work with is at the very left side and go to Code workspace.
<img alt="" src="http://ift.tt/2sPEban">
3. Now uncomment the block of code for this Artboard, for example # — — STATES EXAMPLE — — , for tabs-example artboard. Just double click on the code below the comment to unfold it, than ⌘A to select all the code and ⌘/ to remove the comment.
<img alt="" src="http://ift.tt/2s4vv2U">
<h4>New UI elements and Animations</h4>
Please note that this is a beta version of iOS UI Kit and I’ve got plenty ideas on how it could work even better. If you give this idea thumbs up — I will spend some more time to create more UI elements, icons, animations and transitions! Also if you feel you want to join me in this effort — feel free to get in touch 😉
Hope you saw something useful 😉. If so — please subscribe to course and article reminders on <a href="https://learnux.io">learnux.io</a>
<img src="http://ift.tt/2sPfU4b" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2s4pkfn">iOS UI Kit for Framer — Reinventing UI Kits</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

iOS UI Kit for Framer — Reinventing UI Kits

Top Stories