Framer Update, Layout & Design

Framer Update: Multi-Stop and Conic Gradients

4:13

12K views

Jul 18, 2023

About this lesson

The July Update is here, and it’s all about gradients. We’re introducing support for Multi-Stop Gradients, Conic Gradients, and more. You can now design Linear, Radial, and Conic gradients with infinite color stops. We’ve also redesigned our Fill Picker with a brand new interface, including an inline Gradient editor. See the full changelog here: https://www.framer.com/updates/july-update-2023

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00Yo, my name is Benjamin and in this video I'll cover a Framer update that adds support for multi-stop gradients as well as conic gradients.0:12Now I know, I know, it took us a little while to ship this but we're super excited to finally have this available in Framer.0:21So let me quickly walk you through our new gradient tools.0:26We've redesigned our fill UI with icons representing each fill type.0:33And for each gradient you also get an inline editor.0:37We could add new color stops anywhere here within the fill editor or directly on the canvas.0:45Where we also get a nice little preview of the percentage of our color stop.0:50I'll click to add a new stop right here in the center.0:54And let's give this a different tint.0:57And there we go, we've just created our very first multi-stop gradient in Framer.1:04And we can simply click and drag this point anywhere we'd like.1:09And we've also added support for shift dragging this in increments of 5% which is very useful for creating evenly distributed gradients.1:21We can also do this with the start and end points that we could drag inwards or outwards.1:29Giving you much more creative control than before.1:33To rotate linear gradients move your cursor just outside of the start or end point.1:40And holding shift will snap to 45 degree increments.1:45So that's it for linear gradients.1:48We have a redesigned fill interface with a new gradient editor.1:54Support for infinite freeform color stops.1:58And an intuitive snapping experience.2:03And all of these new features also apply to radial gradients.2:08Here we can simply select the center point to move the radial gradient anywhere.2:16The outer points here can still be used to resize a radial gradient.2:22And the line in the middle here allows you to add and move color stops just like you would with linear gradients.2:31And finally we're adding support for conic gradients in Framer.2:37So let me bring up the editor and show you how it works.2:43I can click and drag the center point here to move my conic gradient anywhere within my layer.2:51And placing my cursor just outside of that center point allows me to change the angle.2:57This also works when placing my cursor just outside of the circle.3:02And I can click anywhere on the circle to add new color stops.3:07So I'll go ahead and add a few new color stops to this gradient.3:13And then I'll select each of them to assign a color style.3:17And yes, this means that all gradients support theming.3:23And with all colors updated, I'll select each new point on the canvas.3:29And I'll shift drag to create an evenly distributed conic gradient.3:35And here we can also hold shift while rotating to snap to 45 degree increments.3:43And that's pretty much all you need to know about the new gradient updates in Framer.3:49Thank you so much for watching and stay tuned for more updates coming soon.

Watch on YouTube ↗

‹ Framer Community Show & Tell July 24, 2023—Alex Socoloff, and Joris Rood

Framer Update: Code Blocks & Inline Code ›