Web Designers Are Leaving Figma... Here's Why
Вставка
- Опубліковано 27 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this video, you’ll discover how top Figma designers are transforming static PNGs into live, responsive websites using Framer. I'll guide you through creating a hero section in both Figma and Framer, adding interactivity, and converting old Figma projects to Framer sites. Plus, explore Framer University for hundreds of free components and tutorials to boost your web design skills.
Framer project:
framer.university/resources/r...
Figma file:
link.framer.university/rr-figma
0:00 - Introduction
1:20 - The roadmap
1:56 - Designing a hero section
21:17 - Setting up responsiveness
22:59 - Comparing Figma's and Framer's output
25:08 - Creating a button component
28:28 - Adding appear animations
31:38 - More animations
31:58 - Saving previous Figma files
35:26 - Ultimate resource for Framer power-ups
36:26 - Quick recap
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
are you also leaving Figma? lemme know 🫶
hey nandi, I have a couple suggestions
1. can you tell the framer devs to make a squircle corner radius option?
2. the shape rounding doesn't apply when you have intersecting rectangle shapes that are united, in figma it works yet in framer it only groups them basically and doesn't consider it a new shape.
3. also the ability to turn text into graphic outlined shape inside framer would be handy
I feel like this would be a step in the right direction for luring designers from figma because currently the experience in the design aspect is not up to par compared to figma which I understand since figma is a design tool after all
@@feelcollins4358
these suggestions make total sense! :)
1. there is no native option for smooth corners (bc it is not supported by CSS) but you can try using the squircle component from: framer.supply/
2. yes unfortunately drawing SVGs in Framer isn't the best experience. what I usually do is I just create them in Framer and them copy them as SVGs from Figma to Framer.
3. yes, this is also a good idea! you can again turn it into SVG in Figma and copy and paste it over to Framer if this is needed.
by the way you can also suggest new features here: www.framer.community/c/requests/
lemme know if you have any questions :)
@@framer.university ah that's a shame cuz it could get messy creating a responsive button with custom hover animations for example with the squircle component
yeah seems like that's the way to go when it comes to SVGs which is why we can't leave figma just yet
May I ask where did the photo in chainzoku (if I'm not mistaken) was from? I use istock, pin, and Leonardo ai but they're always pixelated when I scale
Hell No! :)
Trust me we know the difference between designing a website and developing a website - I use framer and I still 100% of the time design the website and concepts on Figma first, designing in figma personally gives me more creative room since I'm not locked into the behaviour of the builder, even when using autolayout, being able to sketch freely before applying the autolayout\flexbox is a must for me, and I know I can technically just turn on Absolute positioning for every element on my screen in framer but yeah - Framer is very similar to Figma in terms of flow and UI which is a blessing, but they have different purposes and different functionalities.
Yes, I heard that some people still prefer starting in Figma. I think it comes down to what you're used to. I've been using Framer for the past 20+ months and start every project in Framer from the beginning without feeling restricted.
Ultimately, you should do what works for you. I just want to uncover the amazing possibilities of our age for others here.
Yeah , in the end , figma is more like a drawing canvas than a HTML page
What framer does is hiding front-end development concepts
A frame is a div with bg color , a stack is just a flexbox , framer components are just react.js components , the builder does nothing new , this magic is just normal front-end , it's literally just a GUI for designers because they don't know HTML CSS JS or get confused from declaring styles and logic
It's still a website builder and not a design tool like figma
Also framer is very expensive the site hosting plans are just bullshit
Like wtf is 60€ per yrar for 1GB bandwidth and 1000 visitors?, wtf is 180€ per year for 10GB bandwidth and 10,000 visitors? And just one collection list ?
I can do site hosting with a cms for free on cloudflare pages
You can't export the code , you will have to pay for framer
@@Ari-lv8nc Well you can rip your website with code with tools and host it on similar places for developers
@@vladarodic9683 can you elaborate please i didn't understand
There is something fundamentally unsound about the title of this video. I don't think it is a strategically good idea to give the impression that Framer can replace Figma. It would have been better if your title was backed by solid statistical data. I use both tools effectively. Here's the thing: there is a process that many designers follow when it comes to visually expressing their concepts before transitioning them to Framer or any other tool. We must always stress the importance of creativity as opposed to speed, especially if one aims to produce a unique experience. Figma offers designers a vastly more advanced way of approaching thought-to-line ratios that accommodates different designers' speeds of work. Finally, what you are doing is great, and i do respect the work you put into this, but let's not frame the content of this video in this way. From a marketing perspective, i would say bring Figma community to your side, even if you feel strongly about Framer. Bottomline, creativity leads function; with Figma designers can push their creative inspirations to their limits and beyond, which ultimately forces other tools to tailor advanced functionalities to push the boundaries of their tools.
As a designer, I design, dashboards, mobile apps, app builders, presentations (for my designs) ...etc.
All of this happens in Figma.
watch the vid again. i was talking about web design.
did framer added new templates when you use framer AI or is it the same as last year?
I was wondering if it’s possible to make a slideshow on framer that doesn’t show any arrows but goes to the next/previous picture on clicking its right/left side. Just as in the homepage gallery on this website:
Thanx in advance!
It should be possible by adding trigger frames to the left and right side of the component. I can’t see the example you sent tho.
Another great video Nandi! Could you possibly make a video about audio and music related components? Are those possible in Framer ?
Ofc ✌️ lemme know some examples u have in mind :)
Hey, Nandi I have been trying to master framer. Can you make a proper video on how to make an interactive complex website with 2-3 pages in framer from scratch.
comprehensive courses on these topics coming soon :) stay tuned!
Basically doing the same now! Started with Figma but find myself only using it for other kinds of designs like logos etc. For a website I go straight into Framer.
By the way, I see you always make the background image a separate frame in an absolute position, rather than giving the stack an image fill. What's your rationale behind it? Would that be preferable?
Love to hear it! 🙌
I use separate image as background because it allows for more flexibility down the line.
For example if I wanna create a hover state later where the background image scales up separately, I can do that.
In most cases, setting the BG image as fill for the container works, but I just wanna make sure I don’t have to rebuild the structure later on.
It’s just what I got used to at this point.
I hope it makes sense :)
Thank You for the Tutorial!
I wanted to take a moment to express my sincere gratitude for the fantastic tutorial you provided. Your clear explanations, step-by-step guidance, and insightful tips have been incredibly helpful. 🙏
Thank you so much 💙 i'm glad u liked this
For me I am still struggling to design in Framer but Figma kinda help me understand what I want the final product to look like before importing the pngs into Framer. However I can see a future where people leave Figma but only if Framer becomes easier to design on.
I think it depends on what you're used to. If you force yourself to work only in Framer for a couple of weeks, you'll probably get used to it. I jump straight into Framer like many other Framer builders, so it is definitely a doable path.
How do I setup database with framer like for an e-commerce website ?
using the cms tool would help. Is a really powerful tool
CMS, or if you need advanced Shopify features, i'd use framercommerce.com
@@framer.universityI want to know without implementing CMS Or Shopify does i implement my custom coding knowledge here ?
I get your point in the first 1 minute of the video. But seems like some people watch the whole video and didn't understand at all.
Yeah I was surprised lol
I’m glad you got the point tho 🫶
i love every thing about the video u are the one who but me in framer i wish if u can do framer , seo and google search console
You can connect the site to Google Search Console. And SEO performance on Framer sites is amazing. I just reached 10k monthly organic clicks with framer.university according to search console.
#Framer. As a newbie web designer, just got my first customer and I realised i was doing double the work by designing in Figma and building in framer. I didn’t deliver the best but i learnt a lot.
Now doubling down on Framer for design and development. Thanks for the proper breakdown man plus, your edits are great🎉
Thanks for the comment, mate! This support means a lot :)
It's crazy how much time you can save by jumping straight into Framer. Just think about it... you can literally do 2x the work you'd normally do and potentially earn 2x what you'd normally earn.
Great tutorial, thank you Nandi!
Thank u 🙏
Can you please make a tutorial how to make a custom design payment gateway in framer?
i am actually leaving figma as well because compared to other options like framer its very limited for example scroll animations and interactions are VERY limited in figma but in framer its much much easier to create such complex animations
Thank God someone said it.
I am on day 4 of learning framer and Framer university has really helped me out.
I feel better now my designs are published and actually look the way I designed it.
The magic of Framer, right? ✨
I’m glad u find Framer Uni helpful :) lemme know if u need help with anything. ✌️
Does it auto publish in webp?
Yes, images get auto converted into .webp or .avif with Framer.
It really depends on your use case whether you're going to ditch Figma and jump straight into Framer. I personally did it, so I can relate to your statement Nandi. The main reason is that I've built my quick start design system in Framer, that I use to kick off every project. And since my niche doesn't require overly complex websites, I can easily modify the components to fit clients' criteria. It just does the trick. For most other use cases, like app or product design, or where building in Framer is not an option, Figma is the way to go.
Uuuuuh… ok… this whole comparison is basically shooting your credibility straight in the face
Why do u think this?
@@framer.university mainly because of the clickbait.
But also, because you are totally missing out on creating web designs out of a proper brand design / design system.
This video is just showing, that you look at web design as an isolated task and that you are not in search of a tool, that will allow a holistic approach of designing „on brand“.
Usually something, that separates „the kids from the pros“.
Don’t get me wrong. I like your channel, I like your videos and I like framer for what it is. That is the reason why I came here in the first place.
But the intention/message of the whole video just shows me, or gives me the idea at least, that you have not much experience in creating for the web as part of a proper brand.
Those are my reasons for my initial statement.
If I had a wish, I would suggest that you better stick with just explaining the community how an awesome tool like framer works, in your, until this point, awesome way of doing your videos.
#framer! Long time Figma user here, and I just started using Framer. It's blowing my mind. Thanks for the videos!
thanks for the support mate! :) what is your experience with Framer so far? i hope this video helped 🫡
In most real life cases this will be time consuming however you can always make a simple prototype in figma that you can share with a client within less than a week...
Why not make a real site then?
you can export figma to code tho
Still not a website tho
As someone who was a developer first, and got into design after, I find this absolutely laughable. Figma is a design tool for designers. People are creating things beyond just web design. Framer is a closed off web builder tool where exporting anything is virtually impossible. The fact that you say figma is for making png site is the most clickbait thing I’ve ever seen you say, especially when Figma to framer is the best thing framer has going for it 💀
Framer is so limited in its capabilities, and certainly isn’t scalable for larger projects. If anything people are leaving framer because they’re not prioritizing basic functionality over things like 3D rotation. The growing frustration in the community is very apparent if you visit the framer subreddit or Twitter. You guys haven’t even figured out proper forms and have a garbage cms that can’t be exported (even between projects).
Yes, I also use Figma for other marketing-related graphics. I was talking about web design here.
Keep in mind that Framer is pretty much a new tool, and they're working on most of the things you mentioned. They'll keep improving and adding decent features, and it will slowly take over and become the #1 website builder for designers.
Bro no need to take it personally...I feel you are missing the point in his video. Personally I use figma to get the concept I'm trying to build, then I export it to framer and perfect it. Both tools are amazing but I feel he is saying that for websites it's not logical to spend much time perfecting a website on figma when you will still build it all over again on framer. That's basically the message
What? He literally said "Web Designers" not Product Designers or other type of Designers. Understanding is essential
I can smell developer's ego here
Are you scared that designers can now publish sites on their own?
We need a CMS tutorial from you
good idea! what do you wanna learn specifically?
@@framer.university If we could learn more about the filters in the articles as does BBC, CNN, an example of how you could, because I've seen other videos on UA-cam, but it is very basic what they teach you. I know you can not get a WordPress - Blog style site, but there is a way to solve the problem.
#framer Hey Nandi! Super content!!! Eagerly waiting for the Official Framer free course, I Already subscribed to the waitlist list.
heey! thanks for the comment
Here's the catch though, websites is like only 20% of the work designers do. There's web applications, marketplaces, E-commerce stores, IOS and Android applications. Even a 'web designer' is not just designing websites, but also SaaS web apps. For all of these use cases, you need code export for devs which Framer has completely removed. So yes, Framer is a Figma alternative, but for a very very limited use case. How I would love for Framer to expand their niche in order to compete directly with what Figma allows you as a designer to accomplish.
I only use Framer to create simple websites, but Figma can't be left behind when designing complex websites. Even though we're talking about web design, which is so vast ranging from simple to complex. In my opinion, Framer still can't handle complex websites as it's just for the front end. However, with Figma, we can create a complex design before handing it off to developers. Don't get me wrong, I love Framer, but when designing a complex website, we need to research, sketch, wireframe, and test before building it in a real project. So, yes, Figma is one of my best tools for web design
You’re totally right. I respect that!
Super super complex sites indeed have a hard time with Framer, but I can confidently say that you can do more with Framer than just simple front end.
With different easy to use integrations like FramerAuth or FramerCommerce, you can create gated websites, or complex shops.
But yes, in some cases, you might wanna work with Figma and handoff to devs. I also worked like that when designing a robust investment platform in the past.
That's good bro, some people are triggered 😅 but as a designer i really respect your perspective, and tbh your content is sooo good, keep it up!
My words, thank you! I never understand the hype about these ux tools like Sketch, Adobe XD and Figma. Especially Adobe: First killed "Fireworks" the first UX program in history and after that they tried the same thing again with Adobe XD and failed again … But we have to make a distinction between web design and product design. I think for product design like digital applications and user interfaces, the programs are very good for building modular design blocks and systems. But for highly interactive and responsive pages like in web design, Figma is just too static and inflexible. It costs an incredible amount of energy and time to develop a website that will never look as imagined - very frustrating!
Figma can still be used for a bunch of other things. For example, I make all marketing assets in Figma. I was talking about web design specifically here. For web designers, it makes a ton of sense to jump straight into Framer to speed up their workflow. :)
I really like framer because there are similarities with Figma and there are some page layout that you can actually bypass Figma and do it directly in Framer. I like experimenting Framer bec it's very designer friendly and doing the interaction with ease, which for pitches can impress clients. However Framer doesn't allow you to export the code and host the website into your own server, which a lot of our big clients are sensitive about this for security reasons. I hope Framer will look into exporting code like webflow.
Thanks for shaing this comparison to the design and development process in both Figma and Framer. Throughout my career, I've always struggled with the idea of doing the design work twice, once in a design tool like Figma and then again in a development app like Framer. I find it much easier and more efficient to design and develop in Framer from beginning to the project launch. #framer
Yeah! Framer is basically a dream for web designers.
Thanks for watching the full video and for the comment! Your support means a lot.
I don’t use Figma anymore for web design. Straight to Framer. You’re talking about me. Completely jumped off Wordpress after 5 years of experience.
Good to hear it. Framer is just so much more fun also to build with ✌️
Framer is a great direction but I feel that it still has some way to go before we can truly leave Figma. Figma is very designers oriented in both interface and abilities. Iv'e been slaving my way in framer just to create my portfolio. The learning curve is quite steep.
#framer
Love these awesome videos bro 👌🙌🏼
Love you, man! Thanks for the support
I love your content!!
Thank u so much :) i do my best to post some great stuff ✌️
I honestly don’t see the point of designing twice 🤷🏽, I’ve tried to use Figma and I’m like, I might as well just be building the site. I use Wix Studio, and Framer looks even better to design in.
yeah, I told ya it's kinda like a no-brainer to jump straight into Framer instead of designing twice.
#framer.. Nandi you are love...😇😇
🫶🫶 Thank you so much!!
TBH Figma is well financed and believes it will achieve and maintain "Beast" status as it integrates AI features to efficiently generate interactive components and especially level up delivering clean exportable code. Also, Figma will be more positioned to purchase Framer than vice versa if they deem it would be a smart move to do so.
I think it's better if you took this video down, you are comparing apples to oranges, and you already have designers and non-designers telling you the same.
i'm gonna leave the video up. i hope u don't mind.
@@framer.university Ofc I don't mind, that was an advice from a mere foreigner.
@@framer.universityI’m so glad you don’t listen to trolls. We wouldn’t have framer university if you did. Keep it up Nandi👍🏾
Great content #framer
🫶🫶
You cannot compare framer with figma no doubt framer is doing grt but there's alot of other features and design process designers use to create a website or an app
Agreed. However I still think that if you narrow it down to website design, you can compare the two and see how familiar they are in terms of process and different in output.
Ofcourse that said not glorifying that figma is the ultimate tool and that must be the only one used for designing. Ofcourse based on your flow you might do this and that, use framer for both designing and development, etc etc.
24:50 This one is gold 😂
I feel like framer is good for simple websites. Sure, it's better if you start with framer if you are gonna build a simple website with few pages anyway. But if you are building websites with complex logic, I am pretty sure you need a good designing platform, which is Figma. So yeah, web designers aren't leaving figma and that's why.
Yes! If it makes sense to go with Figma first, then go for it! I also did it in the past when building a robust investment platform.
Thanks for the new video! No way this tool has competitor when it comes to website design. Im leaving Figma. Slowly transferring to Framer community.
Love it! Lemme know if I can help with anything. :)
Don't worry, figma will launch page builder feature oneday.
Looking forward to trying that 🫡
U r amezing❤❤❤
thank you so much for the support
I thought I was the only one that ditched Figma. Phew! Now I come out of the closet. Yoooo! Where my Framer peoples at 🎉?
#framer
greaaat video
thanks for watching the full vid, mate :)) and thanks for the comment as well
Third Comment❤, love your videos.
Thank you so much for the comment 🫶 The algorithm and I love you for this :)
And before you try to justify your defence let me tell you that in one of the comments you stated as followed even though the person you replied to was saying the exact same things -
".....They'll keep improving and adding decent features, and it will slowly take over and become the #1 website builder for designers."
Viola so my sweet man thats what we all are trying to say the same thing here, Framer is a website builder, its not a UI Design tool. Figma's and Framer's core aspects are different.
As you mentioned that Framer will provide better features overtime and keep getting better, but those features will be inclined towards the front-end development requirement for website and those who work as website developers.
Please try to be very wise about these terms, cause this conufses like alot of epople and many a times the client. Who will then have completely wrong idea about what development and design is, which again poses alot of problems to the people who are hired by them, may it be design or developers.
Almost every danish programming job i have applied to... We dont use framer, too oddly learning curve and too much to joggle with. So stop wasting time on framer. Learn to code with framer motion and threejs instead
thanks for this amazing tip!
In terms of design capabilities, Figma is still better. Framer lacks some features that Figma has.
Agreed! That’s why for example when I need a logo, I just copy the SVG over to Framer from Figma.
Nandi Framer Prodigy
ahh thanks matee 🫶🫶
your video is not for beginners please make it beginner friendly and don't use them in split screen ,use them separately & that's all , else everything is fine .👍
Noted! Thanks for the feedback. I tried explaining everything clearly. What was confusing?
Second Comment ❤
Letsgoo 🙏🙏
First comment❤
🫶 appreciate ya!!
This is completely WRONG approach!!!.
In a perfect universe, where the client is always happy and doesn't want unholy amount of iterations and edits .... yes you can go with this approach. But in the current reality, this is not sustainable!
I can agree that Framer has a lot of the design functionality of Figma, but it's still a lot slower than figma, when it comes to applying changes or just drawing quick mockups. And very often the clients wants to "let me just see how it will look if...". Imagine this on a daily basis, you will go nuts very fast. Sorry mate, I love your videos but this is complete bulshit.
i respect your opinion!
i've completed quite a few client sites in framer, and the process was smooth, even if iterations were needed. for example, you can just duplicate pages if you want to explore new directions. it all comes down to having a solid process.
from my experience, clients loved getting a functional, working website within the first week that they could play around with to test and see what changes are needed.
so for me, it's totally worth it to start the process in framer, especially since you do the same things as in figma-draw frames, add text layers, and set up auto layout (or stacks).
#framer
💙💙
Are you serious?!
I know... Framer feels like a dream.
I like what you have said but why you need framer is BS. Design your landing pages in figma and convert them into WordPress.
Well, I'm pretty sure that creating websites in Framer is a far better (actually enjoyable) experience compared to what you just said here.
But you do what works for you
Wordpress completely flops in terms of performance and pricing. There is a ridiculous amount of bloat. Absolutely no reason to use it at this point in time.
@@TCakes Not sure when you used WP last time?
No.
No Framer it's not better than Figma because you can't export Html and CSS. They want to lock you there! If I am doing wrong just tell me but I haven't seen something else. Figma lets you learn for free their tools and play also with plugins and also export html, css, react and more!
I was focusing on the web design/development process in this video.
For me, Framer is like a dream. I'm using it to speed up my workflow and make more money.
I know not everyone feels the same, and some might have different preferences, which I totally respect 🫡.
Wrong and offensive approach, you lost me in first two minutes.
Which sentence was the most offensive?
This video's title has to be probably one of the most dumb I have seen in recent times. Framer and Figma are used for compeltely different purposes. Framer is a no code website builder and Figma is a design tool. Like do you understand that? Pretty lame move to address in such a way that Framer might replace Figma for web designing. I am multidisciplinary designer and I can tell you with 100% assurity that nobody is leaving Figma, cause design and development are two different things.
#framer
You’re amazing! Thanks for the support 🫶
#framer
🫶