Community forum for knowledge and support

Updated last year

Styling Wireframes in Figma: Approaches and Considerations

At a glance

The community member is struggling with styling the wireframes in a Figma file. They ask whether they should style the components one by one on the components page, or detach the instances and deactivate the auto layout on the assembled wireframes and style them. Another community member responds that they definitely detach instances every time, as the components are only for unique IDs and syncing with the style guide. They suggest dragging the detached instance of a navbar or footer to its own page or off canvas, and making it a local component that can be reused throughout the project. They also mention that disabling auto layout is a personal preference, and that the more changes made to a component in Figma, the more will need to be replicated in Webflow. The community member who asked the original question then asks for clarification on the suggestion to drag the detached instance to its own page or off canvas, and a community member provides a link to a walkthrough video that explains this process further.

Useful resources

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!

M
B
4 comments

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."

Add a reply
Sign up and join the conversation on Slack