This is hands down the best system ever! Thank you so muuuuch!!! I was overwhelmed with client-first, but this has the same principles but much more straight forward. I very much love what you did with the spacing and the EM. Makes a lot of sense, very smart!
wowww really great video, thank you for taking the time to explain it and for also creating amazing free content!! I am really looking forward to using this to speed up my workflow
There is no white version because everything is ment to be overwritten with your styles. Furthermore styleguide specific classes have the prefix „dsg“ like „dsg-body“. 🙂
Hey! First of all the classes scale fluidly because they are em values. But if you have a special case where it is necessary as you describe we would use a custom wrapper class instead of one of the utility classes.
THANK YOU ! But please, did you make a mistake on the Flex Helpers ? The second one. The class is for the horizontal state and in the WHAT IT DOES part you maintain the vertical result. So for those who are not specialist they can be lost. BUT AGAIN ! THANK YOU SO MUCH. IT'S AMAZING !
Could you give an honest, quick pro and con breakdown of this versus client-first? I'm interested to use this a bit more than client first. I assume the biggest weakness might be this is only good for websites without fancy layouts?
First, we highly value the work of Finsweet, and we use a couple of their solutions our self. The most significant difference is that 8xflow is thought from a developers perspective to speed up the development process while you are working on truly custom layouts. For example: working on multiple projects with generic class names like "padding-lage" can get confusing because here it might stand for 128px and in another for 80px. It is not as straightforward as a class like "is-pad-b-80". 80 means 80px (what is converted to 5em). Hope that answered your question?
![Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]](http://i.ytimg.com/vi/Uc0dGZb937s/mqdefault.jpg)
![Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]](/img/tr.png)
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
👉 Work with me: www.designbase.studio/
Hey Felix ....
Really coole...
Thank you so much...
Hey Jumperl 😀 Thank you!
This is hands down the best system ever! Thank you so muuuuch!!! I was overwhelmed with client-first, but this has the same principles but much more straight forward. I very much love what you did with the spacing and the EM. Makes a lot of sense, very smart!
Thank you so much! We are already working on a 2.0. So if you have any suggestions let us know!
@@designbasestudio owwww! So awesome, okay will definitely write some notes if I have. Have a wonderful day 💙
@@Reapertips You too!
wow, amazing! thank you so much for doing this
Thanks... UA-cam channel exploding 💥💥
wowww really great video, thank you for taking the time to explain it and for also creating amazing free content!! I am really looking forward to using this to speed up my workflow
You are welcome @Zahra :)
I love it! thanks so much!
You are welcome!
Thanks for the free resources guys! You rock
You are welcome 🙂
This is so awesome! Thanks so much for creating & sharing these assets. Your style guide system has a very logical structure, just love it, thanks!
Hey, thanks for your comment! We are already working on a 2.0. If you have any suggestions, just let us know!
Great. Thanks!
looks really good mate!
Thanks man!
Thank you so much!!! It is so helpfull!
You are welcome. Let us know what else you could need. More templates? A recording of a live build etc.
Thank you!
You are welcome! Stay in the flow 🙌
Really cool! (P.S. the UA-cam video title says Webflow to Figma rather than Figma to Webflow)
😄thanks!
Is there a Cloneable?
Hey Fernando it is coming today! 🙂
Here we go: bit.ly/3urFgGi
Thanks for the styleguide. Is there a white version of styleguide?
There is no white version because everything is ment to be overwritten with your styles. Furthermore styleguide specific classes have the prefix „dsg“ like „dsg-body“. 🙂
Hey! Great Video! - If you're using is-pad-b-128 on Desktop, but need is-pad-b-96 on Mobile, how would you go about it? Cheers!
Hey! First of all the classes scale fluidly because they are em values. But if you have a special case where it is necessary as you describe we would use a custom wrapper class instead of one of the utility classes.
THANK YOU ! But please, did you make a mistake on the Flex Helpers ? The second one. The class is for the horizontal state and in the WHAT IT DOES part you maintain the vertical result. So for those who are not specialist they can be lost. BUT AGAIN ! THANK YOU SO MUCH. IT'S AMAZING !
Hey! Thanks for the hint. We just published an update. :)
Hey there, the "Get the free Figma template" link leads to a 404
The one in your website and in the Webflow marketplace.. the one in the video description actually works
Could you give an honest, quick pro and con breakdown of this versus client-first? I'm interested to use this a bit more than client first. I assume the biggest weakness might be this is only good for websites without fancy layouts?
First, we highly value the work of Finsweet, and we use a couple of their solutions our self. The most significant difference is that 8xflow is thought from a developers perspective to speed up the development process while you are working on truly custom layouts. For example: working on multiple projects with generic class names like "padding-lage" can get confusing because here it might stand for 128px and in another for 80px. It is not as straightforward as a class like "is-pad-b-80". 80 means 80px (what is converted to 5em).
Hope that answered your question?
hi! did you ever use framer? what's your thought on it
Didn’t had the chance yet to take a deep dive but looks interesting
@@designbasestudio thanks for replay 😊