Framer Design

Framer Design is mostly self-explanatory, fortunately. It will feel familiar when you’ve used other design tools like, for example, Sketch.

And the things that are different, or that you need to know, are excellently explained in Framer Design’s Get Started page.

Still, a few more tips might help you work more productively. I share them here.

More tips can be found throughout the book in Design notes, which look like this one here:

Design productivity tips

• Handy when in full-screen mode: You can quickly switch between Design and Code with the ⌘1 and ⌘2 shortcuts.
• From Design to Code is a one-way street. Nothing you do in Code will change anything to the original design. It’s comparable to importing from Sketch, Figma or Photoshop. You’re importing from Design. But, big difference, your artboards get re-imported every time you ⌘S save.
• Because of these automatic updates, it can be interesting to detach the Preview Window. You can make changes in Design with the prototype running. This way you can instantly (or after hitting ⌘S at least) see the result of your changes in the actual prototype.
• For this same setup: Switch the Preview Window to another device to check the responsiveness of your UI. You can, for example, lay out the interface on an iPhone artboard and check in the Preview Window how it would resize to iPad, or compare portrait and landscape orientations.
• Not enough screen real estate for the Preview Window? Here’s one more shortcut: ⌘` (that’s a backtick) will bring the Preview Window to the front or send it back. (Works in both Design and Code.)
• Just like in Sketch, or other graphic design tools, you can use calculations in the inspector. You can use math operators like +, -, *, and / (add, subtract, multiply, divide) to change values. (This also works in Auto-Code’s Properties Panel.) So, for example, to quickly change the size of an image you dragged in from (actual) pixels to (interface) points: just type /2 after its width or height.
• Design’s artboards are imported just like Sketch artboards and also maintain their position, which means that all but the first artboard will be placed off-screen.
  • To move an artboard to the ‘viewport’ of the Preview Window: change its point property (point contains both x and y) to 0.
  • To bring over any layer that’s inside an off-screen artboard: set its parent property to null.
• Design’s relative layout positioning (anchoring) always refers to a parent layer, so it often makes sense to add an invisible parent which you resize. Right-click and select ‘Add Parent’ or type ⌘↩.
• You can resize a parent layer without changing the size or position of its children by holding down ⌘ when dragging.
• Adding a parent layer is easy with the quick ⌘↩ shortcut, but this only works when you have more than one layer selected. So I often type R (or O) to quickly draw an extra layer, do ‘Add Parent’, delete the extra layer, and then resize the parent.
• Hold down ⌘ before clicking to select a layer that’s inside a parent layer.
• You know that Design contains a collection of SVG icons that you can use. To change or animate their color: use the color property, like you would for a Text Layer’s text.
• Talking about this: SVG files dragged into Design will maintain their resolution independence.
• The ⌃C shortcut (ctrl-C) gives you a color picker (like in Sketch) to grab any color on the screen as a fill color. Remember to select a layer or artboard first, though; otherwise, it will not appear.