Metadata & Description in figma

[SeamusLeonardHPE]

Goal: Aid discoverability of existing components, and design patterns in the guidance site.

Approach: Add metadata that includes alternative names & usage descriptions to both figma components (and variants) as well as adding searchable metadata to DS site pages.

Suggested keyword data has been added to linked excel sheet:
Link to audit research

Deliverable 1: Guidance & Metadata template

• Create guidance for adding/updating metadata (what should be included, what format how to publish)
  draft guidance/discovery
• Create and document process and reviewing metadata amongst team before adding to figma.
• Define what is included and what order to display in figma (Keyword, Description, Usage?)
• Create template for the “description” inside figma to existing components (use layer/modal component for first example) & get approval from team
• Share with devs to discuss how to add values in DS site (meta name="description" meta name="keywords" ?), document approach and add to guidance
• Document if there is a need to add specific meta data for component variants (e.g. ‘toggle’ variant within checkbox component)

Deliverable 2: Individual components & pages to update.

• Box
• Card
• Footer
• Grid
• Header
• Header
• Layer
• Main
• Page
• Stack
• Accordion
• Anchor
• Button
• Menu
• Pagination
• Search
• Tabs
• Tip
• Checkbox
• Button Groups / Toggle
• Checkbox Group
• DateInput
• FileInput
• MaskedInput
• RadioButton Group
• RangeInput
• Select
• SelectMultiple
• TextArea
• TextInput
• Avatar
• DataTable
• NameValueList
• Notification
• Skeleton
• Spinner
• Tag
• DataTable Customization
• Feedback
• Lists
• Global Header
• Forms
• Page Layouts
• Content Layouts
• Filtering
• Navigation
• Wizard
• Global Header

Questions about figma "description" and link fields

• Should we include links in the description of just the link field?
• What link/links should be included, Design system, Grommet or Storybook
• What order priority for adding metas data existing components.
• Other unpublished changes need to be catalogued and published prior to theme update launch.
• Clean out any old component meta data that doesn't align with new process.
• Document any issues with components noted as we work on this (toggle switch inside checkbox, anything that is out of date, deprecated nested components etc)

[SeamusLeonardHPE]

@ashifalinadaf is proceeding with just adding Keywords & links to the Ds site to top level components (not variants).
We will revisit to add descriptions as soon as theses changes have been socialised and feedback has been gathered.

We will avoid editing & publishing metadata on the following components until we consult @KennyAtHPE to uncover if there have been visual changes that need reviewed: (As these components currently show up in figma as having unpublished changes.)

• Global Header
• List
• Menu
• PageHeader
• SelectMultiple
• Responsive Tabs

[SeamusLeonardHPE]

Hey @KennyAtHPE can we schedule a call on Monday to review the components in the previous comment & see if visual changes have been made before we add and publish the metadata.

@taysea @jcfilben, we have added keywords to our figma components, and would like to add the same terms as searchable metadata on the DS site. We need a bit of guidance on how best to approach this, we can use one component as a test case and then see if the work can be carried out by a designer & reviewed via pull request.

[jcfilben]

Hey @SeamusLeonardHPE the terms can be added to this file:
https://github.com/grommet/hpe-design-system/blob/master/aries-site/src/data/structures/components.js
Each component has a tags section. Terms can be added to tags for each component and then when these terms are used in search the associated component will show in the search results.

Agree on starting with just one component, opening a pull request and ensuring it is working correctly, then we can move forward from there.

[KennyAtHPE]

@SeamusLeonardHPE apologies, I will take a look today and review the unpublished changes to those components you mentioned previously.

[KennyAtHPE]

@SeamusLeonardHPE reviewed the components. Feel free to publish, I do not see any visual changes—a reminder to include a message explaining the change and who to contact if there are any issues.

Side note, we may have to change to using the branching feature to avoid similar issues in the future. The branching feature provides a side-to-side comparison of the old and new versions of components. It's tough to see how a component has changed otherwise.

[ashifalinadaf]

@KennyAtHPE thanks for the clarification, I will publish the remaining component with metadata.

[ashifalinadaf]

Added meta data to all the component in Figma file, except 'data table component' (as there are many smaller components).
Meta data was not applicable for guidance related components coloured beige on Master sheet @SeamusLeonardHPE @KennyAtHPE

Created a PR to test the discoverability on DS site for 'selectmultiple' component #3566 @jcfilben @taysea if you have a look and merge it.

[KennyAtHPE]

@ashifalinadaf thank you for adding the metadata for those components, did you already go ahead and publish those changes? If not, feel free to publish since this should not be breaking any existing instances.

[SeamusLeonardHPE]

@ashifalinadaf

• 1. List all DS figma components that have not been updated with keywords from master file (is it only figma components that have not been refactored? )
• 2. Add comma separated keywords to the DS site via link below (Make sure we are ADDING to keywords, and not removing any existing ones. 
Taylor has confirmed we can do this all in one pull request) link
• 3. Confirm addition of metadata in the excel master sheet for visibilty

Subsequent task,

• aggregate dev links in an excel doc (DS site, Grommet, storybook, git repo) for each component - (May require dev assistance to we can collaborate on this)
• When completed we can add those via the dev mode on figma - Experiment was done on the ‘selectMultiple’

[ashifalinadaf]

Completed adding metadata to the components PR #3569, @taysea please have a look and merge if all goes well.

All DS figma components that have not been updated have been coloured light yellow with comments, these are either need refactor or without published component. @SeamusLeonardHPE

Updated on master sheet

Currently working on adding metadata to the templates.

[ashifalinadaf]

PR for adding keywords to the Templates - #3571 @taysea @SeamusLeonardHPE

[SeamusLeonardHPE]

Closed as complete.

All non checked items in issues are either - components that have been deprecated as unsuitable to figma
Box - Grid
Or layout templates that are not components and cannot recieve metadata