Figma 自动布局做响应式卡片组件:3个断点一套规则(可直接照做)

你将得到什么

目标:做一个常见「图 + 标题 + 描述 + 按钮」的卡片组件,满足三件事:

1)宽度可拉伸(容器变宽时内容自适应);2)内容可增减(描述多一行不炸);3)三档尺寸(S/M/L)一键切换。

全程只用 Figma 原生 Auto Layout + Resizing,不需要插件。

准备:先确定结构与规则

建议先写下结构(从外到内):Card(外框) → Header(图) → Body(文本组) → Actions(按钮)。

规则只记两条就够:外层负责「间距与对齐」,内层负责「填充与换行」。

Step 1:搭外框 Card(决定拉伸行为)

1)新建 Frame,命名 Card,按 Shift+A 变 Auto Layout(竖向)。

2)Padding:16/16/16/16;Item spacing:12;Alignment:Left。

3)在右侧 Resizing 里设置:Width = Fill container(后面放到容器里可拉伸),Height = Hug contents

4)外观:填充白色;描边 1px #E6E8EB;圆角 12;阴影可选(尽量轻)。

Step 2:做图片区 Header(固定高、宽度跟随)

1)在 Card 里插入一个 Frame,命名 Header,设置高度 160(可按需改)。

2)把 Header 也设成 Auto Layout(可不加内容时也保持),Resizing:Width = Fill containerHeight = Fixed

3)放一张矩形当占位图:Resizing 设为 Fill container;角标或渐变可当作装饰层。

Step 3:做文本区 Body(让文本自然换行)

1)插入 Frame 命名 Body,Auto Layout(竖向),Item spacing 6;Resizing:Width = Fill container,Height = Hug contents。

2)放标题文本 :设置为 Hug contents;建议开启 Auto height,字号 16-18。

3)放描述文本 Desc:关键点是让它能换行但不撑爆:文本框宽度设为 Fill container,高度 Auto height。

4)如果你希望最多两行:在文本属性里把 Line clamp 设为 2(没有就用固定高度 + overflow hidden 的方案,但更推荐原生 clamp)。

Step 4:做按钮区 Actions(按钮在不同宽度下保持稳定)

1)插入 Frame 命名 Actions,Auto Layout(横向),对齐 Right,Item spacing 8。

2)Actions 的 Resizing:Width = Fill container,Height = Hug contents。

3)做一个 Button 组件(建议先单独做):Auto Layout(横向),Padding 10/14,圆角 10。文字 Hug,按钮 Width = Hug。

4)把按钮放进 Actions:当 Card 变宽时,按钮会靠右,但不会被拉宽。

Step 5:做三档尺寸(S/M/L)

1)选中 Card,创建 Component(Ctrl+Alt+K)。

2)创建 Variant:Size = S / M / L。

3)三档只改这三类值:Padding(12/16/20)、Header 高度(140/160/180)、标题字号(16/18/20)。

4)不要为每个尺寸改布局结构;结构保持一致,才能真正复用。

常见踩坑与快速排查

问题1:卡片拉伸时文字不换行 → 检查 Desc 文本是否 Width=Fill container,且文本是 Auto height。

问题2:按钮被拉得很宽 → Button 组件 Width 应为 Hug,不要 Fill。

问题3:高度越叠越怪 → 外层应 Height=Hug contents,避免 Fixed 把内容挤压。

问题4:间距不一致 → 只在外层控制 padding/spacing,别在内层再加一堆空白 Frame。

建议的命名与交付

组件名:Card / Content;变体:Size=S|M|L。如果还有状态(默认/悬停/禁用),再加 State 维度即可。

完成后把 Card 放进组件库页面,并写一行使用说明:适用场景、最小宽度建议(例如 240px)。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功