Why you shouldn’t use vertical trim in Figma (yet)

Explanation of the vertical trim setting in Figma and its benefits: The vertical trim setting in Figma trims the space from the top of a text box to the cap height of the first line of text, ensuring accurate spacing measurements. This is helpful for maintaining design consistency and alignment.

The problem with using vertical trim in Figma: While vertical trim is a useful feature, it currently does not translate to CSS and is not supported in web browsers. This limits its practicality for web development and other platforms.

The state of text box trimming in Figma: Figma only supports Cap height to baseline trimming at the moment, but there may be potential for top or bottom trimming options in the future. Exploring the possibilities of text box trimming in Figma can lead to new design outcomes.

Optical alignment in design: Optical alignment, rather than strict vertical alignment, is important for visually pleasing design. Trimming text boxes to the cap height can create a more balanced and aesthetically pleasing appearance.

Future considerations for text box trimming in Figma: While the current limitations of text box trimming exist, there may be opportunities for further development in the future. Exploring new trimming options and features can enhance design possibilities.

Collaboration between designers and developers for accessibility: Designers and developers should collaborate to address accessibility issues beyond visual design considerations. Features like tab order and dictation require collaboration and integration of design tools and development practices.