Let's build and launch a design portfolio from scratch with Figma and Framer. There will be three steps: create a wireframe, design in high fidelity in Figma, and export from Figma to Framer. Most junior designers skip the wireframing stage and that is why most portfolios look alike, have no storytelling, and many case studies look like essays. In this step, you will create a wireframe with lo-fi design and text just to represent your ideas fast. Here's how. Let us open Figma We will design for desktop first here's a trick instead of a desktop frame, create five presentation frames and arrange them vertically. Name each frame with a strong header so that just reading them will make the recruiter remember you and your projects. Next, create your wireframe within these presentation frames as if you are making a PowerPoint. Start with your latest client project followed by two or three other client or personal projects. Show only your best work. Don't include all projects that you've done because that can actually lower overall impression. Don't worry about colors or fonts. For now, focus on project banners and highlighting your impact. You shall also create a clear call-to-action for the recruiter, like connecting on LinkedIn or sending an email. By the way, your wireframe should NOT look the same as mine because we have different projects and strengths. Also, many people copy my portfolio, so if you copy this structure, yours will look like everyone else. Alright, next step. Now you need to create a wireframe for each case study I will show you one of mine. Use ten presentation slides. Name your slides with strong short headers. The idea is that just by reading the headers the recruiter will understand your story. Actually my McKinsey consulting friend taught me this, but they dont call it a header, they call it a lead. Next, fill in these ten slides with a wireframe. Use a bold large text for the header, not the title because people only read bold large text. Use rectangles to represent images or gifs. Using a limited number of slides ensures your case study doesnt turn into an essay. There's no need to show every step chronologically like user interviews, card sorting, Personas, problem statement, user journey, user flow. No no no. Focus on showcasing your strengths, design iterations, and your project impact. If you didnt do certain steps, or if you didn't do certain steps very well, you can simply just leave that out or rephrase it in a way that showcases how you work within constraints. So instead of saying I didn't do usability testing, say this project didn't have usability testing capacity, and here's how I worked within that constraint. Finally, include a clear call to action for recruiters, and when you're done with your wireframe, take it to one or two designer friends and ask for feedback. Asking for feedback can save you tons of time. Now that you are ready with your wireframe, let's go to the next step. Create a high fidelity design. Here's my recommended frame size and grid setup for desktop, tablet, and mobile most recruiters will view your portfolio from a desktop, so lets design for desktop first, starting with your homepage. The tablet and mobile designs are optional because you can also get them done directly in framer. When designing in high fidelity, open a prototype tab and set it to "actual size" Without this, your design might look too large because figmas canvas makes things appear smaller. Visual design can take time and many iterations, so spending a week on this step is normal. I showcase three projects on my homepage, each within a separate frame with a few layers of auto layout to ensure perfect alignment for banners and graphics. I suggest you to design outside the frame, export it, and place the exported image file on your page. This saves space and ensures export accuracy in later steps. This top navigation is another frame filled with a dark background color. Now let's move to the desktop design for your case study. This can take time as many parts may need new visualizations. For example, my design process and user journey took a while to visualize I also used gifs to represent problems and solutions. My tip for using gifs is keeping your screen recording within 5 seconds and then use an online video to gifs converter. I used Adobe converter at highest resolution. Next, get feedback on your design from a friend. I asked both a designer and a consultant friend who helped me iterate on many aspects. This step is crucial because any changes after this will take significantly more time and effort than making adjustments now. Now let's design a tablet and mobile frames for your homepage and case studies. This step is optional, but if your tablet and mobile break points needs a lot of adjustment, I'd recommend doing it. You will love the K tool for this. It lets you resize complex elements while keeping proportions correct. Just press K on your keyboard and select some elements to try it out. However, I don't suggest you to resize body font body font shall always be around 16 pixels across all devices. For mobile, you might need to redo some banners and visuals to fit the smaller screen. Download the Figma app on your phone and use the mirror feature to view your design in real time. Okay, we are almost there. You also need to create a favicon that is 32 times 32 pixels. You can use your headshot for this by the way, and it will appear as the icon next to the browser tab. For each page in your portfolio, you need a 1200 times 630 pixel social image banner. This shows up when you share your link on your social media or messaging apps. And finally, I recommend you to design a custom cursor which really adds personality. I used a size of 40 x 40 pixels for this just don't copy mine, okay? And now you are done with high fidelity design. Next we are going to do the exciting part of exporting from Figma to framer and launch it to your own website. I've used many web building tools before and I can tell you that switching from another tool to framer feels like switching from Adobe XD to Figma. I am super grateful that Framer agreed to sponsor this portion of the video. So click the link in the comment section and let's get started. You can do tons of cool things with Framer, so I will only cover the workflow with the highest return on investment (ROI) for designers. Please open Framer from the link in the description and start a new site. Click new project to begin. The framer editing canvas feels similar to Figma. First, rename your file, and before importing any designs from Figma, let us set up the basics. Click outside the desktop frame, then click the plus icon on the left to add a page. Rename each page to match your case study's name. Click the framer icon on the top left, select "site settings", go to "general" and name your site and its description. This naming is important because it affects search engine results and by the way, many companies charge a lot of money to do this for you. It's part of the SEO strategy, "search engine optimization" Don't forget to click "save", then scroll down to upload the favicon and social image you designed in Figma. Next, go to "page settings" starting with the homepage. Some general settings will carry over, but some won't. Upload the social image for the homepage again. Also upload it for each case study. Rename the pages and their descriptions as needed, and don't forget to click save. Then click the back icon on the top left to return to the editing view. Now for the fun part, open your Figma file, select the desktop frame and hit enter. This selects everything within the frame, rather the entire frame itself. Click the plugin button next to text. Search for Framer and run the "Figma to HTML with Framer" plugin. Once its done, go back to Framer, select the desktop frame in framer and hit Command V or Ctrl V to paste the designs. The plugin pastes everything and we just need a few adjustments. For my design, I'll go to the layers tab and select the desktop frame first. I have a background color that clearly isn't here yet, so I will add a fill color. The height here is also shorter than my design so I'll adjust the height from fixed to fit content. All the elements are here now click here to play the prototype and our goal now is to make this design work for all screen sizes. Right now if we stretch it, nothing is responsive and let me teach you how to do this magic responsive work. Let's go back, click the plus icon on the desktop frame to add a tablet breakpoint and click the plus sign again to add a phone breakpoint. The desktop frame is the main breakpoint. It means that when you add, delete or edit elements in the desktop frame, it will also impact the tablet and phone breakpoints. But if you adjust something on the tablet or phone breakpoint, it's considered an override and that adjustment will only impact that breakpoint, not anything else. The desktop breakpoint governs browser size equal or beyond 1200 pixels. Tablet between 810 to 1199 pixels and phone is everything below 810 pixels. Our challenge is to adjust everything on the main desktop breakpoint first to make the tablet and phone breakpoint look good as well, and if necessary we can do some customization on the tablet or phone breakpoint. Responsive design can be challenging, but this upcoming demo will simplify it. I challenge you to create this in framer. The goal is that when you adjust the frame size, all elements within it should respond. There are two very important concepts here. First, we need to understand the difference between "frame" and "stack" in framer. A frame in framer is like a rectangle or a group in figma, a frame is not smart. Press F to create a frame for this exercise, we also need to press T to create a text box and F again for more rectangles. A frame's icon is a square. To arrange these frames smartly, we need to use a stack, right click to create a stack. A stack in framer is like auto layout in Figma and you can adjust its layout here like gap, arrangement, and alignment. A stack is represented by two rectangles icon and you can have multiple layers of stacks and frames. Here I will select everything and add a new stack to arrange everything vertically. When you export from Figma to framer, all your auto layout frames will become stacks. If you didn't name your layers in Figma, they might be named a frame even though it's a stack, just because all Figma auto layout frames are called frames. So remember two rectangles icons is a stack, one square icon is a frame. Now you are done with the first concept. The second concept is that there are four ways to adjust width and height for frames and stacks: fixed, relative, fill, and fit content. Fixed means using a specific pixel size which is not responsive. When you choose relatively, you set the elements width as a percentage of its parent layer. For example, here to make this responsive, we can set an 80% relative width. Fill is available only if the parent is a stack. Its similar to relative and I will explain it later. Fit content will adjust this width based on the largest element in the stack. Responsive design requires adjusting all layers. Lets dive deeper here. Starting with the text. Now because this element is within a stack, the fill option is available. Selecting fill will set its width as the same as the entire stack which is equivalent to 100% if you set it as relative. And since here the height is set to fit, the text will now wrap and adjust its height as the outer frame changes. This ensures readability on any device. For the three rectangles, they're within another stack. So let's first set this stack to 100% relative or one fraction fill. And for each individual rectangle, you can choose relative and set the same percentage. Or you can use fill and set each of the rectangle to one fraction. Fractions work like Pizza slices. If all elements are one fraction, its like letting everyone get one slice so they get equal width. If one element is two fractions, it gets double the width of others. So fill is very useful for equal or proportional division I would say it works great when dividing pizza slices in the bottom frame, you can use either 100% relative or fill with one fraction. Now all elements are responsive To make your life easier, I suggest you to set up auto layouts in figma to reduce your work in framer. So to summarize, for width use either relative or fill, And for height use fit content and set width and height for each stack and each frame from outer layers to inner layers. Now lets apply this to your design. I'll show you how to make the top navigation, hero, and first project card responsive. For the top navigation, I want its position fixed. At the top I will select its frame and set its type to fixed. To make it responsive I will set its width 100% relative and for the inner stack I will set its width to 80% relative. I will also click the left stroke here to unpin it from the left so that it sticks to the center. This way, the top navigation will always take up 80% of the browser width. Now let's adjust the main content's padding on the top and bottom, select the stack and add padding. If yours is not a stack, then you haven't set up auto layout for the entire page in Figma You need to select everything and manually add the stack. We can see the tablet and phone breakpoints adjust accordingly To make it responsive, I'll adjust its width to 80% relative as well. This immediately improves the other breakpoints too. I also want to set a max width because I don't want my content to look too wide on monitors. So I will set a 1000 pixel max width for both the top navigation and the body. Now the page is much more responsive. So far I've been adjusting the outer layers clearly the inner layers need adjustments too. For example, in the hero design, some lines go outside the stack. This is because some element width are not set to relative or fill. Select them and change them to fill. To fix this for the hero design, I want smaller fonts for the tablet and mobile breakpoints. So I will directly select text on those breakpoints and make the override accordingly. Now the hero section looks great at all sizes. Next, I'll move to the card. I don't want the image to be cut off in other breakpoints, so I will use the lock tool to lock the dimensions for the tablet. I'll arrange this stack vertically instead of horizontally. Now it looks much better. For mobile, I want a two x two grid layout, so I will switch from the stack selection to grid and adjust accordingly. I also realized that the 80% width we set for the outer layer is too narrow for mobile. So I'll override this one to 88% relative for the phone breakpoint. Your banner might look too small in this case, I recommend designing a separate square banner. I replaced the image with my mobile banner design. Now I'm done with the first cover. I'm going to show you one more element, the top navigation. Right now it's not performing very well on the phone breakpoint. For this one, there are Framer navigation templates that you can use, but for me, I will just make the button smaller to avoid overlapping like this. Okay, now it is your turn to make your homepage responsive. Take your time. Arrange most of your elements by stack, not frame. Adjust most elements width to relative and fill and their height to fit content. That should be 80% of your work. Also, import your design for all your case study pages and make them responsive too. This step will take a while so I suggest you to put on a nice playlist. Also, repeat after me. I am awesome, I am smart, I am patient. My portfolio shines like a diamond. Next, let me show you how to create links. Select the element you want to link and click the plus icon next to link. Then either select the page or paste in a URL. If you are linking text, Framer will automatically style it as a link and you can adjust the style here if needed. If you want a hover effect on buttons, it's a little bit more advanced but I will get you through it. Select the button, right click and choose create component and add the URL link. Click the plus icon to add a hover state. Adjust its style to whatever you like, then hit the plus icon again and create a pressed state. Now when you play the prototype you will see the hover effect and when you press the button it will take you to the link. These buttons now work for desktop and tablet breakpoints. For the phone breakpoint, they are way too large. In this case we can create a component variant. Double click to go into the component. Hit the plus icon on the right to create a variant, then make your adjustments and create a hover and pressed state. Now go back to the design and in the components section switch this button to the variant we just created, and problem solved. You can use the same workflow for all buttons in your design. For project cards, set a link to the case study page. After this your site should be functional. You can try out the publish tool. Click publish on the top right then add custom domain. This takes you to the domain settings page. You can get a free framer subdomain for testing and I will teach you how to set up custom domain later. If your name is available just type in your name, otherwise make a little bit of adjustment. Remember this URL Go to your browser and check it out. Isn't this awesome? Let me teach you another cool trick - Custom cursor. Export your custom cursor as an image. Drag it to framer but outside the frame right click and set it as a component. Hold shift to multiselect all links on the desktop page. Add the cursor here and set it to the component you just made. Now when the recruiter lands on a link the cursor will turn into this smiley face. Isn't that cute? Just dont copy mine okay, make your own cursor. You can also add an appear effect. I will select some elements that I want to slide in from the left and add an effect. Here, select appear and choose your preset. After adding custom cursors and appear effects, your site will look even more customized. So hit publish again. Now go to your framer domain and everything should work across all screen sizes on your framer domain with a custom cursor and custom effects. If there's anything broken, go back to your framework and fix it. I'm so proud of you for sticking with me. Finally, I will show you how to publish this to your custom domain to level up your portfolio. First let's get a domain. I'm using Godaddy and I will search for my name. If your name.com is taken, don't worry, there are many ways to find something similar. I chose alienacai.me because it's easy to remember, easy to type, and only cost 17 cad per year. Just log in with Google and buy it with your credit card. Next go to framer, then site settings, then domain. Click the three dots to remove the current domain and choose connect a domain you own. You need to upgrade your framework plan to make this change. For a design portfolio, I recommend the basic plan as it allows multiple pages. Use the code "ALIENA" to get 25% off this plan. This code also applies to the mini plan, but the mini plan only allows one page. Once upgraded, go back to domain settings, select connect a domain you own and input your domain. This will generate the DNS records needed to set up your domain. DNS stands for "domain name system" Now go back to the domain provider and add the three DNS records you might need to remove some existing DNS lines. You can leave the TTL "time to live" as default after adding the DNS lines, take an hour for self care. After about an hour, for me, it was 25 minutes, Your site should be live at your custom domain. If you need to make any further changes, do it and then hit publish again on framer. Your changes will also appear on your live site now and oh my God, you are done with your portfolio and I'm done with this tutorial. Congratulations. Now your site is live. I want to tell you that this video makes the process looks easy, but it's not. It took me months to create my first portfolio and I've changed platforms five times and every time I felt like my past effort has gone to trash because every time I basically build from scratch all over again. If you also feel the same, let me tell you this. Good design takes time. Good design takes many iterations. Behind a great portfolio, there are 100 versions you just haven't seen before. And it's the same for junior and senior designers alike. So, are you ready to archive your old portfolio and build a new one with me? Click the Framer link below and let's get started. If you're already done. Well, I will see you in this video. I'm Aliena. Thank you for watching. And this is my first video recorded in my Toronto apartment. Woo hoo!
