I'm thinking... create buttons and elements to be re-used within sections that are already symbols.
Hope that makes sense 😬
I agree! 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:
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.
Webflow is just a few steps away from enabling us to create truly efficient Design systems. It would just be a shame not to take the step :)
Please allow for symbols nesting / grouping / re-ordering & cross site copy/paste & you will seriously empower your Webflow designers.
We need this.
this is an essential feature needed
We need this so much :’(
I have been using Webflow to build design systems for numerous products, however the lack of nested symbols is causing real issues to the workflow.
Nested symbols would allow us to create design systems along with modern ‘atomic’ development practices.
A big vote from me.
Definitely would be VERY useful! Would save a lot of time in some of my sites’ layouts.
To not have this as a standard building functionality in Webflow is a massive mistake. Please make this happen sooner rather than later so that Webflow uses can create pages in a modular way. Not being able to nest symbols within an existing symbol really slows things down.
I NEVER WRITE A COMMENT IN CAPITAL LETTERS BUT I MUST MAKE A BIG EXCEPTION HERE. MAKE THIS HAPPEN AND YOU WON'T KNOW WHAT TO DO WITH ALL THE LOVE YOU WILL GET IN RETURN!!!!!!!!!!!
I agree with all here; nested symbols are essential for creating flexible design systems.
Yes!!! This would be so powerful! I use nested symbols in sketch when i'm designing the websites. It makes so much sense to have them nested in Webflow as well.
That way i won't have to decide at which level do I want to make the symbols.
The Styles and combo styles help a lot. but for more complicated systems this would be insanely helpful!!!
Kinda sucks this doesn't exist yet because it makes building out a design system more time consuming than. Love the platform, this is deff not a deal breaker for me but this would be at the top of my wishlist on improvements.
This would be very helpful.
Well over a year and still no ETA on arrival or development update. Is there a public backlog list that we are able to see so we can get an idea of what is coming up next?
I would absolutely love to see this happen!
I am a React developer that has been playing with Webflow as a way to provide a fast and accurate representation of my projects. Still on the learning side of this program, but so far am 80% loving it.
Nested symbols (components from here on out in this comment) would be a HUGE upgrade for this tool. Even more so for my intended use; which is build it here, then have another program or a developer convert the HTML into React components, allowing me to utilize the performance boost of ReactDom. Symbols are great for reusability, but the ability to nest a component within a component allows a great deal more reusability.
The main issue I have been seeing is the lack of nesting components within other components on the initial design of the project using Webflow. This so far has been a tradeoff that I have been dealing with, but if I (and many other React or equivalent developers) had the best of both worlds (photoshop-like interface for projects, and still have our powerful React tools like Nested Symbols integrated within Webflow.) Webflow would be, in my opinion, a must-have tool for any serious developer who would enjoy a virtual workstation that allows you to visually see not only your project but also your tools for the project. Maybe the most proficient with React-like programming languages wouldn't need this step to really improve their workflow, but I personally see this as a great addition to any web designer, and also for any beginner to intermediate web developers.
To summarize, I would absolutely love to see Webflow head to a more React-friendly direction, and while Symbols were a great start, the next step is definitely Nested Symbols. (P.S. I would love to see discussion for integrating a hassle-free way of Webflow to JSX (or straight to React) or React and final publishing of project and hosting this Webflow-made React project. This would turn me from uninterested in the hosting side of Webflow to possibly interested, I would end up already purchasing the product to export my code anyways, would rather be paying to build and host my React project all through Webflow if competitively priced)
Food for thought, and I hope everyone is having a wonderful day!
Yes please! I've gotten used to creating Symbols/Components in design tools like Figma and Sketch. This will make it more efficient to apply design updates across the board, instead of having to create a unique symbol for every instance.
Please move this up the backlog... I'm using webflow to generate react components and right now I've got to duplicate elements containing nested symbols if I change them on one of my pages, otherwise my generation tool throws a fit.
Would love to see this added as well.
This absolutely must exist for any sort of Design System implementation. It's a huge headache to try and manage symbols otherwise.
Yes, in Webflow your CSS classes are essentially your Symbols (from Sketch) or Components (from Figma), so this is not a 1-to-1 analogy. But There are many real scenarios where you need to nest something like a social footer (4 items) inside a set of cards (10 items). Currently, you have to manage either one or the other. And that makes revisions to a larger site very time-consuming. Much more time-consuming than on Sketch or Figma.
I'm out of votes but want to add this would be a game-changer :)
Yes, please. This would be an enormously helpful feature for creating an efficient design workflow.
Hey Webflow Team - please prioritize this. It would make using Webflow so much easier and efficient.
I'm out of votes, but if I had another, it would go to Nested Symbols.
Really hope this is coming soon, I'm working on a template that will be resold to businesses in the same industry. I have developed a private page where all the information of the individual customers can entered, and using a nested symbol system, the information would automatically populate the website.
With the current system, the same information appears in multiple symbols but as it can't be nested, each symbol has to be individually amended.
Just realised symbols can't be nested and that sucks!
You won't be notified about changes to this idea.