Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]

In this video tutorial, you will learn how to efficiently transfer all the necessary components from Figma to Webflow when setting up a style guide. A style guide is an essential tool for any Webflow project, as it ensures consistency across your website. This video goes through every step of the process, and even provides an example by using the "8xFlow" style guide.
00:00 - Intro
01:09 - Why you should use a style guide
02:18 - How to use a style guide
02:48 - What does a style guide should contain
03:09 - How to be efficient and consistent
03:30 - Set up a style guide together
Using a style guide makes it easier to maintain your website over time. As your website grows and evolves, you can easily update and expand your style guide to ensure that all new changes are consistent with the existing design. This helps to prevent design drifts and ensures that your website always looks professional. By having a centralized library of styles, you can easily apply them to different elements of your website instead of having to recreate them over and over. This helps to speed up your build process, especially when you need to make changes to your website on the fly.
The video begins by discussing the importance of using a style guide and what a basic style guide should consist of. A basic style guide should consist of classes for font sizes like h1 to h6, text colors, background colors, button and form styles. While this is the minimum, many style guides also include spacing systems. This means they come with a preset for paddings, margins, and container width.
The video also provides tips for how to use a style guide, and how to boost your Figma to Webflow process. One thing that the video highlights is that you can progress much faster when you use the same system in Figma and Webflow. Basically, that means using a consistent spacing system and naming Figma styles like your Webflow classes. This way, you have to think less and can build without stress.
The video ends with a step-by-step guide on how to set up your style guide, including uploading fonts, creating font sizes using the font scale tool, creating color swatches, and designing buttons and forms. It emphasizes the importance of starting your project with the style guide and continuously adding new styles. Please understand the style guide as a growing library. So if you have to create a new background color, for example, go back to your style guide and add it there.
This video is perfect for anyone, particularly beginners, who want to learn how to create a style guide efficiently and effectively in Webflow. If you want to become one of the top-notch Webflow developers, then this video is a must-watch! Subscribe to the channel for weekly new content around Webflow, Figma, and creative business and stay in the flow with your style guide.
#####
Link to 8xflow styleguide cloneable: webflow.com/made-in-webflow/w...
Follow me on other platforms:
Twitter: / felix_brodbeck
/ ui-ux-webflow-felix-br...
####
Work with my studio:
www.designbase.studio/
#webflow #figma #tutorial #uidesign #styleguide #webdevelopment #freelancing #stepbystep

[@designbasestudio]

👉 Work with me: www.designbase.studio/

[@LiLAlbiHD]

Thanks for the video! Its really informative even for intermediate people like me. I appreciated seeing your process and learned a lot about efficiency here

[@designbasestudio]

You are welcome! Thanks for the comment ☺️

[@johnnymuller7454]

Just did my first CMS collection and page with your CMS for beginners tutorial 🎉 thanks for all the content, using it all the time

[@designbasestudio]

Great! Love to hear 👂

[@seb-astian-design]

Awesome videos!! Really was looking exactly for this. Thank you

[@designbasestudio]

You‘re welcome! Stay in the flow 👌

[@seb-astian-design]

@@designbasestudio I'd love to use the fluid typescale generator you've used. Do you have any updates when it will be live?

[@designbasestudio]

We didn’t find the time yet to proceed with it this summer. So probably this autumn!

[@seb-astian-design]

@@designbasestudio great!! btw did you try out framer as well? if so what would you say is a strength of webflow? for me it just seems way more flexible and more customizable with js and css

[@tezeroman]

Hello Felix. I watch lots of videos in order to learn web design and development in Webflow but I find your organised approach the most appealing. So from the beginning I'd like to stick to your system and get used to it along the way. I would like to ask you whether you modified your approach, making use of new variables. I guess they are helpful but would be cool to see how exactly you are going to implement it in the process :) Thanks a lot!

[@designbasestudio]

Hi Roman, happy to hear that you enjoy my content! Variables are great in general but Webflow needs to give them media queries before they are fully usable. Without media queries you can almost just use them for colors and I don't see any advantages over classes. Sure, you could build your own workarounds with custom code, but why make it even more complicated with this? For me personally, that means I will wait until an update with this.

[@mikepapahotel]

Hi Felix - just watching this for the second time - I'm liking what I see - well done! 😊👍🏻 Quick question if I may - do you have the same system cloneable using black font on a white bg? If not - is there a quick/easy way to convert this one? Thanks again! 😊

[@designbasestudio]

Hi Mike, I am happy to hear that you enjoy my content. In general, the style guide is ment to be overwritten. Just change the styles for typography and colors that you should be ready to go! ✌️

[@suzybee123]

❤❤❤❤❤❤!

[@designbasestudio]

🙌🙌🙌🙌🙌

[@susa5045]

Thank you for sharing this! Incredibly helpful! I let ChatGPT generate recommendations for fonts, sizes, scales etc. and then turn its response into JSON/HTML/CSS. Would you make a video on how to transfer that beautiful Figma style guide into webflow?

[@designbasestudio]

Also an interesting process! You are probably searching for this video: kzbin.info/www/bejne/on7Yamufq8ieoassi=y19LcbzyH15i5UTi

[@Michael.........]

Great video! Will your workflow change with the recent update? :)

[@designbasestudio]

Hi Michael, I guess you are talking about variables. Unfortunately Webflow didn't release this feature including media queries for variables. Without, there are not many use cases (except you add some custom code). But once we got media queries with variables I am looking forward to use them for global stuff like spacings, boarder radius and so on..