Framer Update, Layout & Design

Framer Update: Canvas and Preview Improvements

Benjamin

3:07

10K views

Apr 18, 2024

About this lesson

Following 3D Transforms, we’re introducing a series of Canvas improvements to improve your daily editing experience in Framer. These updates improve editing, previewing, and animating, with a few improvements specific to 3D workflows. https://www.framer.com/updates/canvas-updates

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and in this video 0:04I'd like to cover some canvas updates 0:07that we did to improve your editing 0:10experience in framer starting with 0:13rotation notice the cursors and how they 0:17don't dynamically match the rotation of 0:19the layer but instead they flash between 0:23different 0:25increments today our rotation cursors 0:29are complete completely Dynamic even 0:32when rotating 3D layers a lovely little 0:36Improvement that makes rotation feel 0:39much more natural next up is the Effect 0:42edit mode before transforms any effect 0:46you would edit would have a fixed 0:48bounding box while editing properties 0:51giving you an inaccurate representation 0:54and making it harder to design your 0:56effect today the Effect edit mode gives 0:59you a perfect preview including the 1:02bounding box even when using 3D 1:06properties improving the editing 1:08experience of all effects in framer next 1:12up is previewing notice how my 1:14animations will stutter when I first 1:16open the preview and this would happen 1:19anytime I make an edit so if I set the 1:22time to something like 1:244.1 and then go back again all my 1:28animations would stutter 1:30well now these are completely gone and 1:33all of your animations will play 1:35seamlessly anytime you open the preview 1:39next up is automatic nesting dragging a 1:42layer within a rotated parent layer 1:45wouldn't properly nest and unnest the 1:48layer the nesting happens too soon and 1:52the unnesting happens too late today our 1:56automatic nesting will work perfectly 1:58whether your layer is rotated or not and 2:02this will work for both 2D and 3D 2:06rotations next up drawing new elements 2:09in 3D our layout tools like drawing a 2:13new frame will now work perfectly even 2:16when positioned in 3D space plus we also 2:20redesigned our resize cursors to 2:24accurately represent the 3D angle in 2:28which you're about to drag a layer here 2:31notice how the cursor is not perfectly 2:34horizontal instead it indicates the 2:37angle in 3D in which you're about to 2:39resize your layer and that's pretty much 2:43it for this video we hope these 2:45improvements help make your day-to-day 2:48experience in framer a little bit better 2:51thank you so much for watching and stay 2:53tuned for more updates coming soon

Also coversCustom Cursors Frames Sizing

Watch on YouTube ↗

‹ Framer Update: Masking

The Framer Spring Event in :90 ›