From Idea to Website Without Leaving Framer #framer

Framer has been my go-to tool for designing websites for a while, but since they introduced an amazing new feature called design pages, it just got even more useful. Essentially, it's like having Figma or Illustrator directly within Framer where you have artboards, you can prepare all your assets. So, you don't ever have to leave this platform. You can do your iteration, prototyping, and final publication all within Framer. You will find this video useful whether you are already using Framer or if you are just starting out and you want to learn how it actually works. So join me if you want to find out how Framer turned from a website builder into a full-fledged design tool.

Within a single framework project, you can have multiple design pages and these are used to prepare and experiment with the assets that you will utilize for the actual website pages which is further down here on the left side. So I can switch to my homepage which is a working site that I can test out by clicking on the plus sign. That's how it's going to look like and everything is interactive already. And this is something that I'm still refining, but the best thing is I can just switch back to the design pages. We can see these artboards on the infinite canvas that we can use to design things. So we can zoom out. If I select an artboard, I can press command or control 2 to zoom back onto that. Or again, if I want to zoom out to see everything again on this design page, I can press command or control 1. And I love the fact how quickly you can start building things here. So for instance, I have this design created for a card within the page. And if I just want to change the backdrop on this using this illustration, I can just drag and hold down alter option key, hover over the other shape, align it where I want it to be and drop it inside it. Then I can resize it holding down alt or option key and I can select that particular shape. Change the color for the gradient. I can use the eyropper and select maybe that color from the illustration or this one here. And by the way, this is currently just a stock image from Freepick. But once we are 100% sure that we want to use this illustration, we can bring in the full vector artwork. I just have to drag and drop that SVG file and it's going to appear with all the elements, even things that were originally clipped like these rainbows here. And just to show you, if I zoom closer to this, I can double click on anything and select individual anchor points and make the changes that I need. And by the way, whenever I select something like the rainbow, I can see the colors on this selection. So I can very quickly change maybe this pink to be a different color and even without me selecting individual objects or parts within that selection. It will automatically update all of those colors for me. That applies to the entire illustration as well. By the way, you can see that we have a list of all the colors in this. And this is essentially like using recolor artwork in Illustrator. We can go in and make the changes. Maybe I want to change all of the yellow colors, make them a little bit warmer. And it's that easy to do. And by the way, if you want to quickly crop this, we can just press F on the keyboard and draw another frame right here, which we make transparent. And then going to my layers, I can easily select the group and drag and drop it into that frame. So that's how easy it was to create a clipping mask directly within Framer. And now to update this artwork, we can just delete that one first. Make this one bigger by pressing K on the keyboard to resize. And we can just maybe type in two. Make it twice as big. Now we can just align the frame over the design. Be something like that. And then drag and drop it into the placeholder. And there you go. We have the fully updated vector version and we can now just align our gradient to have a color that matches the style. I feel like that works quite well. Now, anything that you prepare on a design page, you can immediately take into an actual web page. So I can switch back to pages and for instance this whole frame that I have here I can copy jump over to my homepage and I maybe come down here

drop it on the pasteboard on the side and then I can just drag it down and find the right place for it. Maybe I want to place it above this section here. Yeah, I feel like that's a good place for it. And then immediately we can just test this in the actual page. scroll down and see that section that we have here. And of course, we shouldn't

forget about responsiveness because right now here in the mobile view, this doesn't look great. So, how can we fix that? Well, first of all, in the layers, we have to check. Yeah, this is just a frame. So, let's select both, right click, and then choose add stack. And now that this is a stack here on the right side, it should also show up under the phone elements as a stack which once selected we can just change the direction from horizontal to vertical. And then by pressing K on the keyboard for scaling, we can just make this 0. 75. I think that's going to fit quite nicely. Then we just have to select the text, move it up a little bit, and align things to make sure it's going to work well. Like aligning to the center. This can be aligned to the center as well. And so on and so forth. Another awesome feature in framer that I just wanted to

mention is what I used for this event countdown. And the tool is right down here called workshop, which again just needs a prompt. You need to explain what you need to create. It gives you a couple of suggestions, but if I just type in countdown showing 10 days left with text design sprint 2026 starts in and I just going to start it like that. So the coding is already happening in the background and I can just sit back and relax. I don't have to worry about any of that. And it took roughly around 20 seconds. Now we can just see what else we can do to improve this. Perhaps I want to add the Google calendar button and it is like a conversation between me and the AI. So it will understand what we want to do. It will keep the existing design and there is the button. And of course I can come in and make edits to this. I can change anything I want. And when I play this or test it, I can already see that button is working. And if I click on it, it's going to bring up the Google calendar and exactly knows that it should be set for 10 days from now. And by the way, I would also use framer for creating social graphics for this

project. So I could just create a separate design page for that. And using the frame option, I can just draw a frame and type in exactly the size I need. So for instance, for a portrait Instagram social graphic, we need this size which I just typed in there on the right side. And then from my design elements, I can just zoom back. Perhaps I want to use this graphic that we created. And then we can just drop it in here. Zoom out. Resize quickly. And within the layers, I can just drop the entire group into the frame to crop it. then jump back into my actual web page. And even from there, we can drag any elements like this design, sprint text with the create, collaborate, and grow. And maybe even these icons. So, let's just select all of that, copy, go back, paste, resize, and I guess you get the idea how quickly and effectively you can work where you can have all your assets in a single unified place. And from iteration to final delivery, you don't ever have to leave framer. Live collaboration is also super easy and fun

to do in framer. Like here you can see I am working with my friend Gabbor. He is designing and making changes on the right side while I am making my changes in the middle. And again there is no limitation to do this. You can do this in a free plan. You can work with an entire group together all at the same time on your Framer projects. I can even

create vector illustrations directly within Framer. So I don't even have to go to Illustrator to do something like this that you can see on my screen. So let me walk you through quickly how I created this little rocket and the trail behind it. So for that dash line it's simply vector path is what we are going to use which is like the pen tool and even the keyboard shortcut is P just like the pen tool in illustrator. So with this you can click click to create straight lines or click and drag to draw curves. Fairly straightforward we got our bezier curves here. And if I double click on any of the corner points I can turn them into smooth points. So that's how easily you can do that. And you can obviously move things around. It's completely non-destructive. And once we have the whole path selected under the stroke properties, we will be able to increase the width. So I will just increase it, make it a bit thicker. We can also change the cap to be rounded. And we can use the array option to introduce the dash line. So I'm going to set it up maybe to 19 in this case. And of course, we can change the color as well. I can just use the brand color. And as you would expect, you can double click on the path to select any of the existing points and move it around. And all the attributes that we assigned will stay intact and the changes you can see live. It's just so cool that all this is happening in a browser. Now for the rocket, what I've done is to use a shape, the rectangle tool. R is the shortcut conveniently. And I just drew my first shape. And then here in the radius section, I switch to having radius per corner. So that way I can specify individual radius. So we have the one top left and then bottom right is the one that we need. After this, if I want a little bit more sharper angle on these corners, I can double click on the shape, select the top left point and the bottom left point, and then use the arrow keys on my keyboard. I can skew this shape maybe down to somewhere around there. I think that looks quite good. And then maybe we can just make it a little bit narrower like that. And then we can draw the next shape which we can use once again a copy of this. That's alter option key and drag. We can maybe move this up to around there. I am going to just double click select this single point here and drag it up a bit just to give it a little bit different shape there on the top. And then we can select these two press command or control G to group them together. Then alt or option drag to the right. Here is our horizontal flip option. Now we just have to use another shape star. If I hold down the alt or option key, it was draw from the center point just like in Illustrator. But first, let's just reduce the points to four points. And I'm going to change the color to the brand color just like before. And now if we zoom a little bit closer, let's double click select all of these points here. So I'm shift clicking on those anchor points. And I can either increase the radius on them, which is great. Or we also change the anchor points from straight corner to mirrored handles, which is going to give us this nice curve. Just also want to mention that it's so cool that when we zoom close, we can see the grid in the background. So when you want to work very accurately, you can align things to the grid. But now we have our star. We can just make it bigger a bit. Again, alt or option, shift, drag out. To make it simpler to use in the future, I'm actually going to ungroup both sides. Now, I select all of these parts together. And then I will unite them with the path operations up here. So, that's going to be like a compound path in Illustrator, a single unified object. But by double clicking, I can of course still access individual shapes. And by double clicking again, I can access individual anchor points and handles. And if we wanted to make it even easier to reuse this element, we could even turn it into a vector set. And if we come to our assets area, we can find it here. Once again, we can rename it to be rocket. And if we go to our pages, maybe the homepage, we can zoom closer to an area where we already have a little detail like this. And then from the assets, we can just drag and drop the rocket in. And we can start deciding where we want this to go. Maybe up here. We can rotate that line this way. Like so. So we can see how this look on the website. If I scroll further down, there's our little rocket. And of course, we could add animations on it and make it more interesting. But the fact that I could do this all within Framer and I have the ability to make changes to each individual anchor points and also position it exactly where I want it on the page. That's just awesome. I hope you found this video

useful and there is nothing stopping you from trying Framer. It's completely free to get started. The link is in the description below. Have fun trying out design pages and I will see you in the next one. —