designdiscovery
A design discovery universe
Username
ift.tt
Framer – Medium | Framer Team
<a class="underline text-gray-600 font-semibold" href="http://ift.tt/2poYgoh" target="_blank">Read more</a></div></div></div></div><div class="col-span-full mb-6 lg:mb-0 lg:col-span-3 order-last lg:order-last lg:block"><div class="sm:hidden block lg:block"><div class="bg-white border-gray-300 p-5 rounded-lg flex flex-row sm:flex-col"><a href="https://open.prototypr.io"><div class="relative rounded mb-2 w-full" style="height:148px"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" loading="lazy"/></noscript></span></div></a><div class="flex-col sm:px-0 px-4"><a href="https://open.prototypr.io" class="block sm:mt-1"><div class="text-sm cursor-pointer leading-5 font-medium text-gray-800"><p>We're an Open Source, Web Monetized project. Learn how to build your own Web Monetized website.</p> </div></a></div></div></div><div class="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16"><h1 class="text-sm font-semibold font-noto-serif mb-3">Top Stories</h1><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Design System to ‘NFT Design System’: Creating TinyFaces</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Neurodiversity and Inclusion: Choosing Kinder Design</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Web5 is here. Goodbye Web3? TBD." src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Web5 is here. Goodbye Web3? TBD." srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Web5 is here. Goodbye Web3? TBD.</div></div></div></div></div></div></div></div></main></div><footer class="bg-accent-1 border-accent-2"><div class="xl:container mx-auto px-3 pb-8 xl:px-8" style="max-width:1200px"><div class="w-full max-w-screen-xl relative mx-auto py-16 px-6"><div class="flex flex-wrap"><div class="w-full md:w-6/12"><p class="text-xl font-semibold">Get Prototypr Weekly</p><input class="hidden" value="hello@prototypr.io"/><p class="text-base mt-0 text-gray-700">Top articles and tools every week <!-- --> 💌</p><div class="rounded-md mb-12 lg:mb-0"><div><form class="sm:flex w-11/12 mt-5"><div class="sm:flex-1 sm:max-w-xs w-full"><label for="Email" class="sr-only ">Enter your email address</label><input type="text" id="Email" style="font-size:.875rem" placeholder="Enter your email address" name="emailRequired" class="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"/></div><div class="hidden email-octopus-form-row-hp" aria-hidden="true"><input type="text" name="hp1cc5fdf6-63b5-11ea-a3d0-06b4694bee2a" tabindex="-1" autoComplete="nope"/></div><div class="flex flex-col "><button aria-label="Sign up for newsletter" class="flex justify-center md:text-left items-center md:justify-between w-full px-5 py-3 mt-4 font-medium text-white bg-blue-default rounded-lg sm:w-auto sm:mt-0 sm:ml-3 hover:bg-blue-600" type="submit">Sign up<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-4 h-4 ml-3"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></button></div></form><div class="px-1 w-10/12 mx-auto"></div></div></div><p class="text-sm mt-6 text-gray-800 font-semibold">Created by<!-- --> <a class="text-blue-800 underline" href="https://twitter.com/annchichii">Ann</a>,<!-- --> <a class="text-blue-800 underline" href="https://twitter.com/graeme_fulton">Graeme</a>, <!-- -->and<!-- --> <a class="text-blue-800 underline" href="https://twitter.com/iamsofiamm">Sofia</a>. <!-- -->Illustrations by<!-- --> <a class="text-blue-800 underline" href="https://twitter.com/thisismimiespi">Mimi</a>.</p><p class="text-sm text-gray-700 font-semibold mt-2"> <!-- -->© 2020 Prototpyr,<!-- --> <!-- -->All rights reserved.</p></div><div class="w-full md:w-6/12"><div class="flex flex-wrap items-top mb-6"><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Good Stuff</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://github.com/Prototypr" target="_blank">Open Source</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" href="/posts">Prototypr Open</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://twitter.com/prototypr" target="_blank">Twitter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://instagram.com/prototyprio" target="_blank">Instagram</a></li></ul></div><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Other Resources</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://adobe.com/products/xd/adobe-fund.html" target="_blank">Adobe Fund for Design</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://grantfortheweb.org" target="_blank">Grant for the Web</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://interledger.org/" target="_blank">Web Monetization</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://letter.so" target="_blank">Mail by Letter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://prototypr.io/privacy-policy/" target="_blank">Privacy Policy</a></li></ul></div></div></div></div></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"preview":null,"post":{"attributes":{"title":"Designing the all-new Framer","slug":"designing-the-all-new-framer","content":"\u003cp\u003e\u003ca href=\"http://ift.tt/2poYgoh\"\u003eFramer \u0026#8211; Medium\u003c/a\u003e | Framer Team \u003c/p\u003e\n\u003ch4\u003eDetaching code from canvas for a smarter but simpler workflow | \u003ca href=\"http://ift.tt/2pivBzf\"\u003eFramer.com\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ciframe src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FdeYFLGN1rS4%3Ffeature%3Doembed\u0026amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdeYFLGN1rS4\u0026#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FdeYFLGN1rS4%2Fhqdefault.jpg\u0026amp;key=d04bfffea46d4aeda930ec88cc64b87c\u0026amp;type=text%2Fhtml\u0026amp;schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\"\u003e\u003ca href=\"http://ift.tt/2qiefBZ\"\u003ehttp://ift.tt/2qiefBZ\u003c/a\u003e\u003c/iframe\u003e\u003c/p\u003e\n\u003cp\u003eOver the last 2 years, we’ve built Framer into an extensive product, one that’s supportive of, to quote ourselves, \u003ca href=\"http://ift.tt/2q7RIer\"\u003e“design without limits”\u003c/a\u003e. But with such a robust toolkit comes some degree of clutter. Today we’re shipping a redesign of the Framer interface, one that aims to promote a more symbiotic flow between code and canvas. Rather than adding to an already crowded toolbar, we’ve made sure to keep this revamp smart and simple. Spring cleaning never looked this good.\u003c/p\u003e\n\u003ch3\u003eBuilding blocks front and center.\u003c/h3\u003e\n\u003cp\u003eFor any beginner, Framer is best understood as a series of building blocks. You start by drawing a layer, then you add a state or animation, followed by an event, usually a tap or click. These four core concepts are simple for anyone to grasp and were designed to help get you up and running fast. These foundational blocks were always available through easy \u003ca href=\"http://ift.tt/2pivSlC\"\u003eAuto-Code\u003c/a\u003e functions. However, because we had them nested under the insert menu in a busy toolbar, users were not intuitively discovering this easy flow. To stimulate a better onboarding process, we’ve moved these core Framer building blocks top left, into a clean sidebar dropdown for easy insertion. Now all your most important one-click functions are integrated directly into the editor.\u003c/p\u003e\n\u003cp\u003eImporting from Sketch, Docs and Error Inspecting have also moved to the bottom left of the side toolbar. Though they’re key contributors to your prototyping flow, you won’t need them as frequently as your main building blocks. Inspect now sits conveniently next to the error message display, making for an easy way to debug your prototype.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2poRRJU\"\u003e\u003c/p\u003e\n\u003ch3\u003eCanvas and code, united.\u003c/h3\u003e\n\u003cp\u003ePerhaps most notably, we’ve done away with the classic Framer split screen.\u003c/p\u003e\n\u003cp\u003eGranted, giving equal space to code and canvas worked for a long time. But eventually, our community members reported a number of glaring issues — limited viewing flexibility, inability to see prototypes of different resolutions, locked device ratio, restricted use of dual screen workflows and so on. So we decided it was time to detach for good and hand you control over your own workspace. The result is an interface that is both easy on the eyes and functionally customizable.\u003c/p\u003e\n\u003cp\u003eIf you prefer to keep your design environment tight, you can still drag the canvas back into the Framer chrome. It’ll snap to the bottom right of your editor, living comfortably between your code and the layer panel. It defaults to a canvas mode but we’ve made device switching simple — jump between devices directly in the canvas or select from the menu icon. Click to rotate, zoom, reload, select a hand or device. Need to go present? The standard green maximize button is readily available, automatically opening up into a fullscreen preview within the device of your choice.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2qi4ljQ\"\u003e\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eEverything in its place.\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eWhen its time to test and share, you’ll find Cloud and Mirror previewing have been shifted to the top right corner. Fitting for features that are only needed toward the tail end of a common design workflow.\u003c/p\u003e\n\u003cp\u003eIn this update, our welcome window also gets a refresh, providing easy access to our best resources. As part of our endeavor to lower the learning curve, we’ve also provided you with four ready-made examples. Paired with simple in-app onboarding instructions, each example acts as a standalone starter kit to help beginners grasp the simple code behind popular interaction patterns.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2poIA4E\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eAll in all, this redesign pairs the Framer interface to a smarter workflow, allowing for speedier, more efficient design work. Because we ship as soon as we features are built, you can expect ongoing additions. Got feedback or a feature request? \u003c/em\u003e\u003ca href=\"http://twitter.com/framer\"\u003e\u003cem\u003eTweet us\u003c/em\u003e\u003c/a\u003e\u003cem\u003e or leave a \u003c/em\u003e\u003ca href=\"http://ift.tt/H2g9zk\"\u003e\u003cem\u003ecomment on Facebook\u003c/em\u003e\u003c/a\u003e\u003cem\u003e, we’re all ears. Or give this post a ❤ to recommend it to your designer friends!\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://ift.tt/2piyct2\"\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2piycJy\"\u003e\u003c/a\u003e\u003ca href=\"http://ift.tt/2q7LdIH\"\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2qi11VV\"\u003e\u003c/a\u003e\u003ca href=\"http://ift.tt/2piydgA\"\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2piye48\"\u003e\u003c/a\u003e\u003cimg src=\"http://ift.tt/2poLUN3\" width=\"1\" height=\"1\" alt=\"stat?event=post.clientViewed\u0026amp;referrerSou\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003ca href=\"http://ift.tt/2p4iBip\"\u003eDesigning the all-new Framer\u003c/a\u003e was originally published in \u003ca href=\"https://blog.framer.com\"\u003eFramer\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","seo":{"metaDesc":"","canonical":"https://prototypr.io/news/designing-the-all-new-framer/","opengraphModifiedTime":null,"opengraphPublishedTime":null,"opengraphTitle":"Designing the all-new Framer - Prototypr | Prototyping","opengraphDescription":"Framer \u0026#8211; Medium | Framer Team Detaching code from canvas for a smarter but simpler workflow | Framer.com http://ift.tt/2qiefBZ Over the last 2 years, we’ve built Framer into an extensive product, one that’s supportive of, to quote ourselves, “design without limits”. But with such a robust toolkit comes some degree of clutter. Today we’re shipping [\u0026hellip;]","opengraphImage":null},"link":null,"date":"2017-04-27T09:45:34.000Z","legacyAttributes":{"link":"http://ift.tt/2poYgoh","imgUrl":null,"ogImage":"https://cdn-images-1.medium.com/max/1200/1*xGbm6yYWnh2C09PP-vTmaA.png"},"ogImage":{"opengraphImage":null},"tags":{"data":[]},"legacyFeaturedImage":{"id":"14298","mediaItemUrl":null,"thumb":null},"featuredImage":{"data":null},"relatedArticles":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}],"author":{"data":null}}},"domain":"ift.tt","link":"http://ift.tt/2poYgoh","postDate":"\"2017-04-27T09:45:34.000Z\"","morePosts":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}]},"__N_SSG":true},"page":"/news/[slug]","query":{"slug":"designing-the-all-new-framer"},"buildId":"ObAzqkbZVJyJ9VZeDkJMU","runtimeConfig":{"nextPlausiblePublicProxyOptions":{"customDomain":"https://analytics.prototypr.io","domain":"4.prototypr.io","selfHosted":true,"trailingSlash":false}},"isFallback":false,"dynamicIds":[7765,1477,7134,5683,5348,8721,8460,6675,9250],"gsp":true,"locale":"en-US","locales":["en-US","es-ES"],"defaultLocale":"en-US","scriptLoader":[]}</script></body></html>
