Skip to main content
Question

Adding keywords to variants

  • October 8, 2021
  • 7 replies
  • 4097 views

Erika_Barichello

Hello, my first post here.
Yesterday I’ve been following the Schema 2021 Conference and when Jen Yee talked about the Netflix Design System showed that they use keywords to look up for icons on the “swap instance” panel, on the “variants” section of the right sidebar. For instance, if you are looking for an icon that on your design system has been named “Heart” you can find it by using other names/tags/keywords attributed to it (so you don’t need to remember the exact name you gave to the icon to find it)… how do you do that?

I hope I’ve been able to explain what I am trying to achieve…

This topic has been closed for comments

7 replies

Rachel9
  • 1 reply
  • October 8, 2021

I attended Figma’s ‘Schema 2021’ conference, and saw in Netflix’s presentation that they added tags to collections of icons so that users could search broader categories rather than just the exact icon’s name in order to receive multiple results.

I thought this was amazing and would allow users to navigate to icons when a single name might not match their mental model!

However I can’t seem to find any information on this online and am wondering whether this might be a plugin (that I can’t find)?

If anyone has any info that would be great on how to achieve this!


ntfromchicago

Each variant has a description field. You can type your keyword(s) in there.

image


Alexey_Ardov

You can add tags to the icon descriptions and they will be searchable 😉


Erika_Barichello

Thank you! I have done so but my Icons are all variants so I can pick them by their name from a drop-down menu… just noticed that the 2 solutions don’t work together (or maybe I am doing it wrong?)…when I search a specific tag if that tag exists the result shows me always the same icon…

Screenshot 2021-10-13 at 10.57.07


Adam_Ogrodnik_FC

There are a few approaches on how to build an icon library. I’ve tried working on a library where all icons were variants and it was very difficult to use:

  • cannot search within the library
  • have to scroll through the long list of icons sorted alphabetically, so you need to know exact name of what you’re after, very ungrateful for hundreds of elements

Simple solution:
Use separate items for a library instead, using a slash-name convention OR just wrap them around a frame with a meaningful name (which would become a label for your library). You can also add description (tags) to each separate icon if you need. This way you keep them together for search purposes and you can search through them 👍
image


Erika_Barichello

Thank you Adam!!! I edited my icon library and this solution works much better than the variants one.
🙂 🙂 🙂


  • 0 replies
  • November 14, 2021

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings