Skip to main content

I have a component library that I want to add support for accessibility. Some of our components need to have HTML tags of alt=“” and aria-label=“”. I would like to have these in Figma for our writers to add content. I’ve looked at a ton of Figma to code plugins, and have tried using text properties, but with no success. Any ideas?

Hello, looking for the same thing. Work-around, improvisation, tips welcome

Totally necessary

+1 to this

Thanks for raising this topic! Let me change the category into “Suggest a feature” for future improvements 🙂 Our team regularly checks that. 

 

Thanks!

It would help a lot with design handoffs and code generation if components would have metadata properties. There could be a specific property type for metadata that doesn’t affect the rendering of the component but can be used to pass key-value pairs that would appear in properties list in Dev Mode.

Few examples:

  • aria-label: “Save changes”
  • max-length: 16
  • Web component: <vaadin-dashboard-widget>
  • Component version: 1.2.1

I already thought that setting up a text variable that isn’t connected to any layer could be used for passing the info in a “hidden” property, but it will result an invalid asset due to unused property. The simplest workaround could be to support special markup for read-only properties. For example “_component: vaadin-dashboard-widget”. Ideally the values in metadata properties could be marked to allow editing to make them more useful (i.e. aria-label case).
 

Current property types

 

Reply


Terms & ConditionsCookie settings