The 10 Framer Design Features You May Have Missed
Power features and shortcuts to 10x your workflow | 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 →
It’s been a year of fast-paced releases over at Framer HQ. From Gradients to Effects and Export, we capped off 2017 with the launch of Frames, Shapes and Vectors, to present a full-featured screen design tool. If you’re already an avid prototyper, this means you’ll no longer need separate software for designing vector graphics. And if you’re just beginning to comprehend the power of prototyping, you’ll find that our new all-in-one workflow makes it easier and more intuitive than ever.
In case you missed it, here are 10 power features (and accompanying shortcuts) that come together to create a highly efficient workflow.
1. Frames are the new artboards
Frames are smart layout containers that can be used as both screens and interface elements. Place buttons, images or smaller Frames within Frames and we’ll automatically determine grouping, hierarchy and layout. It’s a modern approach to artboards, designed to save you time when it comes to nesting and layout. Frames can also be used like Slices, to quickly export icons at specific sizes. Pro tip: add a Frame by hitting CMD + Enter. Conversely, Shapes are simple SVG elements that can be grouped, but do not inherit any constraints. See a full comparison here or watch this explainer video.
Frame Shortcuts
- Draw Frame →
AorF. - Add Frame →
CMD + Enter. - Remove Frame →
CMD + Delete.
2. Production-ready SVGs
When it came time to build out our vector tool, we thought about output first. Being both SVG-driven and browser-based allows anything designed in Framer to be rendered 1:1 across all screen sizes and resolution. And when you export SVG icons to use on your website, you’ll appreciate our clean, cruft-free code. To quickly copy, right-click on any shape and click Copy SVG. Alternatively, you can hit Export and export it as an SVG file.
3. Path Tool: Suggested center points
When drawing icons, you’ll often rely on geometric shapes as the foundation of your glyph. Framer’s path tool helps you along the way. While drawing or editing a path, we’ll suggest the calculated center point for you—so you can quickly find and snap to these points along your segment.
4. Path Tool: Angles that lock
While defining diagonal lines, continuing along the exact angle of a previous segment is tricky. Luckily, Framer’s path editing tool does the hard work for you—once your cursor comes close enough, we’ll lock your angle for you, so you can draw perfectly aligned icons and illustrations.
5. Path Tool: Shape segments made editable
Press Enter or double-click on a shape, and hover over any line to drag entire segments at once. This comes in handy for rapid editing of more complex shapes.
6. Path Tool: Curves that bend at will
Curve Bending uses synchronized anchor points to guide you closer to your desired curvature, allowing for more advanced illustration work. This is especially helpful if you’re departing from geometric shapes and into the realm of freeform drawing. Click and drag any anchor point to bend and twist the path into more organic forms.
Path Shortcuts
- Path Tool →
V. - Draw Curve →
Click + Drag. - Convert Point to Mirrored Curve →
Double-Click. - Toggle Symmetric & Disconnected modes →
Alt. - Place Point on Segment →
CMD. - Curve Bending →
Alt + Drag. - Lock to Curve or Angle →
Shift.
7. Boolean Operations: Exposed Join types
Boolean operations allow you to combine shapes in different ways to create countless new possibilities. Unite, Subtract, Intersect and Difference are the most common forms. Though Unite and Join are similar types of boolean operations, Join is rarely exposed in a design tool. We do so in Framer, though its exact functionality may be less obvious. The main difference is that joined paths do not have to be connected, and they can contain strokes, too.
8. Stroke: Set your own Miter limit
Most tools automatically set this for you. In Framer we expose the property to give you more finite control over how your shape or illustration is rendered. Use it to affect the cut-off of any stroked shape that has sharp corners.
9. Code: Path Animations
Animate alongside paths by using Select methods and setting the point property to a referenced path. Download an example here.
10. Code: Reverse Path Direction
Control path animation direction by reversing the path direction. Right-click on your path in Design, and select Reverse Path Direction.
If you enjoyed this post, be sure to give it a clap (or five). Or leave a comment below or on Twitter to let us know what you think. You can also email us directly at support@framer.com to report any bugs or request specific features.
