Insert Menu, Layout & Design

Framer Update: Creative Section

Framer Update: Creative Section

Framer Update: Creative Section

Benjamin

·

3:24

·

13K views

·

About this lesson

This release introduces a new Creative Section to the Insert Panel, with fun components and presets that you can use to bring your sites to life. You might recognize a few of these from framer.supply—we have redesigned and reimplemented these, and you’ll now find the latest and greatest versions directly in Framer. It has never been easier to design bold headers with responsive typography using Fit Text, or to design infinitely-looping badges with the new Arc Component. We’ve also added a couple of handy Pattern presets, like Wave, Grid, and Noise, for easy access. Inserting these gives you a Frame with the pattern pre-applied, ready for you to customize. We hope you’ll enjoy these new elements and we’ll add more over time. https://framer.com/updates/creative-section

🌞 Start for free: https://framer.com

📚 Learn more at: https://www.framer.com/academy/

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

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

0:00yo my name is Benjamin and in this video0:03I'll cover the new creative section that0:06we added to the insert panel you can0:09find it right under elements here and0:12this section contains fun new components0:14and presets that can help bring your0:16site to life or simply add a unique0:19touch let's create a little spinning Arc0:22around this little guy here for example0:25I'll simply drag and drop the component0:28I'll set width and height to fill as the0:31badge we've added it to is a stack then0:35let's go down here I'll set the color to0:38white and I'll type some new0:41content and let's add a custom type face0:45here as well you can pick anything you0:48like and I'll change some of the0:50properties like size and letter0:53spacing there we go to animate it we'll0:56simply go to the effects panel here0:59select select a loop1:01effect and I'll only have to change the1:04timing here which I'll set to 201:09seconds and if we now give this a1:11preview we have a spinning infinitely1:14looping1:16badge also shown here is the new1:19countdown component the new time and1:21date component and one of our new1:24pattern1:25presets the creative section also has a1:28few presets you can quickly insert and1:31you can find more presets here in the1:34fill picker these pattern presets we1:37shipped last week and you can customize1:39the skill and the positioning of these1:42repeatable patterns as well I can1:45quickly show you a few more if we go1:47back to the insert panel for example we1:51have these cute scribbles designed by1:55Monica that you can quickly drag and1:57drop and customize to add to your2:01designs we also have these patterns here2:04we mentioned earlier so if I drag and2:06drop these you get a frame with the2:09pattern pre-applied and set to tile so2:12you can resize it infinitely and you can2:15mix this with things like our filters to2:17invert it for example and then customize2:21some of the properties and then resize2:24as needed especially useful for2:28backgrounds let me quick quickly undo2:31this so we have fit text Arc scribbles2:35countdown time and date and three2:38pattern presets wave grid and noise and2:42all of these components are easily2:45customizable for example here I am using2:48the countdown and we can customize it2:51with a few clicks for example we can2:54swap the labels change the spacing and2:58also include minutes very simple very3:02flexible and that's pretty much it for3:04this video thank you so much for3:07watching I hope you enjoy using these3:10new elements and please stay tuned for3:13more updates coming3:22soon

Watch on YouTube ↗

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.