[figma] Sync typography line-heights with MUI Documentation (Chip and Button components)

[adrianmanea]

Summary

There are several discrepancies between the line-height values in the Figma design file and the official MUI technical documentation. The MUI documentation is considered the "source of truth," but the Figma components are currently using incorrect values.

Identified Inconsistencies:

• Chip Component: Figma line-height is 18px, but MUI documentation/code is 19.5px (+1.5px difference).
• Button Component: Figma line-height is 26px, but MUI documentation/code is 24.5px (-1.5px difference).
• These inconsistencies create friction during the hand-off process, as developers see different values in the design inspect panel than what is implemented in the theme provider.

Examples

• MUI Documentation (Correct Source): [Link to MUI Typography/Chip/Button API]

• Visual Evidence: User-provided screenshots demonstrate the 1.5px variance in both directions (larger in code for Chips, smaller in code for Buttons).

Motivation

The goal of the MUI Figma library is to provide a "pixel-perfect" representation of the React components. When typography values like line-height differ, it leads to:

1. Layout Shifts: Designs that look balanced in Figma may appear cramped or overly spaced once coded.
2. Hand-off Confusion: Developers often have to guess whether to follow the Figma inspect values or the library defaults.
3. Migration Friction: As users move from v6 to v7 using the "Swap Library" feature, these minor bugs can accumulate and require manual overrides in the local design system.

Search keywords: Figma, Line-height, Typography, Chip, Button, Design-to-code parity, v7 Migration