Figma自动布局和约束，如何设计完全响应式卡片

2023-07-0215:12:32UI设计Comments3,347 views字数 2054阅读模式

今天，咱们来扒一扒卡片设计，还是先来介绍一下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

在页面设计中，自适应设计已成为必需品，因为现代设备种类繁多，屏幕尺寸也各不相同。通过使用自动布局，设计师和开发团队可以在所有设备上提供一致的用户体验，包括台式机、笔记本电脑、平板电脑和智能手机。卡片设计是响应式设计中常用的一种方法，用于在紧凑且易于理解的方式下呈现信息或内容。卡片通常用于移动和网页设计中，其具有定义宽度和高度、边框和投影等特征，使其具有升高和升高的外观。设计师可以通过自动布局和约束来排列卡片中的元素，以创建干净、有序的外观。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

在本节教程中，我将展示如何使用软件来创建完全响应式的卡片设计。通过讲解，希望帮助大家能深入的了解Figma的自动布局和约束，并且熟练的在自己的设计中运用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

今天的案例我使用的软件是Master GO。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

响应式设计

当用户界面在各种设备和屏幕尺寸之间切换时，响应式设计手法就会动态的调整布局和样式，方便在任何设备上提供让用户最舒适的用户体验。这可以通过使用具有弹性布局实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

响应式设计是非常必要，因为现代设备种类繁多，屏幕尺寸也各不相同。如果设计师为每种设备创建单独的设计版本是不切实际的。怕是得累死。通过使用响应式设计，可以在所有设备上提供一致的用户体验，包括台式机、笔记本电脑、平板电脑和智能手机。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

通过使用响应式设计，设计人员和开发团队可以在所有设备上提供一致的用户体验，并且大大的提高了工作效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

自动布局和约束

自动布局和约束是主流UI设计软件（我们文章中以Figma做代表）中创建响应式设计的两个关键概念。自动布局是一种设计方法，通过使用自适应间距（或称弹性布局）来调整元素在页面上的位置和大小。这种方法可以根据屏幕尺寸和分辨率的改变动态地调整设计，从而确保在各种设备上都能提供最佳用户体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

约束是Figma中用于控制元素相对于其他元素的大小和位置的一种机制。通过设置约束，可以控制元素之间的相对位置和大小，确保它们在面对设计中的变化时能保持相对位置不变。约束可以防止设计因不同的屏幕尺寸或分辨率而变得混乱或散乱。它们可以帮助确保设计元素始终保持在预期的位置上，同时允许设计自适应并扩展以适应不同的设备。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

卡片设计

UI 设计中的卡片是指包含内容和视觉元素（例如文本、图像和按钮）的容器。它们是用户界面设计中流行的设计元素，因为卡片提供了一种简单而有组织的方式来显示信息。卡片通常用于移动和网页设计，以紧凑且易于理解的方式呈现信息或内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

在设计方面，卡片是矩形的，具有定义的宽度和高度、边框和阴影，使它们具有空间感和提升的外观。卡片中的内容通常对齐且间隔一致，营造出干净有序的外观。卡片灵活且适应性强，适用于各种模块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

响应式卡片设计

下面我们来看张图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

上面是构成卡片的各个小组件，我们只有设置了一个自动布局和约束系统，才可以对任何大小或变化做出反应。咱们就是提供了一个卡片的样式模板，具体在产品中样式有所不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

每个组件

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

做自动布局还是约束，我们都需要首先考虑屏幕尺寸和设备类型。尺寸框架的大小应该根据设计的网页或界面尺寸（以iPhone 为例）的屏幕大小来确定，以便在不同设备上呈现时都能清晰地显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

在这里，我正在创建一个具有白色背景和 12px 填充的框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

1. figma卡片设计

给figma卡片设计加一个蒙版，给figma卡片设计加框，这样的话后期换任何figma卡片设计，尺寸都是固定的。如果我想让figma卡片设计根据卡片的高度和宽度进行缩放的话，就需要把水平和垂直的调整参数设置为fill container。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49287.html