Introducing the Figma to Webflow App: seamlessly sync design systems
Vložit
- čas přidán 2. 08. 2024
- The Figma to Webflow App in Webflow adds functionality to the Figma to Webflow plugin in Figma. With Design System Sync, not only can you copy and paste individual Figma elements into your site but you can also sync your design system from Figma to Webflow.
This is a game changer for designers who maintain their design systems in Figma because you can import components and variables into Webflow. And then any changes that are made in Figma can be synced to Webflow, then reviewed and applied directly to the site.
In this lesson you’ll learn how to set up the Figma to Webflow App so it syncs to the plugin. Then you’ll learn how to import components and variables from Figma to Webflow so they can be added to a site. With those elements now in the site, we’ll teach you how to sync updates to the design system in Figma so those changes are applied in Webflow, including what happens when a change to a component causes a conflict.
00:00 - Introduction
01:32 - Set up App
03:20 - Create components and variables
07:21 - Sync to Webflow
08:50 - Sync changes
11:26 - Solving conflicts
Read all about it → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
/ webflow
🤯 So awesome to see Webflow and Figma connecting in this way!
Have you tried working with him?
This is amazing, i bet most of designers were waiting for this!
Thank you Sarah and Emily! Very informative and engaging vdo!
This is great, especially for simple elements that show up in multiple websites. This way, you can focus on making good designs, focussing your creativity in unique sections.
Amazing! Thank You Sarah and Emily🙏
I cant wait for an updated version of Webflow University course. Hope to see you both there too.
Thank you Sarah and Emily, great video!!
Wait, where’s McGuire? Did he leave?
@@paul.ignacio he runs his own channel now, search his full name.
@@paul.ignacio McGuire left a while ago. He's got his own channel on YT now. Simply search for him.
This massive update will save tons of time!
Wow this is massive, thanks for the update! The information was clear and the video was pretty funny too haha
Good timing for me, as I have made it a priority to up my Figma game! Now even more!
This is a game changer! Love it
OH MY GOOOOOOD THANK YOU SO SO MUCH DOING THIS
I love the "more focus on Figma" way they go
webflow is on another level
Great stuff!
This is just mind blowing
Great update
I love it, and this is great progress; now, if we can standardize the naming of classes BY webflow, that would be great, at least for a starting point.
Awesome ❤🔥
I would like to suggest for components, where we could put html inside or even other components.
Fantastic - wonder how many are using this regularly?
Game changer
Really need to think about how this all ties in with using Relume tho
I was waiting for this since last summer when I made the first Figma to Webflow conversion. How about components variants? How do they affect the work in Webflow? Because we have a ton of variants in our components.
finally!
cool)
How does it handle variants / properties?
Does anyone know of a way to shrink or handle the huge pop-up box for the plugin? It takes up so much room and can't be shrunk or minimized to my knowledge. It's really invasive.
Great video btw.
Love all this but we still can not arrange CMS items 😔
This is some great insight but I'm having issues with a few simple tasks. I created a Navbar in Figma. Then sync it to Webflow with all components and variables. Now that I am in Webflow, I drop it in a container but the size of the navbar is a different size. I'm not sure why??
What happens when you sync a Figma stylesheet with an existing website?
Can this plugin work well with client-first or other frameworks?
if the comonent or variable have the same name then it syncs i think
How is this gonna work with responsive? e.g. Main nav on mobile?
How to copy variants and states from figma to webflow using design sync
I miss McGuire Brannon so muchhh!!
The color contrast between the white texte and the green background on the button is not 4.5 😬
I know this isn't about Figma but i am stuck with webflow if someone can help please.
I am following the 21 day portfolio challenge (april 2024) and I am unable to work out how to unbind/unlink the cmcs content as shown in the video as the control pannel has changed. When I do disconnect I get the pre installed headings/paragraphs show up.
Can anyone help please.
So is framer cooked now ?
Stop it. STOP IT. You guys release the best things so often that I feel like I'm having one continuous heart attack.
Awesome feature, as a developer, I definitely will use it, and sure designers will love it too
Oh. My. God.
I need to know how to contact @Webflow support. I keep going to the support client's portal and it keeps saying there is an error and it dos not let me submit my questions! Please I need to speak with some at WebFlow. How to do it??? This is ridiculous.
Hi there! I'm sorry you're having issues contacting our support. You can submit a ticket to our support team here: support.webflow.com/ or you can navigate to the forum to see if your issue already has an answer here: discourse.webflow.com
Figma should defenitely transfer their website to Webflow, It'll be awesome🔥
huh.....
I want do freelancing With Wordpress & Webflow ❤
how is wordpress doing? I heard there is a lot of new cool things there too!
For all people say Thank you! Did you even try the app? Your Chrome will stop working one you do it? All Modes (you have light or dark only) will not sync. I tried one with 147 variables. No good result
Hello ms Profesor, can you please show next video how to make Figma to Wordpress plis. Inshallah we can see it in next tutorial.
Bro, its the official channel of Webflow, Wordpress is their biggest competitor, you aint getting a video
@@stefeux Sank You my broter. Where is Wordpress official channel? Plis put me on right path so I can finally cross the desert. Shukran habibi.
I'm in love with Sara
4:24 How about beige?
Proceed to choose the green color 💀
Haha - sometimes you gotta do what's best for the design 😅
Sincerely, webflow university need to be a major update, because all video are with an old version and projects are so vintage. When there is a big update with new project please?
Stay tuned! The Webflow University team is hard at work updating all of the videos to keep things up to date :)
@@Webflow i always keep faith in your teamate.
so that doesn't even work for Mac with Apple Silicon? It's asking me to install Rosetta... pretty lame in 2024
am i dreaminggg?
im here for the jokes
anyone else having sync issues?
1st
I'm so deeply disappointed that this plugin does not do that they show here... it's a broken plugin in a lot of places adding data where it's not needed, and not bringing in classes properly. I've put a topic on the support site about this... class information doesn't come through... flex information doesn't come through (like it should)... For now, just build it in Webflow and save the headache. Bummer.... false advertising in a lot of ways. And the way they make this video so "cute" ...makes it even more frustrating when the plugin does not do what they say it should.
Doesn't work
Figma balls
Framer who?
Why even have Figma? Create a WebFlow mode targeting designers. Why do the job twice?
Webflow is a development tool, while Figma is a design tool - simple as that. If you compare Webflow to Framer, then you make a crucial mistake, because Framer is much more simplified in terms of development. Not saying it’s bad, but it’s another way of building stuff. The thing is, Webflow teaches you HTML and CSS without actually doing it, because you are writing code visually. However, this is not the case for Framer.
So maybe Webflow will come up with a design tool in Webflow at some point, but I highly doubt it. No need too.
Never design your layout in a website development tool. Doing this can come back to haunt you, if you have to correct things. Even before Figma became the standards for designing first. It's always suggested to do rough drafts and layouts first. If be pencil, pen, Sketch. Adobe XD etc. It's both faster to do the design and correct, if needed. Work smart. Not hard.
Honestly, it works very poorly and only works with theme layouts that you originally created in components, if you got that layout from a client, you can't make it that way.
You keep adding more and more new functions but totally ignore what you are lacking. I work as a webdesigner and love Webflow but their lack of adding the most basic functions even tho people have been asking for it for years and years is making me consider changing platform. Just one example. How can you fetch custom code from MULTIPLE cms items without having to add it manually? Like importing code from a .csv file. Answer: It's not possible due to the rich text solution. It's 2024. What are you doing Webflow? Embarrassing to say the least. I could make a long list of basic functions that every other platform has that is missing in Webflow.
Who’s that pretty lady 😢
WHY YOU HATE ADOBE? let adobe be friend with figma too. 😅
I'd like a simpler way of including custom code into Webflow. Both component wise and documentation wise.
Simpler than embeds or just pasting it into the page? What would that look like?