 In this video, I'm going to show you how to redesign any website in Figma without any design skills needed. So while I'll teach you in this video, I'll take you through step by step how to import any website into Figma, how to edit texts, how to insert images and icons, and then finally how to share your new design with your colleagues. Hi, I'm Johan. I'm a product designer and nowadays also a workshop facilitator. So I've been working in visual design for well over 10 years and I've designed over hundreds of apps and websites and collaborated with a lot of different teams and setups. So what I'm going to teach you in this video here will be quite useful in situations where you, for example, have an existing website or an existing web app that you want to create quick versions of. Maybe you're doing an A-B test and want to do a version B. Maybe you run a brainstorming workshop or some sort of concepting workshop for a new part of your website or an existing part of your website where you want to improve it somehow and you want to quickly come up a new design version of that existing thing. Or you just found a website on the internet and you thought it looked pretty cool but you want to improve it and you want to try out this design tool and do a version of it. There might be many reasons why you want to try this out but the coolest part is this saves you so much time that you can spend on more important things like talking to your customers or collaborating better with your team or facilitating other workshops to solve more important problems efficiently. While you're watching this video and you have any questions of the steps I'm showing you just leave a comment below. If you want to learn more about workshopping and facilitation head over to our free community. Over there you can find hundreds of designers and facilitators like me sharing their insights and experiences so that you can level up and take your career to the next level. The link to the community is in the description below. Okay, I think that's it. Let's get started. I'm going to be using a design software tool called Figma and if you haven't heard of it it's right now probably the most the market leading design software for all product and UX designers out there. If you have used Mirol or Murol or any other like blank canvas digital whiteboard tools you'll probably recognize yourself using Figma. It's very similar in the sense that it's an open canvas where you can just put stuff everywhere. It's a browser based design tool. So this means that you can work and design in the browser. Everything is saved to the clouds. All changes you do is just happens in instantly. And the most cool thing is that you can of course share it live and actually design stuff live together with people at the same time. All right, so if you don't have an account just go to Figma.com, click it started and create an account. I'm going to start a new account just to have a clean slate. So the first time you log into Figma they ask you to name a team. So this doesn't matter too much right now. Just give it your own name maybe or whatever you want, your favorite football team. You can also invite collaborators. We're not gonna do that right now. So let's skip that step. We have to choose a plan here. For this demo you'll do fine with a starter for free account. So don't worry about that. What you want to do first is start a new design file. Choose a blank canvas. By the way, all of these settings they're asking you for this first time you can change that after. So don't worry about too much if you make the wrong choice. And you'll notice a new tabs opened up. Obviously there's a lot going on here. There's a lot of these weird icons and tools and everything. You don't have to really care about most of this stuff. I will show you only the relevant tools you need to know to achieve this redesign of any website. If you want to see a longer, more detailed instruction video for Figma I recommend watching my colleague Amber's video on this subject. You can probably see that video linked here on the video. Okay, so now that we have Figma all set up it's time to redesign something. So what are we going to redesign? I mean, you can do anything almost. You can't do native apps. There are, as far as I know not any easy ways to use magically importing a native app. But anything available on the web you can import, which is quite magical. In this case, I'm going to be using Uber as an example. So I'll just open up a new tab here. I'll go to uber.com and yeah, we can pretend that we're tasked to improve or make a new version of this landing page. Maybe we want to run some experiments and see if we can improve conversion of getting more drivers signed up or something. Anyway, all you need to do is just go to any website and copy the URL. So I'm doing command C or control C if you're on a Windows computer. And I want you to look up to your left here. There is one super weird icon. That's your resources tab and you click that one. You can see there's a component, which is the first tab here. We're going to move over to something called plugins. So plugins are these extra add-ons that the open community have developed and made available through Figma. It's pretty awesome. And this particular plugin, it feels almost illegal to use, it's crazy. You click plugins and then you search for builder.io. And then you click, if you hover over it, you see there's a button called run. You just click that one and this is browser based. So it needs to think a little and there we go. So what you can see here is we land on something called a tab called export to code. That's not what we are looking to do this time. We're going to import to Figma, so click that tab. There is a URL field here. Make sure to drag and mark the entire URL to import. That's already there. That's the builder.io homepage, I guess. And then press command V or control V in Windows. This way that replaces the full URL. There's a weird thing that usually happens this plugin, there's an extra HTPPS thing happening. So then the import won't work. So make sure you actually mark the entire existing URL and replace it. The viewport width, you can play it with if you want to, but I usually leave it at the default. That's 1200 pixels width. And then simply press import to Figma. You'll notice here, it says note, this plugin is not magic. It does its best, but your mileage may vary. There will be some cleanup needed. You'll see now that what we get here, the result here is not exactly what the live website looks like. Obviously the big header image is missing. It imported the actual cookie banner. Sometimes that's a good thing. If you want to play and redesign that one, we don't want that right now. There's a weird rectangle going on here. There's some missing images, some overlapping icons. There's a little bit of cleanup needed. So just go through your site and clean it up. Just a small tip. When you're doing cleanup, look in the layer list to the left. And what's the layer list? So for example, that header image seems to be missing. I'm going to click this rectangle here. And if I look to the left, I see here, that is this rectangle. And below, that means maybe something below, there is an image. So if I remove this rectangle, I'm gonna press backspace, just to delete it. And voila, there it actually was. That sometimes happens. I don't know why whatever website you import, it might be completely different. It might look a lot better or worse. So go through, make some cleanup, remove some stuff that you don't want part of it. So I'm going to remove this cookie banner, for example. And be careful when you're clicking around. I'm just clicking each element here and deleting it one by one. Very easy to accidentally click and delete something in the background here. Maybe I accidentally click and delete that header image that I actually wanted. So if you do a mistake, you press command Z, that's the undo action. When you want to import a page that is behind the login, it's not going to work the normal way. You will need to use a Chrome plugin to make sure that works. Let me demonstrate. Here's this click up space. Click up is a project management tool. I'm logged in here. A fast way to access your plugins. You could go to the resources tab again, but you can also right click anywhere on the canvas. And you'll find plugins and recently used ones over here. Now if I use this URL and I try to import it, the plugin needs to think a little bit and will fairly soon. Yeah, there we go. We'll get an error. It just doesn't work because this plugin can't override that login that we made. So we're going to need to do a different method. So what we're going to need to do is use the Chrome browser plugin from Builder IO to download a file that we then can import locally from our computer. It's easier if I show you. Right click again, open up the plugin again, the Builder IO plugin and we go to import. And then here we have a little section that talks about this Chrome extension. Simply click this link and you'll be taken to the plugin and there you go. Now it's just remove here because I've already installed it, but for you, you can probably just add it to Chrome. So mine is installed. I'm going to go back to this click up homepage. I'm going to click this little puzzle. That's the Chrome extensions. I have a multitude of them, but here it is. HTML to figment by Builder IO. I'm going to click that one and then simply press capture page. This will download a JSON file. And now I can go back to my file. Here we have the plugin. And now step two, upload the figment.json file. So I click that one and I've downloaded a few. So I'm going to use that one. And voila, now it actually worked. It actually landed on top. I can simply move that frame so it's not on top of the Uber one. But now we have this page captured even though it was behind a login. It's time to do an actual redesign of your imported page. Before you start changing anything, it's quite useful to make a copy out of the imported original that you spend a little time cleaning up, you know, so that you have something to refer to when you show this to colleagues as well, like, okay, here's the original, here's what I changed. The way I like to do it is just make a copy of the entire frame. We'll actually start with giving the frame a meaningful name. Changing the names of frames is as easy as just click. You hover over the name, the word frame here and click it, actually double click it. Uber landing page, original, and hit enter. By the way, if you'd like keyboard shortcuts, I love them, mark the frame and press Command R. And then now I can rename it, hello. All right, now we have a cool name. Now we just make a copy. You can make a copy of frames in a multitude of ways. You can press Command C and Command V and use land right next to it. In other ways, mark in the frame and then holding Option or on Windows computer Alt, holding that down and clicking drag. That's also a pretty fast way to make a copy. Obviously we need to rename this one to redesign perhaps. It's not the original, so I'm clicking that on Command R. By the way, what I'm rewriting, you can see that happening up here in the actual layer list and that will also reflect. When you rename the frame name, that will reflect here on the canvas as well. Google landing page, redesign. I'm gonna use uppercase for this. It's very clear what's going on. If you want to, you can also add actual text frames above. So anyone going in here to this file later will actually see it more clearly. I'll show you. By the way, these names on these frames, later on, if you want to export these as images, maybe to put in a slide deck or something, the file name of the picture will actually be whatever you name that frame. So it can be quite useful to name them something logical. All right, now we're ready to edit some text. So it's super easy. Any text frame, you can just double click and you'll be in editing mode. Yeah, maybe I want to change this landing page headline. Start driving, get paid. Cool, so it's that easy. You can change any text frame just like that, double click and type away. You can also play with the font options. If you direct your attention to the right-hand panel here, you'll see something called text. Every little setting here, there's a lot going on here. Take it from the top. You can change the font. This is a long list of fonts. It's using everything from what's built into Figma. You can also use locally stored fonts. Just be aware that if you use a locally stored font that someone else on your team does not have installed on their computer, they won't be able to edit text without replacing all of the fonts first. So be mindful of that if you're going to change the font. You can also type to search. So I just click into this field. So I'm going to search for one eye like inter. That's a good font. Press enter and now it changed. You can also play around with the font weight. Bold that one, font size. Maybe go down a notch. No, actually let's go back up a notch. That looks cool. You can add things. You can type in things numerically, but you can also, for some of the settings you can also drag. You get a little cursor going on here and you can also play with the alignment. You can center the text, right align it. So fourth and aligning it vertically. You can align middle, align bottom. Doesn't really show here, but if I increase the height of this text field, you'll see the difference now when I jump between the options. Finally, behind these three dots, there are even more type settings. This will depend a little bit on what font family you show some, but there is a lot of stuff going on here. You can change, for example, the case. If you go to the details tab, subscript and superscript, if you're doing chemical stuff, I don't know. All of this depends on what type of font family you have. Not all of these settings are available for all fonts, but you know, have a look, see what you can do with your font that you've chosen. All right, that's basically it with font settings. There's also one thing you should know about the text options. If you look to the right here, you see there are options for auto width, auto height, or fixed size. I can just quickly show you. If I press auto width, text will just be as long as it is. How long it is, it will just be on one big line. That can be useful for smaller buttons and stuff, but if you see text behaving that way, have a look over here and set it back to auto height that's usually the setting you want. Auto height, it will adjust the height according to whatever width you control it to be. So that's pretty handy to know. Finally, you can also add new text boxes. So you don't have to stick to the ones existing here. Adding a new text box is really easy. You just use look up here to the left. Here you see the text tool, or you can use the keyboard shortcut T and just drag out a new text box. Let's start typing away. To exit out of editing a text box, you either click away anywhere on the canvas or press escape. All right, that's it for text. Let's move over and play around with images and icons. So adding and changing images in Figma is super easy. I'll show you a couple of methods now. For example, let's start with this header image. Let's say we wanna replace this guy with something else, someone else driving, perhaps. One way is to go to a stock photo place. One I particularly like is pexels.com. Reason is the licensing is very generous. You don't even have to give attribution. It's recommended, of course, but you don't have to actually, and you can use it commercially. This is search driver here. Something sunny, maybe. That one is not too bad. So I'll just download that and then I'll go back to Figma. So this is how you do to replace an existing image. Click the image layer. And then you go to the right-hand panel. You see there is a heading called fill. And below that, you can see here's the image. I click that one. And here I can actually change things like exposure. You have a little bit of control of that. But yeah, choose image. This will open up your file browser. And here we have it. I'll click that one, and open it up. And there we go, it's replaced. If you're not too happy with the way that one has been cropped or placed within the frame, you can click here again. Here you see it says fill. You can change that to crop. And now you have more control and you can change the size of it and move it around a little bit. Yeah, that looks all right. There we go. Another way of changing images is using a plugin in Figma called Unsplash. Essentially, it's a stock photo website, but it's built into Figma. I'm gonna mark that image again. And then I go to my resources and I go to the plugins tab. And now I'm going to search for Unsplash. There we go. That's it. That's the one. You press run. Give it a chance to think a little bit. Now you get this window up, open up. You can move it around. And here you can search again. So I'll search. And I click here, and I search for driver. There we go. That's a little bit more moody in a rainstorm. I just click that one. And since I had this layer selected, it will automatically populate that layer with the image you want. So it works with either one of these. For example, that's a portrait mode picture. See what happens now. It gets squeezed. That doesn't look too good. So I wanna show you how to fix that. You go into the fill again here to the right, change it to fit. There you go. It doesn't look great either, but now we got the proportions correct. And now we can change it again to crop. And now you can grab the corner of this one. Actually, I grabbed the side of it now and to maintain the proportions, I'm holding down the shift key. So shift makes everything transform with maintained proportions. There we go. Right, so that's how you use unsplash to put images in here. Another way how to add new images, not replacing existing ones, it's also super easy. Figma support is drag and drop. So I can actually grab that driver image that I downloaded from before. And I'll go to my downloads here. If you're on a Windows, obviously go to your file browser and just open up a window. And I just easily drag and drop it in. Boom. And you know what? That's a fairly high-res photo, as you can see. So we have to make it smaller. Again, if I'm not holding shift, it will crop the image. It will actually maintain the image's proportions, but the layer will be cropped. So I'm gonna regret that. I'm holding down shift now. And now we're maintaining the proportions. And by the way, as you can see this image is within this frame. So it's being, you know, you can see it's cropping. It's not exactly in the middle of the screen here. So I'm gonna move it over here, make it smaller again, make it smaller again. Gonna zoom in a little bit. Try to emulate the width at least of these images. And you see, you get the supporting lines going on. There's little tiny red lines on the sides. It's very helpful for aligning stuff. There we go. That's the same width of that image that looks good. Save on Uber Eats with Uber One membership. Actually, it doesn't make sense to have a driver here. I'm gonna quickly use Unsplash again to replace this with something like a picture of a burger or something. So a fast way to reuse a plugin you just used is, as I showed you before, right click anywhere on the canvas, or even faster is a keyboard shortcut, which I love is command option P or control alt P. That automatically runs the latest used plugin. So here we have Unsplash again. I can actually click one of these categories, so click food. Ooh, what do we want? Something tasty. Cool burger with a knife that looks a bit dangerous almost. Let's go with that one. Not even sure what it is, but it looks tasty. Great. All right, so next we wanna add some icons to make our design pop. If you're doing this design at a company already has a so-called design system, you might already have icons that you should be using. But sometimes for some web apps, it doesn't really like the icons aren't necessarily a core part of your visual identity, so you could use pre-made icon packs very successfully. And Figma, of course, supports this. Figma actually has a community where you can find all sorts of designs and files and plugins that you can use in your design. To find community, you go to the top left main menu button here. It's the little Figma icon. You click that one, and then you go back to files. Now we're at the start of your homepage, so to speak, of Figma again. And to find the community, you open up, you click here. And over there you can see community. Here is the community. There's a lot of files, popular files and stuff. What you wanna do is look up here. There's a search bar. I'm going to search for a very popular icon pack that I've used a lot when just comping something up very quickly and the branding is not that important. So it's called untitled UI icons. I hit search. And here we see the same pack actually, duplicated a lot of times. Anyone can actually republish these. So I guess that's why. We can just pick any one of them. I'm going to click this file. Here it is. This is a file full of icons essentially. And up on the top here, you'll see a button called get a copy. And that will duplicate a copy to our instance of Figma. It won't download anything locally because this is Figma, it's browser-based. You don't need to download stuff. You just have it in your area of Figma. So get a copy. That'll open up a new tab. Let's let her load a little bit. Here it is. So here's some instructions on how to use this icon pack. I recommend you read this because there's a more efficient way of using icon packs and components in the design system but we'll make it just a quick and dirty way now. We'll just copy over icons to our redesign. If you look over to the left, you'll see there are different pages in this design file. We're on the welcome page right now. And below you see there is one page called line icons. Click that one. And here we have the line icon pack. I'm going to grab over an arrow. Which one should I pick? Arrow right, a default one. That's perfect. So I'll mark that one and then hit command C. Now I'll copy that. And now I'll move back to, I need to find my redesign file again. Actually, since I have tabs up here, I can go back maybe here, recently viewed. Here it is. This file is untitled, we'll name it later but I'll go back to my design file. Let's zoom in here on Uber for Business. I want to put an arrow icon in this button here. So I'll use paste, command V or control V on a window computer. And there we have that little buddy. Now if I put this icon in the button here, it won't show up because it's black on black here. So I need to change its color. So the way to do that is you scroll down here on the right hand side. You see a small heading called selection colors. You just click this little colors watch here and here you can pick and change and change the color as you wish. Fully red one, you can change the hue. But we just wanted a white one. So I'll drag it all the way up top left. And there we go. Now we can barely see it because it's on a very bright background. But that's basically it. So I'm gonna place it over here and I'm gonna grab this rectangle and drag it out. And whoops. And that looks fairly okay. I can also nudge, if you wanna get really detailed you can nudge things, not by using the mouse but using your arrow key. So I'm nudging one pixel at a time by pressing up and down. You can see here. Oh, we actually found the middle of it. You can go left and right as well. And if you wanna make big nudges you hold down shift. So now I'm jumping. I think eight or 10 pixels at a time depending on your settings. There we go. Sign up to drive. I'll actually go back to my icon pack over here. Do we have a car somewhere? How to search this file? You simply press command F. Up on the top left here you have a little search bar now where we will search throughout the layers. I'll write car. Sim car, erud. Almost. Do we see a car somewhere? There we go. Car 01. There we go. Look. A small car. I'm gonna grab that one. Command C. Go back to my design file. Here we are. And command V. Quickly change that little body's color. The selection color is black. And now I'll show another way of quickly doing it is you can use this little eye dropper. This will look at what color you're hovering over and apply that color. So I'll just click on the back end here to go fully white. There we go. Place that on top. Adjust the width of this. There we go. A little car button. Not sure that makes 100% sense, but you know, now you know how to add icons. Okay, let's imagine you're done. You're happy with your redesign and you wanna share it with your colleagues. It's very easy. Thanks to this being a browser-based application, you can just share a URL and copy that and paste it and anyone can come in here and look around and edit and comment depending on what access you give them. Let's just look up in the corner here. There's a big glaring button here saying share. So click that. And you'll get some options here. I'd recommend one of these two options. If you don't have huge security concerns, maybe this is just something you played around with. It's not, you know, important proprietary business information going on here. You can have this as an open URL. So you change this little dropdown to only people invited to anyone with a link and can view, change that, then copy link. Now you have a URL that you can share with anyone. You just email them that or send them via Slack or whatever, you know, means necessary. And they'll click the link and they'll be in, they can open up the file and look at it. Now if this is something internal that not just anyone should have access to, then you can change this to only people invited to this file. And then you use this field up here where you simply enter their email address. The thing is, I mean, this increases the pressure a little bit for sharing your design with people in your organization. So it all depends on what your preferences are. When you have shared it with people, you can also leave comments in the design to yourself or to your colleagues. The way you do that is you use the comment feature. If you look up in the toolbar, it's the most furthest to the right tool here, add comment. Or you can press the keyboard shortcut C. So now you can give more detailed feedback. For example, this image here, if I'm talking about this one, you just drop the comment here and say something like burger. Nice, really it. Another quick tip, if you wanna talk about an entire section on the website, you can click and drag. You'll get this little highlight. This section, perfect. You can also add emojis. And if people are invited to this file, you can also tag them by using the app. And when someone looks at this, they'll see that it's, okay, it's referring to this entire section when they hover above it. Pretty handy. And the final way of sharing your redesign is exporting it as a picture or a PDF. For example, if you need to store it as static documentation somewhere, really the magic of having a browser-based design software like this is that you don't have to export things as static images. But I understand that some people might wanna show this in PowerPoints or other areas. Maybe you wanna export something to actually use as images on another website and so on. You can essentially mark anything and export it. If I mark this entire frame, and you look down to the right here, all the way down, all the way down to the right, you see a heading saying export and you press plus and you get these options. You can decide the size. You can export it half the size or twice the size and so on or exactly the same size it's set to right now. This one is, if you remember when we imported it, it's 1200 pixels and by 4,000, more than 4,000 pixels high. So this is gonna be a pretty big image. You can also change the file format. You can change it. JPEG SVG Sevector Format and PDF. It's as easy as you just pressing export. And that will be downloaded to your computer and you can share it. If you just want to export a smaller section of the website or maybe an image, just grab that image, press export and now only this little image will be exported. And there you have it. Now you know how to redesign any website in Figma in just minutes. Again, this is perfect to use after a brainstorming workshop or any type of workshop where you want to try out new concepts for an existing product. So you can quickly, anyone can quickly come up new high fidelity design for it. This merger of product design and workshop facilitation has really leveled up my career and my skills and it's been great fun. If you want to learn more about facilitation and how to level up your career with these skills, head over to the free facilitation community. The link is in the description below. Over there, you'll learn more about how to use workshop and facilitation and incorporate that in your line of work so that you're not just involved in execution, you're also involved in the actual product strategy. All right, that's it. If you like this video, make sure to hit the subscribe button and the bell and thanks for watching. See you next time. Wait to the camera. Who's a good designer? Who's a good designer? By the way, can't speak, need coffee, blah, blah, blooper reel. I should have read them before I started recording. Editing nightmare, I'm so sorry. Pop.