For a short video there's a lot of great practices being laid out! During your building process, when you start off, "As a designer I often want to go wide..." is such a great tactic to efficiency that I think a lot of designers should entertain! Thank you for sharing your process!!!
Hi Matt, great tutorial! Are there any valid scenarios in which you would say designing in Figma is preferred before Framer? I see a lot of people head straight to Framer and dont even bother with Figma anymore. To be honest, I like that approach a lot too as it just saves me time and I get much more direct prototype feedback straight away. Thanks for this! Appreciated🙏🏻
Definitely! A lot of clients will require full sign off on design before you build, or even you might require it so you know everything's approved before you open up Framer and don't risk wasting any time with feedback. Or if you're working with a team, I still find Figma to be really easy to collaborate and iterate in whatever fidelity you're working in. But for me it's really just more efficient and allows me to explore the details in a more direct way where I can immediately see things working.
It also Depends brother, like i am a web designer i mostly get web design projects so i design in figma, if they say we need this website to be developed then i move my design into framer, Figma is always my first choice because it gives me freedom to make design easily, i can do ideation and handoff easily.
What software is he using to record these videos? It’s clean and even shows what keyboard shortcut he uses. I’m curious to know what software he uses to do that?
This is brilliant advice for any web designer, even if you don't use Framer. Exactly the level of detail and care I look for in the designers I work with. Class video mate. 👏
I always wonder how you add animations without worrying about it breaking on specific browsers. It happened to me so many times that it threw me off adding animations at all.
I find the best way to do this is make animations a "nice-to-have", and if the animations don't load but the layouts are fine, it's nothing to worry about. But if the animations end up breaking the layouts & experience, then spend some time trying to figure out how to make them work or just simplify/remove them.
Hi Max ! how are you ? Why you stop to make video on framer in UA-cam ! U make an amazing work so continu please to help to growth on this tool please !
Can you make a video where you go in depth about your process of creating a stylesheet like this ? How do you come up with the various color shades ? System or gut feeling ? What about the typography ? Do you use a common scale for this ? Minor third, major second.. ? Would be more than greatly appreciated !
Hi, way ahead of you! 😄 Have a look around our channel and you will find videos covering a lot of your questions. We also have free resources on our website that will help.
Hi Matt! Thank you for all the knowledge =) I wanted to ask why you use a max width of 1312 px when you use a desktop size of 1200px in framer ! When the desktop margin is 64 px shouldn't the hero-container be: 1072 px instead of 1312px ? Would be nice to clarify cause I watched your other video " don't make these rookie mistakes" with an example of 1440px desktop design in framer and you made a hero container of : 1344px because of 48 px margin which makes totally sense ! But now I am totally confused :D THANK YOU
Would you recommend creating a portfolio on Figma and then exporting it to Framer? I am completely new to Framer and im struggling to create the portfolio on Frame alone
Hi Matt, great video! I'm an Interaction Design student about to graduate and looking to build my skills for a job search. I'm interested in your Framer Masterclass, but I have a question: does the course cover designing the site in Figma first, or do you dive straight into building it in Framer? I'm looking to improve my Figma skills while also learning Framer, as I want to create a portfolio by the end. Would your Masterclass be a good fit for this, or would I be better off with Flux's "Figma for Web Design" course? If your course includes Figma, it sounds like exactly what I need.
The Framer course doesn't cover Figma. Our Figma course covers the software, and we have several courses covering design. Hope that helps! Feel free to reach out to the team for more information.
Great video breakdown of Framer, Matt did a great job walking through his process. I know for myself I have been struggling with Size (Width & Height) variables - I'm looking forward to the Masterclass :)
The art direction of this side is just top notch. I would love to know your content creation techniques. Are you lucky enough to work with photographers or this actually the level of your Midjourney skills? Maybe you could record a lesson about this too? and add it to masterclass?
Thank you! Photography wise the site is pretty much all stock photos from Pexels, and the 3D device was made in Spline. A couple MidJourney photos I think too but nothing major. Noted for future content!
So the point of designing in Figma before Framer is the prototyping capability of Figma, right? Just got into learning Figma and a bit confused after finding out Framer 🤨
It's easier to design in Figma-it's a design program. You can try out lots of different ideas and finesse the layout until you have a final design. Then develop in Framer. This will also ensure cleaner builds. Iterating too much in Framer (or any other web development platform or method) will make a mess. Glad to have you here Roberto! ✌️
im still fairly new to Framer and have some questions i want to ask here.. would it not be more work and repetitive to set up a wireframe and construct all of your design on Figma and then redo the whole page again on Framer? When you present and deliver your work to the client do you normally give two files? One is Figma that shows all of your "process" like the style guide, and low fidelity work and Framer would be the high fidelity prototype? I have also heard that you can design all of your work on Figma and then directly export all of it to Framer so you don't need to construct the pages again.
Hey, yes it’s more repetitive and more work, but a lot of times worth it. I still find it easier to explore and present static designs in Figma while in the beginning phases, but if you are just as fast in Framer, go ahead! I wouldn’t show both Figma and Framer at the same time. Figma would be the first round for feedback and approvals on design, then I would build in Framer and get feedback and final approvals on the live site. You can use Figma to Framer plugin that I mentioned in the video but you will still need to do work in Framer either way (you can copy and paste but it doesn’t end there).
For consistency I like to find photographers on Unsplash or Pexels with a bunch of solid photos and just stick with them for the project I'm working on.
Framer doesn't support REM or EM font sizes. All the editable font style properties will show up when you are using/editing a text style (Assets / Styles / + / New text style).
Can I use framer to make a website for a company and sell it to them so that it's up and running? If so, who hosts the site ? If not, if I buy a custom domain, can I link the framer website to it and host it myself or is it up to the customer to host and maintain the site? Sorry I am a beginner and don't know much about these things and you seem to be a professional in these matters ! Thank you
Oh, that's awesome to hear about the New Framer Master Class! I was thinking of joining the current one on Flux, but for some reason, I just can't stand the guy's (dog groaning) voice 😅.
hei guys can someone give me a hand with building the stuff in the beginning? like distances and spacings, how can you know you will need those and not others, for example at the eyebrow element, I would say extra small-16px -is too big. Appreciate all!! thanks! @fluxacademy
Love it!
For a short video there's a lot of great practices being laid out! During your building process, when you start off, "As a designer I often want to go wide..." is such a great tactic to efficiency that I think a lot of designers should entertain! Thank you for sharing your process!!!
Thanks Mike!
Your WORFLOW protocol is fantastic from someone who does print and pivots to digital design…👍💰✅
Hi Matt, great tutorial! Are there any valid scenarios in which you would say designing in Figma is preferred before Framer? I see a lot of people head straight to Framer and dont even bother with Figma anymore. To be honest, I like that approach a lot too as it just saves me time and I get much more direct prototype feedback straight away. Thanks for this! Appreciated🙏🏻
Definitely! A lot of clients will require full sign off on design before you build, or even you might require it so you know everything's approved before you open up Framer and don't risk wasting any time with feedback. Or if you're working with a team, I still find Figma to be really easy to collaborate and iterate in whatever fidelity you're working in. But for me it's really just more efficient and allows me to explore the details in a more direct way where I can immediately see things working.
@@mattjumper Great points! Thanks for elaborating on this!
It also Depends brother, like i am a web designer i mostly get web design projects so i design in figma, if they say we need this website to be developed then i move my design into framer, Figma is always my first choice because it gives me freedom to make design easily, i can do ideation and handoff easily.
Love this process! Cannot wait for the new framer masterclass!👏
Thank you!
What software is he using to record these videos? It’s clean and even shows what keyboard shortcut he uses. I’m curious to know what software he uses to do that?
Besides the Framer integration I learned a lot. Thanks for sharing!
This is brilliant advice for any web designer, even if you don't use Framer. Exactly the level of detail and care I look for in the designers I work with.
Class video mate. 👏
Thanks Matt!
This was super helpful; thank you!!
Np!
I always wonder how you add animations without worrying about it breaking on specific browsers. It happened to me so many times that it threw me off adding animations at all.
I find the best way to do this is make animations a "nice-to-have", and if the animations don't load but the layouts are fine, it's nothing to worry about. But if the animations end up breaking the layouts & experience, then spend some time trying to figure out how to make them work or just simplify/remove them.
You can’t import colour and text styles automatically from figma?
Super helpful! It's a shame you can't use Adobe Typekit. The whole licensing makes it more expensive
Agree. Hopefully Framer will support Adobe Fonts in the future, as Webflow does.
Omg 😱 love this video thank you sooo much
Hi Max ! how are you ? Why you stop to make video on framer in UA-cam ! U make an amazing work so continu please to help to growth on this tool please !
Thank you, I'll keep posting!
More please😩
This is a typical UX designer work flow… love it!😍
ty!
Do you use a separate guide for leading/line heights in your copy? Or are you just using the Gaps section in your Spacing guide?
Can you make a video where you go in depth about your process of creating a stylesheet like this ? How do you come up with the various color shades ? System or gut feeling ? What about the typography ? Do you use a common scale for this ? Minor third, major second.. ? Would be more than greatly appreciated !
Hi, way ahead of you! 😄 Have a look around our channel and you will find videos covering a lot of your questions. We also have free resources on our website that will help.
What u think about starting to create the website design on Framer? Is Figma still worth?
Hi Matt! Thank you for all the knowledge =) I wanted to ask why you use a max width of 1312 px when you use a desktop size of 1200px in framer ! When the desktop margin is 64 px shouldn't the hero-container be: 1072 px instead of 1312px ? Would be nice to clarify cause I watched your other video " don't make these rookie mistakes" with an example of 1440px desktop design in framer and you made a hero container of : 1344px because of 48 px margin which makes totally sense ! But now I am totally confused :D THANK YOU
Thanks for a quick overview in Framer Matt!
Would you recommend creating a portfolio on Figma and then exporting it to Framer? I am completely new to Framer and im struggling to create the portfolio on Frame alone
Always design in Figma first before developing your website
I'm doing the same! How did the portfolio go? Can I see it?
Hi Matt, great video! I'm an Interaction Design student about to graduate and looking to build my skills for a job search. I'm interested in your Framer Masterclass, but I have a question: does the course cover designing the site in Figma first, or do you dive straight into building it in Framer? I'm looking to improve my Figma skills while also learning Framer, as I want to create a portfolio by the end. Would your Masterclass be a good fit for this, or would I be better off with Flux's "Figma for Web Design" course? If your course includes Figma, it sounds like exactly what I need.
The Framer course doesn't cover Figma. Our Figma course covers the software, and we have several courses covering design. Hope that helps! Feel free to reach out to the team for more information.
It would be amazing to see more in depth, a part from that, really well explained and designed!!
Great video and explanation.
My question is, what are R and M next to the font size at 8:20?
Indicator of font weight, I guess. Regular or Medium.
Can you export from figma to html in all plans?
Great video breakdown of Framer, Matt did a great job walking through his process. I know for myself I have been struggling with Size (Width & Height) variables - I'm looking forward to the Masterclass :)
The art direction of this side is just top notch. I would love to know your content creation techniques. Are you lucky enough to work with photographers or this actually the level of your Midjourney skills? Maybe you could record a lesson about this too? and add it to masterclass?
Thank you! Photography wise the site is pretty much all stock photos from Pexels, and the 3D device was made in Spline. A couple MidJourney photos I think too but nothing major. Noted for future content!
I see it now :) That product shots made me think about Midjourney but Spline make a lot more sense. Thanks for answer and I can't wait the Masterclass
So the point of designing in Figma before Framer is the prototyping capability of Figma, right? Just got into learning Figma and a bit confused after finding out Framer 🤨
It's easier to design in Figma-it's a design program. You can try out lots of different ideas and finesse the layout until you have a final design.
Then develop in Framer.
This will also ensure cleaner builds. Iterating too much in Framer (or any other web development platform or method) will make a mess.
Glad to have you here Roberto! ✌️
@@FluxAcademy Okay that makes sense. Thank you 🙂
im still fairly new to Framer and have some questions i want to ask here..
would it not be more work and repetitive to set up a wireframe and construct all of your design on Figma and then redo the whole page again on Framer?
When you present and deliver your work to the client do you normally give two files? One is Figma that shows all of your "process" like the style guide, and low fidelity work and Framer would be the high fidelity prototype? I have also heard that you can design all of your work on Figma and then directly export all of it to Framer so you don't need to construct the pages again.
Hey, yes it’s more repetitive and more work, but a lot of times worth it. I still find it easier to explore and present static designs in Figma while in the beginning phases, but if you are just as fast in Framer, go ahead!
I wouldn’t show both Figma and Framer at the same time. Figma would be the first round for feedback and approvals on design, then I would build in Framer and get feedback and final approvals on the live site.
You can use Figma to Framer plugin that I mentioned in the video but you will still need to do work in Framer either way (you can copy and paste but it doesn’t end there).
What’s your jump record?
What software are you using to show the key inputs you are clicking?
Amazing!
Where I find the Framer Masterclass?
2.0 is launching this month!
The question I have as new designer and beginning to think of what I want my workflow to be is…why use figma? Why not just use framer?
Start from 10:30
I’m wandering where do you get these consistent style photos?
For consistency I like to find photographers on Unsplash or Pexels with a bunch of solid photos and just stick with them for the project I'm working on.
@@mattjumper I thought it's paid stock photos, thanks Matt for the answer
I spent some time in Framer today. I didn't see anything regarding rem font sizes/padding etc. Am I missing something? Is there a way to enable?
Framer doesn't support REM or EM font sizes. All the editable font style properties will show up when you are using/editing a text style (Assets / Styles / + / New text style).
might as well just build everything in framer. 😜
Are you Canadian? You gave it away when you said 'I am building it "out" ' haha
awesome thank u
Can I use framer to make a website for a company and sell it to them so that it's up and running? If so, who hosts the site ? If not, if I buy a custom domain, can I link the framer website to it and host it myself or is it up to the customer to host and maintain the site? Sorry I am a beginner and don't know much about these things and you seem to be a professional in these matters ! Thank you
what breakpoint plugin is used in Figma?
No plugins for that, I just make new artboards at different breakpoint sizes
Can you kindly share with me this document?
It will be available in the upcoming Framer Masterclass :)
How soon? And what's the price? ;)
This month!
Oh, that's awesome to hear about the New Framer Master Class! I was thinking of joining the current one on Flux, but for some reason, I just can't stand the guy's (dog groaning) voice 😅.
hei guys can someone give me a hand with building the stuff in the beginning? like distances and spacings, how can you know you will need those and not others, for example at the eyebrow element, I would say extra small-16px -is too big. Appreciate all!! thanks! @fluxacademy