Once you master Framer, your web dev problems are over. You can pretty much cover all your client needs. Finally, you can concentrate purely on design which is the future of content and consumption.
@@NewShortsEveryday-nt6of You don't, which is something I just searched for and came to that conclusion. Framer is awesome, and makes life easy for designers, but without the ability to export code (their explanation was there is a lot that goes on between your Framer site and a live site, like image compression, link optimization, etc.) you are locked into their system. After enough feedback, hopefully down the line they change this aspect, but until then, the struggles of Webflow aren't THAT bad. The extra time spent will be worth the exported code and not needing to maintain a subscription for your site and hosting.
I was breaking my head to understand why my content was getting cropped when I tried to resize. Stack was getting applied when I simply selected the layers, this was so frustrating. Finally this is the video that helped me understand the small hack ~ click on the single text layer and add fill width
It would be very helpful if you show the layers panel as you are going through and making updates. Without seeing it, I have to guess what is being selected
Ima keep it a buck for those who are watching. Just build the website starting in Framer first. You will save yourself so many headaches. The real challenge starts when you try and make different breakpoints (for difference-size screens). Manually doing each absolutely sucks and framer gets buggy when u try and make different breakpoints and manually do it.
• Do we need to just paste/import the ungrouped or un-Framed layers into Framer? Or is it better, to put each sections and layers inside a Frame, adjust Constraints and put some Figma Auto-layout on each layers, just like the Box Model layout principles in the Web? And then import it to Framer? Does Framer still preserves importing Responsive Constraints and Auto Layout from Figma to Framer? • Is it possible to create every Breakpoints in Figma, and just import each Layers section to Framer? Does Framer recognizes similar layers on each Breakpoint Artboard and get them connected? Or Figma to Framer import workflow only work in the Main breakpoint? • One last thing, is it important to Component everything in Figma first, before importing to Framer? Does Framer also imports Figma Components, into Framer Components?
Regarding your 2nd question: Yeah! When you add Auto layout to a frame in Figma and you import it to Framer, Framer will recognize it as a "stack" and preserve that
SO many questions. I did this and it only copied some constraints and Auto Layouts of elements. So do you 1st have to make the Figma design responsive, or do you do it in Framer? Also if you do this then the design is copied to all Framer frames/components. To Desktop, to mobile and to phone which is annoying.
Please help me with this ---> After copy a section from figma into framer, when I want to move the position of the particular card, it automatically goes into center again and again. Why is it so?
The plugin is broken, it will let me copy my home page over, then if I try to copy another page from figma to another page in framer it doesn't paste in, instead in pastes the first page again
this is such a bad tutorial... how about you show how to actualy import from figma to framer instead of spending 1 minute editing the text... amateur hour over here
For any watching right now, the Framer Copy paste has been renamed into "Figma to HTML with Framer"
👍Thanks!
Thanks man
Thanks bud
@@joseberbesi6050 thank u!
Thank you!
Once you master Framer, your web dev problems are over. You can pretty much cover all your client needs. Finally, you can concentrate purely on design which is the future of content and consumption.
can you please Help me. I have my design ready on figm but i need html, css and javascript code for it. can this be done on farmer?
how do i get code after everything said in the video?
@@NewShortsEveryday-nt6of You don't, which is something I just searched for and came to that conclusion.
Framer is awesome, and makes life easy for designers, but without the ability to export code (their explanation was there is a lot that goes on between your Framer site and a live site, like image compression, link optimization, etc.) you are locked into their system.
After enough feedback, hopefully down the line they change this aspect, but until then, the struggles of Webflow aren't THAT bad. The extra time spent will be worth the exported code and not needing to maintain a subscription for your site and hosting.
@@NewShortsEveryday-nt6ofhtml and css but no javascript, it only generates static website
@@brightlyvirya7500html and css is more than enough
I was breaking my head to understand why my content was getting cropped when I tried to resize. Stack was getting applied when I simply selected the layers, this was so frustrating. Finally this is the video that helped me understand the small hack ~ click on the single text layer and add fill width
My days of trying to figure out how Autolayout works in Figma finally paid off
same
can you say "my name is giovani giorgio, but my friends call me... giorgio!"
Great, I've been waiting for this video for a long time.
You guys need more instructional videos.
Happy to hear! We just published two more. Be sure to check out our Tutorials playlist!
I have been having a very good time creating responsive web with Framer. Love it.
Would of been nice to see the layers panel open when doing this. good video regardless. thanks.
It would be very helpful if you show the layers panel as you are going through and making updates. Without seeing it, I have to guess what is being selected
rightttt. c'mon
Came here to say this. I was massively irritated the entire time about that even though the instructions were great lol @@Limonshirtguy
I was going to write the same thing. It's such a shame because it's interesting.
Where's the content of going from Framer to HTML?
Nepal
Nepalies farmer from Nepal!!!
Ima keep it a buck for those who are watching. Just build the website starting in Framer first. You will save yourself so many headaches. The real challenge starts when you try and make different breakpoints (for difference-size screens). Manually doing each absolutely sucks and framer gets buggy when u try and make different breakpoints and manually do it.
It would be useful if you could widen your screen so that the items you select are visible. It’s difficult to see 😢the way you size your window.
• Do we need to just paste/import the ungrouped or un-Framed layers into Framer?
Or is it better, to put each sections and layers inside a Frame, adjust Constraints and put some Figma Auto-layout on each layers, just like the Box Model layout principles in the Web? And then import it to Framer? Does Framer still preserves importing Responsive Constraints and Auto Layout from Figma to Framer?
• Is it possible to create every Breakpoints in Figma, and just import each Layers section to Framer? Does Framer recognizes similar layers on each Breakpoint Artboard and get them connected? Or Figma to Framer import workflow only work in the Main breakpoint?
• One last thing, is it important to Component everything in Figma first, before importing to Framer? Does Framer also imports Figma Components, into Framer Components?
Regarding your 2nd question: Yeah! When you add Auto layout to a frame in Figma and you import it to Framer, Framer will recognize it as a "stack" and preserve that
But it keeps the it into the center, Which does not let's to position the element
@@sdg-digital
Would be amazing to see the html itself. Maybe to host on my own server.
Figma doesn't seem to have "Framer Copy Paste" just "Figma to Framer HTML" - is that the same?
Great! Will test it. The speaker’s accent remind me so to a Greek!!!
Can we export a framer site to normal html/css files ?
inspect element and do some copy paste
@@nested9301 haha some little hack😂
Thank you for the great tutorial!
once I design the page in figma or framer how can I transfer the design to Wordpress?
Thoughts on using framer as a NextJS replacement? Is this production ready?
SO many questions. I did this and it only copied some constraints and Auto Layouts of elements. So do you 1st have to make the Figma design responsive, or do you do it in Framer? Also if you do this then the design is copied to all Framer frames/components. To Desktop, to mobile and to phone which is annoying.
Doesn't Figma to Framer make sites like SquareSpace and WIX obsolete? Why would I pay for that service if I can do this now?
I think wix and squarespace are still easier to use for POS and e-commerce
@@missmaharani95 Easier, yes. And very limited from a design perspective compared to Framer.
Please help me with this ---> After copy a section from figma into framer, when I want to move the position of the particular card, it automatically goes into center again and again. Why is it so?
awesome tutorial
Unerringly explained just as it written in the title. Great job
This just brings in an image for me. What demo magic em I missing?
In Figma it says it copied, but it won't paste in Framer... I tried a million times and it just won't paste.
How do I get HTML CSS and Javascript codes after all this??
press cntrl + U. i think and just copy pase
When i publish the site, everything looks different....
thank you so much
I tried to copy and paste my design from Figma but nothing shows up. Does Framer not work well in Firefox?
Doesn't work in Chromium either. SMH tired of these no-code tools and their BS. Oh well I just figure it out.
Everything I paste ends up stacked instead of retaining my Figma layout, and I can't freely move objects around. What's going on?
Is your page layout set to a stack?
I couldn't find the Framer copy paste plugin
search for "Figma to HTML with Framer"
Does it work on figma web
How do you set menus for the mobile version? You haven't explained that.
ruclips.net/video/IIFzp2viyJ0/видео.html
To anyone who can help. Mine keeps pasting the hero section only - even after copy individual sections. Kindly advice...
Спасибо
Tu eres más español que los quicos del mercadona
where is the part to export to html and css
So, framer can't export the design to html or css? Or there's a way to do it?
The plugin is broken, it will let me copy my home page over, then if I try to copy another page from figma to another page in framer
it doesn't paste in, instead in pastes the first page again
Well actually, it doesnt work for the whole page, only the sections like you mentioned
What is this seconds! This is going to take hours!
I hate when somebody makes a tutorial and not show the layers panels when selecting and moving stuff , come on guys ! some common sense
so sad passing from a app to another... so sad
короче официальный костыль
360P ???
It takes a bit for RUclips to generate higher resolutions. 1080p should be there now, and 4K will be available next.
@@Framer Damn "RUclips"
You do not know what is HTML
Rubbish Course
this is such a bad tutorial... how about you show how to actualy import from figma to framer instead of spending 1 minute editing the text... amateur hour over here
Clickbait header. From Framer you can't export any HTML or React.
You can export everything by selecting each Layers imported to Framer, to either HTML/CSS code or React JSX.
You can also import framer react components into external react projects
Also react renders into html and css which is what they are referring to
@@mancerrss like how?
That is crazy stuff