多屏幕适配是UI设计师最高频的需求之一——做完桌面版要适配平板和手机，甲方随时可能说“帮我看看在iPad上什么样”。在Figma里实现多屏适配，不是单一功能能搞定的，需要约束、自动布局、响应式文本样式、变体和变量五步配合。
一、约束（Constraints）：自动布局的前身
约束是Figma最基础的响应式工具，定义图层在父容器缩放时的锚定行为——固定在左侧、右侧、顶部、底部，或者拉伸。
简单说就是：你告诉Figma“这个按钮永远贴在右下角”“这个标题永远居中”“这个背景永远铺满”——父容器变大的时候，这些元素按照你的规则自动调整位置和大小。
不过约束在目前的使用场景已经不太多了。它适合画布可能会拉伸的场景，但真正的复杂响应式布局需要配合自动布局使用。
二、自动布局：构建弹性容器
自动布局负责构建弹性容器结构。把页面拆分成多个自动布局画板层层嵌套，每个画板设定好排列方向、间距、内边距和缩放行为。当父容器尺寸变化时，子元素按照设定的规则自动重新排列和缩放。
关键技巧：用Fill让子元素填满父容器，用Hug让父容器包裹子元素，用Fixed保持固定尺寸。
三、响应式文本样式：字体跟着屏幕走
在不同屏幕尺寸下，文字大小应该不同——手机上正文16px够用，桌面端可能需要18px甚至20px。Figma支持为不同断点分别设置文本样式。
操作方法是：在文本样式中添加断点，为每个断点分别设置字号、行高、字间距和段落间距。实际项目中，通常为Desktop（1440px）、Tablet（768px）、Mobile（375px）三个断点分别创建文本样式。
更高级的做法是用变量（Variables）+模式（Modes）实现响应式排版。创建一个变量集，添加Phone、Tablet、Desktop三个模式，每个模式下设定不同的字号值。然后把变量绑定到文本图层的字号属性上——切换模式，所有文字自动切换到对应的字号。
四、变体（Variants）+变量（Variables）：组件级的响应式
在Figma Sites中，可以创建响应式组件，在特定断点时自动切换到对应的正确变体。结合变量模式，可以实现组件在不同屏幕尺寸下自动切换样式。
五、Figma Sites：真正的断点支持
2025年Config大会上，Figma发布了Figma Sites（开放测试版）。在Figma Sites中，可以真正添加和编辑网页断点。如果设计使用了自动布局，Figma会在新的断点尺寸下自动调整布局。
不过需要注意：断点功能目前仅在Figma Sites中提供，Figma Design工具本身还没有。
六、实操建议
按五步走：建响应式画布与设计系统；用自动布局封装可复用组件；标注样式与交互状态；导出切图及代码；校验一致性。在真实设备上测试，不要只在浏览器模拟器里看效果。