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, 2024 11:11pm

    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
    15 Mar, 2022 10:20pm

    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
    7 Jan, 2022 11:03am

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

  • Lassi Eronen commented
    7 Oct, 2021 01:23pm

    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
    2 Jul, 2021 05:48am

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

  • Stuart Walker commented
    2 Feb, 2020 12:07pm

    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
    6 Dec, 2019 05:16pm

    I would like drag and drop sorting/arranging.

  • Delia Kelley commented
    13 Nov, 2019 08:50am

    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
    9 Mar, 2018 07:30pm

    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
    27 Oct, 2017 02:21pm

    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
    6 Oct, 2017 08:16pm

    +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
    7 Mar, 2017 10:18am

    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
    18 Jan, 2017 05:07pm

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

  • +17