Framer Is Now The Best Tool for Screen Design. Here’s Why.
Frames, vectors, SVGs and developer handoff. Get an in-depth look at our biggest launch of 2017 | 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 →
At the beginning of 2017, we started with a bold mission — to build and integrate a design tool directly into our existing product interface. In true Framer spirit, we gave ourselves an ambitious deadline, releasing a sequential buildup of features (Design tab, Effects, Gradients, Exporting and Developer Handoff), culminating in this launch. Today we’re proud to unveil our feature-complete screen design tool, fully integrated into Framer. From wireframes and icons to interactions and beyond, Framer is now the best tool for every part of your design workflow. But rather than offering more of the same, we’ve taken an entirely different approach:
Because it’s a screen design tool by Framer, you’re naturally being taught to think about how elements of your product will interact, even as you’re designing them.
At its core, this is Framer’s biggest value add. As technology evolves toward virtual and augmented realities, designers are increasingly being tasked with more ownership of product—from ideation and implementation to actual adoption. And Framer is the perfect integrated environment to guide you each step of the way. To illustrate how we do this, here’s a behind-the-scenes look at a few of the main moving pieces.
Frames
Design today is no longer about static artboards. We live in a responsive world, where truly functional design is defined by how well it adapts to the environment around it.
That’s why in Framer, layout and hierarchy are automatically assigned, working much as you would expect them to in the real world.
To do this, we’ve done away with artboards completely and replaced them with Frames. Place a Frame on the canvas, add another inside and continue finessing, all while we guess layout and hierarchy. Frames also act as magic containers — anything placed inside them retains its original structure even as you resize. Turn a Frame into a UI element and fill it with text, images or shapes. No matter what you do, the contents of each Frame adapt accordingly, allowing you to define different layouts even within the same design. Once you get used to Frames, you’ll begin to wonder how you ever lived without them.
Shapes
You’ll find a full spectrum of foundational shapes in Framer, from rectangles and ovals to polygons and stars. Shapes in Framer all come with their own contextual UI, giving you granular control over everything from number of sides to blending, stroke and shadows. You can manipulate any shape’s radius simultaneously or double-click to edit each point independently. And our selection of boolean operations allow you to unite, subtract, intersect, exclude and join shapes to create even more combinations. It’s all the features designers know and love, organized within a clean and clutter-free properties panel.
Vectors
While building our vector editing toolkit in Framer, we put speed and control at the top of the list. Instead of reinventing what you find most intuitive, we experimented with smart shortcuts and suggestions that help speed up your workflow. The end result is a labor of love, a dream toolkit made by designers, for designers. Here are a few unique qualities of our pen tool:
- Dynamic Center Points allow you to quickly find and snap the center points on your path line.
- Angle Locking recognizes your initial path line and guides you to lock in just the right angle.
- Segment Dragging is a quick way to drag and directly manipulate a specific section of your path line.
- Curve Bending uses synchronized anchor points to guide you toward desired curvature, allowing for more advanced illustration work.
Exporting
When it came time to build out exporting, we thought long and hard about how to be inclusive of all workflows. The result is a sharing flow that makes it easy to port visual designs out of Framer at every point — export your entire canvas to share wireframes or copy and paste a single icon in your team chat to get a second opinion. Web designers will love the ability to grab production-ready CSS code while just about everyone will appreciate that Framer delivers cruft-free SVG code. It’s all the tiny little details that add up to help you more efficiently sync between design and development.
In the end, to say our 2017 has been a roller-coaster ride would be an understatement. Through it all we’ve depended heavily on you— our vibrant, supportive and eternally encouraging community. Your user testing, feedback rounds and constructive criticism is the fuel we needed to truly deliver on our most monumental mission to date. We couldn’t be more proud to be the team behind Framer, the only tool you need to be a better designer today, tomorrow and beyond.
