Nested Symbols

I'm thinking... create buttons and elements to be re-used within sections that are already symbols.

Hope that makes sense 😬

  • Kia Kamgar
  • Mar 16 2017
  • In backlog
  • Cameron Roe commented
    June 26, 2017 22:54

    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:

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

  • Valentin de Bruyn commented
    October 27, 2017 14:30

    +10 


    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. 

  • Eric commented
    November 05, 2017 16:39

    We need this. 

  • Bertrand Niquel commented
    January 14, 2018 13:25

    this is an essential feature needed

  • Robin Bugdahn commented
    January 19, 2018 14:55

    We need this so much :’(

  • Adam Barley commented
    May 23, 2018 19:11

    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. 

  • Evan Cowan commented
    June 06, 2018 23:53
    Yes please! Coming from sketch, symbols are everywhere, and its so helpful
  • Jon Reese commented
    June 08, 2018 18:49

    Definitely would be VERY useful! Would save a lot of time in some of my sites’ layouts.

  • Grant Senior commented
    July 02, 2018 09:44

    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. 

  • Mario Gonzalez commented
    July 27, 2018 19:04

    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!!!!!!!!!!!

  • David Meister commented
    August 16, 2018 03:56

    very important...

  • Craig Garner commented
    August 20, 2018 04:06

    I agree with all here; nested symbols are essential for creating flexible design systems.

  • Alborz Heydaryan commented
    August 20, 2018 19:55

    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!!!

  • Rob Heath commented
    September 06, 2018 21:47

    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.

  • Brent Hegnauer commented
    October 19, 2018 18:21

    This would be very helpful. 

  • Benjamin Fairfax commented
    November 05, 2018 03:19

    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?

  • Matt Seames commented
    November 06, 2018 07:46

    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!

  • Bill Hamway commented
    14 Jan 19:25

    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.

  • Jens Hartwig commented
    15 Feb 18:21

    +1

  • Forest K commented
    02 Mar 16:15

    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.

  • Gene Reese commented
    08 May 15:31

    Would love to see this added as well.

  • Chris Meeks commented
    28 May 15:23

    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.

  • Craig Keeling commented
    29 May 18:08

    I'm out of votes but want to add this would be a game-changer :)

  • Robert Clayton commented
    07 Jun 12:14

    Yes, please.  This would be an enormously helpful feature for creating an efficient design workflow.  

  • Toby MacLeod commented
    07 Jun 15:24

    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.

  • Sam Hall commented
    20 Jul 11:26

    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.

  • Gareth Harrey commented
    01 Nov 13:36

    Just realised symbols can't be nested and that sucks!

  • Luis Alberto Gudino Salinas commented
    07 Nov 21:19

    please :'(