Nesting symbols is how designers design.. Needed feature!

Designing single symbols isn’t all that useful. Ideally nesting symbols allows us to create atomic design systems which is how most designers are designing today. If you consider what’s happening with React, almost every app is getting turned into a component tree with smaller components being styled modularly.

Ideally the symbols in Webflow would take a similar approach. We should be able to create the smallest symbol possible like a button (atom) and work our way up (molecule, organism, template, etc.) so that we’re basically just working with components at that point.

If you consider a typical hero section:

  • o-hero-section
    • o-hero-section__title
    • o-hero-section__description
    • a-button–transparent
    • o-hero-section__bg-overlay–primary

In this case, we have an organism (symbol) that has a transparent button inside (symbol). This allows us to merely change the “a-button–transparent” border-radius and it updates in all parent symbols.

Thanks for the feedback, please create a wishlist item as well. http://wishlist.webflow.io