Framer Today: Interactive Design for Real Products

A truly great user experience rarely starts with a static design, and we believe the best ideas are interactive from the start.

Framer Team
Framer
4 min readJun 17, 2021

--

What is Framer?

We made Framer to empower designers to create beautiful, usable, interactive designs that feel just as good as they look. From start to finish, no code required. Designing in Framer means you get better results in user testing, quicker buy-in, and closer-to-real user experiences. And the best part? You get closer to production with everything you design on the canvas.

Design production-ready interactive apps, landing pages, and interfaces in Framer

Framer is available both in the browser and as a desktop app on Windows and Mac, and you can try it for free.

What makes Framer so different?

Other tools are great for painting graphics on a canvas and they may even be able to make your designs appear interactive. But unlike Framer, they aren’t built on web technologies, so you’ll need extra engineering support to rebuild your designs for real. Framer takes the guesswork out of the equation by giving you the tools to design something visually that you can also hand off to developers effortlessly.

This means less rebuilding for production and you always get the power of code whether you’re coding inside Framer or not.

What can you do with Framer today?

Use the design or development skills you already have to create interactive designs that blur the lines between prototype and product. Thanks to features like Smart Components, Auto Size, and Magic Motion, you can build complex interactions completely without code.

Smart Components with Variants and Variables push the bounds of interactivity without code

Of course, we know product design teams come with a variety of skillsets, and we couldn’t exclude developers and technical designers. Simply open the internal code editor to explore your interactive ideas with JavaScript or React if you prefer.

No matter how you design in Framer, canvas or code editor, all of your complex interactions and components are ready for you to use in production. Export your animation settings into real projects, use your prototype as a landing page, and get accurate handoff code based on HTML and CSS.

Who is Framer for?

Teams
Framer is a design solution for any team. Whether you’re creating digital products and web apps to dynamic landing pages and sales demos with real-time customer data, there’s no limit to what you and your team can build in Framer.

With real-time collaboration on every platform, you can invite copywriters, developers, user researchers, and more to work directly in the canvas. You’ll get to your end goals faster than ever with everyone always on the same page. Everything from colors and fonts to components and full prototypes can be shared in seconds.

Individuals
Framer is for any creative who wants to create working, interactive designs that can be efficiently shipped to production. Designing apps or websites today means designing more than just static images. You need to be able to show how things work-give viewers a complete experience from hover states, delightful interactions, and smooth screen transitions.

Design prototypes that are indistinguishable from the real thing

To do this, you’ll find advanced no-code features like Auto Size, Insert Menu, Smart Components, Magic Motion, that allow you to build any UI element you can think of, intuitively.

Whether you’re in sales or marketing or starting your own business, if you have an idea for a digital interface, regardless of your level of design skills-Framer is the tool for you.

Where is Framer available?

Framer is a cross-platform app available in the browser and on your desktop. The current Framer desktop app (left below) includes features like Smart Components, Magic Motion, and Auto Size that you won’t find in the deprecated Framer Desktop (right below).

Framer app icon right, Deprecated Framer Desktop icon left

Want to learn more about where Framer started and where we’re going next? Check out Framer Rewind for a more detailed history, and explore Canny to share your top feature requests and see what’s on the roadmap.

Originally published at www.framer.com.

--

--

Framer Team
Framer

Create interactive product designs from start to finish—no code required. Sign up free at www.framer.com.