Create the Quickest Portfolio in Just 15 Minutes | Free Template Included

it's the moment of truth it's 2022 so if you are a designer you need a portfolio so today we are going to do a very quick and easy portfolio that anyone can do to follow this tutorial you want to need figma and an account created with framer by the end of this video you will have your portfolio that you can publish and share it with anyone so you won't have more excuses for not applying to those jobs let's start by looking at the figma file that we are going to use for this tutorial I'm going to leave a template for this file down in the description so you can download it and use it with your own details and projects but for now I'm going to use myself as an example just because it's the easiest thing to do so this portfolio has three parts we have first a home page at the top it has a navigation bar as usual then this it has this sort of header with a description and a tagline of who I am and then a link to three projects and then at the bottom we have this footer second we have this about page very simple very minimal it has a bit of a description of Who I Am with a picture and some software that I can use and my main skills and at the bottom it has a call to action to send an email or to download my CV and finally we have this reusable project page that you can use for each project and add the different details at the top it has a bit of a description of the project with like same tagline as we had in the home page it has an image and then what I think is really important it has a description of what you did in the project so that if you only did information architecture and wireframes people that read it don't think that you also did visuals and 3D we which I think is quite important especially if you are a ux designer for instance who only does a part of the project it's really important to show the beats that you did and the thinking process behind it then we have a bit more details about the project the client project type and this can be quickly changed to whatever you want so this could be year if wanted or whatever you want really and then we have a couple of sections here we have user personas with a bit of space throughout the description and maybe explain the thinking process about the personas why you did them what were your findings and then we have another section with sort of a grid this could be for instance user flows whatever you want same a bit of space to explain the thinking behind and for images and again footer so this is the main template now I know it is very minimal it doesn't have a lot of information but I think in this case less is more so for now we're going to focus on these which is the basics the fundamentals of our portfolio and let's turn it into a real website and for that we need framer now framer is a free to use no code website builder and what this means is that you can create real websites with designs that you've built in a matter of hours you don't need to code you don't need to do very complex animations you can just take your design put it there publish it and you have a live website now how I see framer is like a prototyping tool what it really does is it breaches the gap between design and development so you can create really really complex sides although you can do really cool stuff with it but still it allows designers to create their site and their website without the need of a developer they have a lot of documentation that you can read about but what we are interested about is on the canvas itself so let's open framer and have a quick look now the way it works it's really really easy you have this sort of canvas where you can drag and drop things to it or you can even grab a template and start from there but what we are interested about is like a fully blank page so as I said you have this canvas you have the desktop you can add a tablet you can add a phone as well but we are going to start with desktop obviously and then you can drag and drop layouts you can drag and drop full navigations or more complex layouts like Galleries and grids and testimonials and things that are quite building blocks of a website so you can do it really quickly and also what you can do is create a collection so more like a CMS you create a template you add your information and you have Dynamic pages that are created based on that content but what we are going to focus today is on how to bring our designs from figma to framer and we are not going to look into each individual blog just because that's not what we are interested about at the moment so what I want you to do is you go on framer you go on learn and then importing from figma you can also do figma to framework on Google and you'll see the same result so we are going to download a plugin called figma to HTML with framer I'm going to leave the URL below as well so you can go directly and you are going to download this plugin onto figma so I already have it but I'm going to the full process try it out and then it opens up blank file but you will already have the plugin downloaded to make sure you have it downloaded you go onto the figma menu plugins and recent so if it says figma to HTML with framer it works we are going to start a new project so we're going to say new blank side and we have our blank project now because I've been working with a bit wider website I'm going to change this see when you select an element in the canvas you can tweak its properties here so I'm going to say because I already know it so here's the beat that I'm obsessed about you go into figma you go to your file and I'm going to select the navigation bar navigation bar is selected I'm going to go to the figma menu plugins figma to HTML with framer and at the bottom you will see a bit of a loader saying it's copying or something so have a look there copying copied 11 layers based in framer now I go to framer and I simply do command V or Ctrl V if you're on Windows and here's my navigation bar directly from figma I can Center it and put it at the top and you will see okay this maybe is an image or I'm just copying an SVG or yeah a transparent image but if I go onto layers I can see that all of this is editable so it's Transforming Our file in figma into HTML so we can copy it into frimer so maybe instead of contact I want to say playground I can quickly change it and that's it it's so easy cool so I'm going to delete this because it's the frame and I want the navigation bar within desktop and now I can keep doing this because it's as easy as that so I'm going to here plugin figma to framer same wait until it's copied boom it's here it's as easy as that I'm going to make sure everything is under desktop because I want it to be inside my page I'm going to put it a bit up and then what I don't suggest is to copy a full page just because you want to make sure that it copies correctly but I'm just going to take my full body of my website with the three projects and I'm just to copy it just to see if it works for fun it's 26 layers it's not that much so 26 layers paste in framer let's see I'm going to drop it into desktop and now here's the thing okay it's below so I need to pull it up a bit still I need to be inside desktop centered so I'm just going to select my canvas and say also so then the canvas takes the size of the contents that are within and finally I'm going to copy the footer there we go we have a full page that I just copied from figma and I can tweak anything I want the text can be changed the images can be changed so I'm going to quickly do the other Pages just to show you how it is and then I'm going to link them so you know how easy it is to create links and interlinks between your pages so give me a sec I'll be right back [Music] thank you foreign [Music] [Music] [Music] [Music] [Music] foreign I've very quickly copied and pasted my design from figma to framer using this plugin now what I'm going to do is link the different pages from the navigation and the different projects to the project page so here on the about page I'm going to go link to the about page then I'm going to go into the project so I want yeah that would be okay project one and maybe the image as well project one so I'm going to go to about work and link to the home and project I'm going to do cool so these are the basic connections that we need for now but let's see if it works so I'm going to go to my home page and click play there we go looks good this is the about page going to work project that's all I need so one thing that you can tweak around and that actually adds a bit of fun to the page is how the elements load so maybe you can add some effects and add an animation when the page loads for instance so you can say maybe the trigger is on view and it will slide I'm going to say is let's see if it works there we go maybe it's too much but you can see that it's very easy to add animation so same it can be with this maybe there's a scleral animation scroll animation scroll animation let's see what it does so this loads in there we go and you can play it has different animations and you can play with the different transitions on how things load it has all these presets that you can play around with cool let's leave it like that so we have our page now we have our home page we have our about we have a project that we can reuse for each individual project what now how do I turn this into a live website so you simply have to go publish and it will give you this URL that ends with framer.app but you can add your own custom domain so you just simply have to buy a domain and add it here at custom domain I'm not going to do that because I already have my website but if I go here this is the website this is it and you can take that share it with recruiters with companies and that's it that's all you need a portfolio website that works and that anyone can see so a couple of caveats before we end so as it stands the side it's not responsive so if you try it on a tablet or on a phone you will see that it's not laying out as it should but the figma file that I'm giving you is using Auto layout so if you go on to framer and add the breakpoint for tablet and mobile it shouldn't take you long to make the changes and use it on any device that you want and the second thing is that I really recommend you to look into collections it's a much better way to create the pages for your project the reason is that you will only have to create this collection with your different projects you will have already your template project page and every time you create a new project it will dynamically create a new page for that project so you won't have to do it over again duplicating the pages and linking everything again it's Dynamic you only do it once and it creates it for you so this is the end of the tutorial and as you've seen framer is super super easy to use it's really quick you can pick it up really quickly and create a website in a matter of minutes if you want to learn more about it I really suggest you to go into the framer website or their YouTube channel to look into the tutorials the new feature that they keep adding and just keep up to date with the news alternatively you can also look into skillshare where you will find tons of tutorials on how to use framer and if you want I'm going to leave a link in the description for 33 days of skillshare Premium let me know in the comments what you think about this way of creating portfolios about framer and also if you are doing your portfolio following this method and if you do please share the link with us so we can all see it as always subscribe and like this video If you want to get notified when I publish a new one thank you so much for watching and I'll see you in the next video

Channel: Nuria Quero

Views: 80,871

Keywords: portfolio website, how to make a portfolio website, how to build a portfolio with framer, framer, figma to framer, figma to framer plugin, quickest way to build a website, how to create a personal website, create a portfolio website, quick portfolio website, ux design, ux design portfolio, portfolio tutorial, framer tutorial, framer for beginners, web development for, web development for beginners, how to make a top 5% portfolio

Id: JqDx30SMprg

Length: 14min 49sec (889 seconds)

Published: Thu Dec 08 2022