Fin Line Height Fix Tool: Solving Visual Fidelity Issues in Design-Development Collaboration

This article introduces the "Fin字高修复神器" (Fin Line Height Fix Tool), an open-source solution developed by NetEase Cloud Music's Dolphin team to address visual fidelity issues caused by font height inconsistencies between design tools and actual implementation.

Industry Pain Points: Design verification has long been considered a time-consuming task by both designers and developers. Designers meticulously check every pixel detail, but the final implementation often fails to match the design intent. Developers frequently debate about alignment, sizing, and spacing issues. According to statistics, spacing problems account for approximately 65% of visual fidelity issues, stemming from inconsistent font heights across different platforms.

Solution Overview: The tool provides a plugin for design tools (Figma and Sketch) and technical solutions for iOS, Android, and React Native platforms. The goal is to achieve pixel-level line height consistency between design files and development implementation.

Figma Plugin Features:

Single-line Line Height Fix: Automatically fixes all single-line height issues within selected Frames

Multi-line Line Height Calculator: Allows designers to quickly set multi-line heights using common multipliers

Supported font sizes: 8-75pt; Supported fonts: PingFang SC, SF UI Display, Inter

Sketch Plugin: Requires Sketch 70 or higher; Use shortcut command + ` or access via Plugins menu

Technical Implementation:

iOS Implementation:

#import <NEUIKit/UILabel+NEDolphinText.h>
UILabel *label = [UILabel new];
// 设置字号为12
UIFont *font = [UIFont fontWithName:@"PingFangSC-Regular" size:12.f]
// 设置字体、文字内容、视觉要求行高
[label ne_dolphin_setTextWithFont:font text:@"测试文案" lineHeight:14];

Android Implementation:

方法1：文本包装span修改字体属性 - 建议
android:includeFontPadding="false"
单行标准行高 // 内容 + 字号 + 字号单位
setText(warpStandardHeightSpan("ceshi", 12 , TypedValue.COMPLEX_UNIT_DIP))
多行指定行高 // 内容 + 设计稿指定1.5倍行高
setText(warpFixHeightSpan("ceshi" , 18))
方法2：自定义组件
<com.netease.cloudmusic.core.dolphin.component.text.DolphinTextView
android:textSize="12dp"      // 设置字体大小
app:dolphinText="文本内容"   // 设置文本内容
app:dolphinLineHeight="18dp"   // 设置行高 （仅多行文本需要）
/>

React Native Implementation:

{/*lineHeight即视觉稿行高 */}
<Text style={{ fontSize: 12, lineHeight: 14 }}>
文本内容
</Text>

This tool simplifies the collaboration between UI designers and developers by eliminating the tedious verification steps and ensuring consistent visual output across platforms.