A better Symbol panel

Thanks a ton for reverting to a list view for the Symbol panel!

However, it's still a regression from what we had before.

  • it's less compact: the occurrence number takes up one full line and the icon is unique (doesn't have a utility) and still quite big
  • it's not sortable: sorting the symbols was quite important to me
  • it would be great to be able to group symbols into folders as well

Additionally, I read many times users asking for a way to easily spot where the symbols are used.

Thanks!

  • Vincent Bidaux
  • Jan 18 2017
  • Reviewed
  • Peter Bekkers commented
    17 Jan 23:11

    With components becoming a focus of the webflow development team, would love to see the ability to organise components into folders

  • Monica Sigüenza commented
    March 15, 2022 22:20

    Yep, I echo others here....the ability to organize in folders, or simply to reorder symbols in a way that makes sense would be massively helpful. Now, if we're getting fancy, a little thumbnail preview (the way figma shows its "componets" which are similar to symbols would be great down the line as well.

  • Alex Dixon commented
    January 07, 2022 11:03

    This would be super useful when implementing and using design systems.

  • Lassi Eronen commented
    October 07, 2021 13:23

    Yes - 100% needed. We have about 50 symbols on the list and growing - grouping UI elements and layouts to folders would be absolutely paramount.

  • Aaron commented
    July 02, 2021 05:48

    Need to sort. Will pay Webflow to prioritize this feature.

  • Stuart Walker commented
    February 02, 2020 12:07

    Just simply being able to group symbols into folders would help immensely. I would take a leaf out of Sketch's implementation. If you separate your names with a backslash, then that creates a subfolder.

  • Jim OConnell commented
    December 06, 2019 17:16

    I would like drag and drop sorting/arranging.

  • Delia Kelley commented
    November 13, 2019 08:50

    I'd like this, and to take it further: short life free UI to warn about any places that I'm not using the spacings that I set up.

  • Evan McDaniel commented
    March 09, 2018 19:30

    I'm interested in being able to get info about where each symbol is used across a site. 

    In theory It's good to know how many times it's used, but in practice it's not that helpful without the knowledge of which pages on which it is used.

    I'm needing to make a change to a symbol right now, and I'm going to have to go page by page until I see where else it's used.

    Sometimes I wish the webflow UI could be open-sourced so the community could contribute... I can dream, right? :)

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

    Agree. In order to create efficient design systems, we need a revamped Symbols panel.

    Attached is a quick redesign.

     

    I think we mostly need :

    - grouping

    - re-ordering symbols & groups

    - searching would be nice too

    - the ability to nest symbols

    - clickable instances number > display the pages where it's used + the symbols where it's nested in 

     

    I was thinking that screenshots of symbols would be cool too, but not sure of how readable it could be at such a small scale. As far as I am concerned, I would stick to proper naming of symbols (search function and grouping would help to find whatever I need quickly).

    For a more visual access to my library of Symbols, I would create a separate "Style Guide" page, in which I would drop all my Symbols. Imagine that, combined with cross site copy/paste... That would enable us to create basic components libraries, which we could use to prototype websites in a blink.

     

  • Naweed Shams commented
    October 06, 2017 20:16

    +1 

    I don't have any votes left but this is an absolute must-have! 

    What I would love for the symbol panel is to allow grouping;

    • Headers / nested symbols with different layouts

    • Navbars / nested symbols with different layouts and color palettes

    • Content / nested symbols with different layouts, color palettes, typography, composition etc

    It would also be amazing to upload a screenshot of the symbol and attach it as a thumbnail instead of navigating through a long list of words. This will massively reduce searching time and improve the user experience.

  • Diarmuid Sexton commented
    March 07, 2017 10:18

    I would like the ability to manually re-order the symbols - the same as we can move the interactions up and down to create our own order. 

  • Timothy Noah commented
    January 18, 2017 17:07

    Agree Vincent the old Symbol Panel is sorely missed...

  • +17