Hey everyone, I'm struggling a bit with the styling of the wireframes in the Figma file.
How do you style the sections, do you style the components one by one on the components page?
Do you deattach the instances and the auto layout on the assembled wireframes and style them?
Because it feels wrong to deattach the instances and deactivate the auto layout on every element.
Thanks!
I definitely detach instances - every single time. The only reason they are figma components is for our systems to pick it up by a unique ID and keep everything encapsulated and synced with the style guide. Once its on the canvas, it serves no other purpose whatsoever. However as soon as you detach an instance of say a navbar or footer, I would drag that to its own page or off canvas, and make that into a component that is now local to that file - and then you can reuse that throughout your project specifically.
As for disabling auto layout - thats really a personal preference - really depends on how wild you want to get with your modifications to the components compared to what they were by default. Something to keep in mind, the more changes you make to a component in Figma, the more you'll have to replicate in Webflow.
Personally, I wouldn't let auto layout or the fact that you have to replicate your changes deter you from making changes - stifling your creativity. Once you start to understand how these components are built more, you'll see that some other layouts might be even closer to your vision than others, with less mods to them - or you'll start to look at the components in their current state - a bit differently. Hope that was helpful!
Thanks for the reply!
I just didn't understand this part, could you elaborate on this?
"However as soon as you detach an instance of say a navbar or footer, I would drag that to its own page or off canvas, and make that into a component that is now local to that file - and then you can reuse that throughout your project specifically."
I walk through this a bit in my full walkthrough video here: https://www.loom.com/share/e44d1a2bbf274be1a7e93beae5b5fb99?t=1503&sid=50dc7cf1-9f7c-4475-a718-890d0c8735da
