Figma library - Create Heading component

[halocline]

Create a Figma component for Heading and add to the library. Preference is to use a component instead of consuming Typography elements. This will allow any changes to font treatments to be made in one central location and any updates to be pushed to all instances through the component update process. With the current approach, this is not possible and requires a designer to update all instances individually. (additional background)

Considerations

• How does an anchor/link get added?
• Downsides / reasons Text should not be componentized?

Primary deliverable

• [ ] Form a point of view and recommendation on direction
• [ ] Share-out with team

Potential follow on deliverables

• [ ] Figma component created in parity with Grommet Heading.
• [ ] Property parity (where it makes sense) with Grommet component. Review with developer.
• [ ] Published to library.
• [ ] Announced to stakeholders (?) Needs discussion --> This will be a fundamental change to how typography is consumed in Figma. What education / training is needed to support this change?
• [ ] Proof of concept for a higher order component, such as PageHeader, consuming the Heading component instead of typography directly.
• [ ] Shareout of work and findings with Design System team.
• [ ] Create follow on issue to apply Text to any Figma components.

[vavalos5]

Some quick and initial thoughts on this..

Interested to understand how this would work with the new Figma variables. Or if and how this could be applied with variables.

Some concerns..

• We designers would still have to update each instance as we would in the centralized location if any of the Heading sizes were to be needed to change.

• This can create confusions for designers when looking for Heading sizes since we have all of our text styles, including Headings and Anchors in a centralized location. If we componentize, designers would have to search for component in assets. This requires more work rather than just changing the text styles from a central location.

• To be aligned with CSS when in dev mode on Figma, CSS would be different.

Here's an article from Figma on text styles best practices.

[taysea]

Potentially blocked by https://github.com/grommet/hpe-design-system/issues/3392

If we do this work now, we might end up doubling back on work if we switch fonts over.