响应式设计不只是布局适配——文字在不同屏幕尺寸下应该如何变化，同样关键。手机上标题用32px太大，桌面端正文用16px又太小。但很多设计师在做多屏幕适配时，最容易忽略的就是文字。
一、为什么响应式排版很重要？
不同屏幕尺寸对应不同的阅读场景。手机屏幕小、观看距离近，字号可以稍小但行高要舒适；桌面屏幕大、观看距离远，字号需要稍大保证可读性。如果所有屏幕用同一套字号，要么手机上文字太大撑爆布局，要么桌面端文字太小看不清。
更关键的是，响应式排版直接影响用户体验和转化率。字号不合适、行高不舒服、行宽太宽或太窄——都会让用户快速离开。
二、Figma中的响应式文本样式
在Figma中为不同断点分别设置文本样式。具体操作：选择现有断点或自定义新断点；调整字号、行高、字间距和段落间距；添加更多断点。完成后将三种样式分别应用到对应断点下的文本图层。
实际项目中通常为三个核心断点分别建立文本样式：Desktop（1440px）、Tablet（768px）、Mobile（375px）。为H1-H6、正文、标注等每个层级都建立三套样式。
三、用变量+模式实现响应式排版
更高效的方法是使用Figma的变量（Variables）和模式（Modes）。创建变量集，添加Phone、Tablet、Desktop三个模式，每个模式下设定不同的字号值。把变量绑定到文本图层的字号属性上。
一个变量控制所有文本层级在不同屏幕下的字号——切换模式，所有文字自动切换到对应的字号集合。这种方式比手动切换样式高效得多。
四、字体缩放规则
建立系统化的字体缩放规则。Mobile: H1 28-32px, Body 14-16px。Tablet: 在Mobile基础上放大20%左右。Desktop: 在Tablet基础上再放大10-15%。行高保持1.4-1.6倍，行宽保持45-75字符。
五、断点的选择
常见断点：Mobile小于768px、Tablet 768-1199px、Desktop大于等于1200px。根据目标用户设备分布调整，移动优先原则先定义手机尺寸再向上扩展。Figma Sites中可以为网页添加和删除断点。
六、交付与开发协作
Figma的响应式文本样式需要在设计阶段就定义清楚。使用插件如Design Lint验证开发实现的合规性。确保字体单位（px vs rem）的转换规则在设计与开发之间达成一致。