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

This is the quickest tutorial to create a website. We'll be focusing on taking our designs from Figma and using Framer to create a website that you can quickly throw up online if you're looking for a job.
Download the Free Template:
nuriaquero.gumroad.com/l/port...
Figma to Framer Plugin:
www.figma.com/community/plugi...
Use Framer:
www.framer.com/?via=nuria (50% OFF with code: FRAMERBF23)
🚀 If you don't want to design your portfolio yourself, here are 3 FREE TEMPLATES (and 1 Paid) you can use on Framer right now! 🚀
• 3 FREE (and 1 paid) FR...
---------------------------------------­------
⚡️💻 30 days FREE Premium Skillshare:
skl.sh/3Bk1IUt
---------------------------------------­------
Timestamps:
0:00 Intro
0:24 Figma File Overview
2:51 Intro to Framer & Canvas
4:50 Installing the Plugin
5:53 Let's Begin Our Project
8:45 Working on the Other Pages
9:58 Creating the Links between Pages
11:06 Adding Animations
12:16 Publishing our Website
12:55 Next Steps & Improvements
13:50 Outro
---------------------------------------­------
👇 Find me here 👇
Newsletter: quenewsletter.substack.com/
Twitter: / _nuriaquero
Instagram: / que.studio
Tiktok: / mynameis.nuria
#framer #figmatoframer #designportfolio #howtocreateawebsite #quickportfolio

Пікірлер: 139

  • @nuriaquero
    @nuriaquero Жыл бұрын

    Thanks for watching this tutorial! Let me know if you are using this method, and if you do, share your portfolio with us!

  • @marty9404

    @marty9404

    Жыл бұрын

    Thanks for the video Nuria. But Framer isn't exactly ideal since there is no responsiveness to all devices.

  • @johnquesterloyola1229

    @johnquesterloyola1229

    Жыл бұрын

    @@marty9404 there are breakpoints in framer i think. kzread.info/dash/bejne/g4GX16Nmm7S1oLQ.html

  • @marty9404

    @marty9404

    Жыл бұрын

    @@johnquesterloyola1229 Great! Thanks so much Nuria. You are the best. Please make another video about how to get clients via form submissions. Thanks again.

  • @noorqoulaq7860

    @noorqoulaq7860

    8 ай бұрын

    omg we have the same initials almost the same name

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, huge delay but here's my latest video on how to create a responsive site. Hope it's useful :) kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @arbazmemon2142
    @arbazmemon214210 ай бұрын

    let me start by saying THANK YOU. You are one of the rarest person who have made a tutorial extremely easy to understand and even showed how the linking works. Subscribing right away. Keep up the awesome work you are doing :)

  • @davidchan2188
    @davidchan2188 Жыл бұрын

    This was an amazing tutorial. Thanks Nuria!

  • @davidostrowski679
    @davidostrowski67910 ай бұрын

    Thanks Nuria! This is awesome! Mind blown! I'm a relatively new UX/UI Designer in the process of refining my case studies and I really want to use Framer to create my portfolio... this video has been the answer to all my questions!

  • @owadiary
    @owadiaryАй бұрын

    Ive been putting off doing portfolio for so long. Your direct to the point video helps me to do it. Thank youu

  • @mdemariana
    @mdemariana10 ай бұрын

    Thank you so much! Such a great tutorial! I would really like the collection one too.

  • @user-yd5hy8pj4s
    @user-yd5hy8pj4s4 ай бұрын

    Thank you for this!

  • @ritabarreiros1
    @ritabarreiros1 Жыл бұрын

    This is so helpful, thanks Nuria 🥰

  • @sudarakagunasena7056
    @sudarakagunasena7056 Жыл бұрын

    Thank you Nuria. much appreciated.

  • @santiagonavascalero6478
    @santiagonavascalero6478 Жыл бұрын

    Thank you so much for the explication Nuria

  • @hijumoke
    @hijumoke Жыл бұрын

    This is super helpful. Thank you!

  • @hsinjulee0225
    @hsinjulee0225Ай бұрын

    So clear! Thank you so much!

  • @osks
    @osks Жыл бұрын

    Very nicely done!

  • @pandie07
    @pandie07 Жыл бұрын

    Thank you so much for providing this tutorial. :D Now I can transform my dull portfolio into my ideal website.

  • @adproproductions2038
    @adproproductions2038 Жыл бұрын

    AWESOME TUTORIAL!!!! Thank you!

  • @jacquelinethair4076
    @jacquelinethair407610 ай бұрын

    This was exactly the lesson I was looking for. Super informative, clear, and concise. Thank you.

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    Great to hear! Happy to help!

  • @ViraMikulina
    @ViraMikulinaАй бұрын

    Awesome tutorial! Thank you a lot

  • @Opptnty
    @Opptnty7 ай бұрын

    Thanks for the great tutorial!

  • @fatimasierra2901
    @fatimasierra290114 күн бұрын

    Gracias, gracias, gracias! 🥰

  • @djashawe88923
    @djashawe88923 Жыл бұрын

    I just subscribed to your channel. I like how clear and thorough you are at guiding us through the process step by step, the volume, the speed, everything is on point! Great job! Keep up the good work!

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    Awesome, thank you!

  • @shedesignedwhat
    @shedesignedwhat Жыл бұрын

    This was so helpful thank you!!

  • @iahad97
    @iahad9710 ай бұрын

    Amazing tutorial! thank you so much 👏

  • @gkennedy_aiforsocialbenefit
    @gkennedy_aiforsocialbenefit Жыл бұрын

    Excellent Video! Thank you.

  • @Collapse_in
    @Collapse_in Жыл бұрын

    This has really helped me with my paralysis over learning how to publish from figma! Thank you!

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Yay!! Glad I could help ✨

  • @number0228
    @number0228 Жыл бұрын

    Its Amazing, Thank you for sharing this video.

  • @WhatMummyLoves
    @WhatMummyLoves5 ай бұрын

    love this, thanks for sharing

  • @jyotsnasharma741
    @jyotsnasharma7413 ай бұрын

    Brilliantly explaind exactly i was looking for. Watching from India 🇮🇳

  • @puseletsomaraba1313
    @puseletsomaraba1313 Жыл бұрын

    Thank you for your great work

  • @arwakhaled8204
    @arwakhaled82044 ай бұрын

    Thank you so much, This was really helpful

  • @DanishGulsher
    @DanishGulsher Жыл бұрын

    This tutorial was very helpful!

  • @shierly9132
    @shierly91329 ай бұрын

    Thank you so much for your explanation. Ii is so clear & understandable. Thank youuu

  • @Balusdesign
    @Balusdesign9 ай бұрын

    Wow, this is awesome🤩

  • @nbv435
    @nbv43511 ай бұрын

    Great video! Thanks a lot!

  • @johnquesterloyola1229
    @johnquesterloyola1229 Жыл бұрын

    I love your content! keep it up! New Subscriber from the Philippines

  • @soniyasinghh
    @soniyasinghh4 ай бұрын

    best one!! thanks.

  • @LanguagedesignLearn
    @LanguagedesignLearn Жыл бұрын

    thank you Nuria, I hope you do more and detailed videos, it was helpful.

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    You can count on it! What would you like to learn?

  • @liorcohen2800
    @liorcohen28005 ай бұрын

    fantastic! ty!

  • @moshartmedia
    @moshartmedia Жыл бұрын

    Wow,, thanks for your tutorials,

  • @carlosreyes6612
    @carlosreyes6612 Жыл бұрын

    Thank you Nuria !

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    You're welcome 😊

  • @hassanoboni
    @hassanoboni9 ай бұрын

    This is amazing thanks

  • @TheSAMRIDH
    @TheSAMRIDH2 ай бұрын

    Fantastic

  • @WaqasAhmad-fg8yq
    @WaqasAhmad-fg8yq8 ай бұрын

    No Bullshit, stright to the point, Excellent 💥💥

  • @mdmohon432
    @mdmohon4327 ай бұрын

    great one

  • @ahmadsamsulh
    @ahmadsamsulh Жыл бұрын

    Hello buddies, im from Indonesian and thanks u for making video about framer, and u really help me make portofolio😉😉

  • @shehanjayarathna9255
    @shehanjayarathna9255 Жыл бұрын

    Good Insight👍

  • @Cristina-hp8ug
    @Cristina-hp8ug Жыл бұрын

    Thanks for sharing!

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    Thanks for watching!

  • @simonaesse6568
    @simonaesse6568 Жыл бұрын

    This is so useful, thanks!

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    I'm so glad!

  • @riyachatterjee2303
    @riyachatterjee2303 Жыл бұрын

    Hey! Thank you for this!

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    No problem!

  • @polarbyrd23
    @polarbyrd237 ай бұрын

    Muchas gracias Nuria! Voy empezando mi carrera y como actualmente existen vastisimas formas de crear un portafolio, esto se me ha vuelto muy abrumador, pero este video es super util!

  • @nuriaquero

    @nuriaquero

    7 ай бұрын

    Me alegro mucho!

  • @Gianluccazz

    @Gianluccazz

    6 ай бұрын

    Lo mismo te digo nuria muchas gracias. Andube averiguando y si hay nuchas herramientas como dora,webflow,elementor y un monton más es abrumador ver comparativas que hasta hay un chico que comparo como 6 o 7 a la vez en el mismo video. Como diseñadores le da mucho valor añadido ya que nos dedicamos al diseño tener nuestro portafolio web.

  • @zhenikosha
    @zhenikosha Жыл бұрын

    Thanks for the class! How you adopt the fonts between Figma and Framer? Is it done automatically

  • @sterwinfernandez4900
    @sterwinfernandez4900 Жыл бұрын

    Wonder Ful

  • @abdullla.0
    @abdullla.0 Жыл бұрын

    best Tutorial , thanks sister

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    You are most welcome

  • @taufeeq8269
    @taufeeq8269 Жыл бұрын

    👏👏great video!🎬

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Thanks!!

  • @poornimam4570
    @poornimam4570Ай бұрын

    great.btw you got an new subscriber :)😄

  • @jesusavendano5261
    @jesusavendano5261 Жыл бұрын

    I love your work Nuria, i'm creating a design in figma about a shop car website.

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Sounds great!! 👏🏼 Thanks :)

  • @whoismattkohn
    @whoismattkohn Жыл бұрын

    Awesome Template 🎉🎉❤

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    Thanks 😄

  • @Fitrecc
    @Fitrecc7 ай бұрын

    love you

  • @dhruvin-dave
    @dhruvin-dave Жыл бұрын

    Really liked your content, I've already built my website in wordpress, but i am working it out on framer, & for the header links, if you turn them into a component then the links update automatically to all the pages you add them. & i love the new scroll interactions in thier last update, what are your thoughts on that ?

  • @vincenzo1735

    @vincenzo1735

    6 ай бұрын

    So this is possible to start from figma, pass through Framer and then publish on Wordpress???

  • @ParentingTweens
    @ParentingTweens4 ай бұрын

    Just found this video - thank you for posting such great content! Would you please share the link to the downloadable Figma file? the page isn't available anymore.

  • @deebakhan4740

    @deebakhan4740

    3 ай бұрын

    would you mind sending it to me as well, it isn't working.

  • @oluwafunmijinadu210
    @oluwafunmijinadu21010 ай бұрын

    Thank you for this video, Nuria Quick question, if I use your figma template, and then I make the desktop, tablet and phone version of the portfolio on the same Canva in framer, using the publish link, will it automatically detect the viewer's device and showcase the portfolio based on that like a responsive website, or how would that work?

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    I think how it is at the moment, you'll have to create them manually. But if you already have a design it's easier to have as a reference

  • @abdodjallil3001
    @abdodjallil3001 Жыл бұрын

    thanks

  • @janesukiasyan6444
    @janesukiasyan644410 ай бұрын

    Thank you very much for the video! Just one question, how can I keep animations? Because I have animations in figma, can I transfer the animations as well?

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    I don't think it's an option at the moment. But if I were you, I'd research Framer's animations and transitions as they are super easy to learn! Let me know how you get on and I can do a quick explainer

  • @elysiumcore
    @elysiumcore Жыл бұрын

    You convinced me to try this out 😂

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Feel free to try it out with my link www.framer.com?via=_nuriaquero

  • @MadihaAmin
    @MadihaAmin22 күн бұрын

    Hi @nuria , the framer preview cuts down little portion of my 1440 frame , is it normal ? and how do u fix it ?

  • @funnies8772
    @funnies8772 Жыл бұрын

    Amazing tutorial. Can you please make another video teaching us how to make the design responsive on Framer

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Hey, definitely on my to-do list! Thanks for the feedback :)

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, huge delay but here's my latest video on how to create a responsive site. Hope it's useful :) kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @TruueFlo_
    @TruueFlo_9 ай бұрын

    Thanks for the video! Once we download the free file how do I open it in figma? Or should I open the file in Framer first & then copy & paste from Figma?

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    You can drag and drop the file on your Figma dashboard and it will open.

  • @georgescreates
    @georgescreates11 ай бұрын

    I have in mind to use Framer to build my portfolio. Thank you for sharing this with us. But, I might be wrong, it seems, at the end, Framer just gives us a link where we can like preview the final website and not the html/css code. Isn't it? Does Framer provides the codes ? Nice video.

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    Not that I’m aware! But you can publish the website

  • @segunthecanvas
    @segunthecanvas Жыл бұрын

    Thank you very much for this. Please what did you mean by "look into collections" at 13:24

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Framer has a CMS-like feature called Collections, that allows you to create content dynamically based on date you input. If you look for « Framer Collections », you can find more info about it.

  • @nuriaquero

    @nuriaquero

    6 ай бұрын

    Hey there - a bit later than I would have liked, but here's the video on how to create a CMS and Collections on Framer. kzread.info/dash/bejne/opplsa1sh7OfmtY.html Hope you enjoy it :)

  • @lalicaroful
    @lalicaroful Жыл бұрын

    Thanks a lot! Collections? Is this a something in Figma or Framer?

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    This is something in Framer! I'm planning on doing a tutorial soon on how to make one. Stay tuned and thanks for watching :)

  • @nuriaquero

    @nuriaquero

    6 ай бұрын

    Hey there - a bit later than I would have liked, but here's the video on how to create a CMS and Collections on Framer. kzread.info/dash/bejne/opplsa1sh7OfmtY.html Hope you enjoy it :)

  • @piotrgorski1945
    @piotrgorski1945 Жыл бұрын

    Looks so easy❤ how to remove “Made by Framer”?

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    Unfortunately you need to pay for that. It’s not available on the free version

  • @rhyearavenrosecalicdan1881
    @rhyearavenrosecalicdan18813 ай бұрын

    hi, how did you make your portfolio or website responsive?

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    hey there, here's my latest video on how to create a responsive site kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @richardbell6087
    @richardbell6087 Жыл бұрын

    Great job - How do you make responsive?

  • @PathosConsultingGroup

    @PathosConsultingGroup

    Жыл бұрын

    I think you set constraints in figma and framer adopts them. could be wrong (I'm new to this)

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    I’ll do a video about it! 🙏🏼

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, huge delay but here's my latest video on how to create a responsive site. Hope it's useful :) kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @dimejiolayinka6205
    @dimejiolayinka62058 ай бұрын

    Hey Nuira could you make a video on making it responsive because ive been trying to do that on Framer for a long time and ive watched a lot of videos on responsive design and none of them are solving my problem.

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    Hey, definitely! On my plan

  • @dimejiolayinka6205

    @dimejiolayinka6205

    8 ай бұрын

    @@nuriaquero Thank You

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, huge delay but here's my latest video on how to create a responsive site. Hope it's useful :) kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @dimejiolayinka6205

    @dimejiolayinka6205

    3 ай бұрын

    @@nuriaquero thank You it'll definitely help out I appreciate it

  • @WVVYBEATZ
    @WVVYBEATZ5 ай бұрын

    ❤❤

  • @arunkewat4620
    @arunkewat4620 Жыл бұрын

    How to fix the top nagivation bar in framer ?!

  • @nuriaquero

    @nuriaquero

    Жыл бұрын

    I plan on making a video on responsiveness, that will fix that.

  • @MarkeS_Design
    @MarkeS_Design11 ай бұрын

    Can I build website in framer without using figma?

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    100% yes!

  • @a.s8106
    @a.s8106 Жыл бұрын

    thank you but how about the responsive version?

  • @nuriaquero

    @nuriaquero

    8 ай бұрын

    I believe you'd have to create them manually on Framer, I can do an explainer :)

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, huge delay but here's my latest video on how to create a responsive site. Hope it's useful :) kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @cho7official55
    @cho7official556 ай бұрын

    How responsive are those tools, cause it looks like it's not

  • @nuriaquero

    @nuriaquero

    6 ай бұрын

    Hey there! They are fully responsive, you can add breakpoints for any device and work with auto layout and other flexible tools. I'm preparing a video soon to talk about responsiveness on Framer, so stay tuned!

  • @nuriaquero

    @nuriaquero

    3 ай бұрын

    Hey there, here's my latest video on how to create a responsive site kzread.info/dash/bejne/mHmElJVypNrIk5c.html

  • @DavexGamer
    @DavexGamerАй бұрын

    The download file doesn't work anymore

  • @nuriaquero

    @nuriaquero

    Ай бұрын

    Hey, it seems to be working fine for me. Could you try again? You will need to open the file in Figma directly, dragging it to your library. nuriaquero.gumroad.com/l/portfolio_figma_template

  • @Boardmaths
    @Boardmaths2 ай бұрын

    I can’t use the Figma file template

  • @nuriaquero

    @nuriaquero

    2 ай бұрын

    Have you tried dragging the file into your Figma dashboard? It should be working!

  • @Boardmaths

    @Boardmaths

    2 ай бұрын

    @@nuriaquero I haven’t tried that out. I will

  • @cytuber
    @cytuber Жыл бұрын

    I made a comment that you were not clear about something you said but it seems to have vanished?

  • @nuriaquero

    @nuriaquero

    11 ай бұрын

    Sorry, can you comment again?

  • @cytuber

    @cytuber

    11 ай бұрын

    @@nuriaquero Thanks for your response, Nuria. The part that confused me was at 13:25 where you gave a quick suggestion about collections. I think I should check out collections to understand what part is universal and what is project based. It's probably too much to try to explain it here so I'll see what I can find about them. Thanks

  • @nuriaquero

    @nuriaquero

    6 ай бұрын

    Hey there - a bit later than I would have liked, but here's the video on how to create a CMS and Collections on Framer. kzread.info/dash/bejne/opplsa1sh7OfmtY.html Hope you enjoy it :)

  • @cytuber

    @cytuber

    6 ай бұрын

    @@nuriaquero Thank you 👍

  • @thevikingsock8527
    @thevikingsock85275 ай бұрын

    Framer and Webflow hate their customers. For example the Cookie Banner, you need it for legal reasons in Europe and you only get it for 30/Month, which is ridiculous. Thats the 4th tier already ...

  • @muhammedpurathayil7041
    @muhammedpurathayil7041 Жыл бұрын

    This is so helpful. Thanks!