Fix Pixel-Perfect Line Height Across Design and Code with Fin Plugin

1. How do we battle visual fidelity?

Design handoff is often a time‑consuming “misc task”. Designers struggle with pixel‑perfect lines, while developers spend days debating spacing.

1.1 Industry Pain Points

Designers need to ensure visual and interaction fidelity; even a single‑pixel divider can cause repeated adjustments, and developers often argue over a few pixels of spacing.

1.2 Current Situation

Key factors causing visual inconsistency include color errors, size mismatches, interaction misuse, copy deviations, adaptation issues, font style, skinning, animation, and especially spacing – accounting for about 65% of problems. The root cause is inconsistent line‑height (字高) between design and code, leading to a “butterfly effect”.

2. Our Solution (Design + Technology)

Goal: achieve pixel‑level line‑height restoration.

Design Side

Use the “Fin Line‑Height Fix” plugin (see page 3 for details).

Development Side

Open‑source solutions for all platforms are provided.

3. Fin Line‑Height Fix Plugin Guide

3.1 Installation & Opening (Figma)

Supported font sizes: 8–75 pt, fonts: PingFang SC, SF UI Display, Inter.

Navigate: Community → Search “字高修复神器” → Plugins → Install.

3.2 Plugin Features (Figma)

Single‑line line‑height fix – repairs all single‑line heights within a frame.

Multi‑line line‑height calculator – quickly set multi‑line heights.

3.3 Usage (Figma)

1. Select a Frame or Text and click “Auto Fix”; a “Fix Success” toast confirms.

2. For multi‑line, choose a multiplier and click “Set”.

3.4 Installation & Opening (Sketch)

Obtain the Sketch plugin by following the official account and private‑messaging “字高修复神器”. Ensure Sketch version 70 or higher.

3.5 Usage (Sketch)

After selecting text, press command + ` or use the menu: Plugins → Fin Design Plugin → Single‑line Fix.

4. Technical Implementation Guides

4.1 iOS

#import <NEUIKit/UILabel+NEDolphinText.h>
UILabel *label = [UILabel new];
UIFont *font = [UIFont fontWithName:@"PingFangSC-Regular" size:12.f];
[label ne_dolphin_setTextWithFont:font text:@"测试文案" lineHeight:17];

4.2 Android

方法1：文本包装span修改字体属性 - 建议
android:includeFontPadding="false"
setText(warpStandardHeightSpan("ceshi", 12 , TypedValue.COMPLEX_UNIT_DIP))
setText(warpFixHeightSpan("ceshi" , 18))

方法2：自定义组件
<com.netease.cloudmusic.core.dolphin.component.text.DolphinTextView
    android:textSize="12dp"
    app:dolphinText="文本内容"
    app:dolphinLineHeight="18dp" />

4.3 React Native

{/* lineHeight matches design */}
<Text style={{ fontSize: 12, lineHeight: 17 }}>
    文本内容
</Text>

5. Conclusion

The Fin Line‑Height Fix plugin streamlines collaboration between UI designers and front‑end engineers, embodying the Dolphin team’s value of making design‑development coordination simple and efficient.