如何在 Figma 中设计完全响应式卡片

Figma 中的响应式调整允许设计人员根据特定条件调整设计中对象的大小，例如设备屏幕的大小或浏览器窗口的大小。这使得创建在任何设备上看起来都很棒的设计变得容易，无论屏幕尺寸或分辨率如何。

Figma 提供了一套强大而灵活的工具来创建响应式设计，使其成为需要创建在任何设备上看起来都很棒的设计的设计师和开发人员的热门选择。

在本文中，我将指导您如何设计完全响应式卡片。通过它，您将深入了解 Figma 中的自动布局和约束，并将它们应用到您的设计中。

响应式设计

响应式设计是一种设计方法，它允许用户界面通过使用响应式设计元素动态适应不同的屏幕尺寸和分辨率，以便在任何设备上获得最佳用户体验。网格系统，图像和文本的比例。响应式设计在网页设计中变得非常必要，当设备数量和不同屏幕尺寸诞生时。响应式设计也是SEO的标准之一，至少可以在桌面和移动设备上很好地显示。通过使用响应式设计，desinger 和开发团队可以在所有设备上提供一致的用户体验，包括台式机、笔记本电脑、平板电脑和智能手机。

自动布局和约束

Figma 中的自动布局是一项功能，使设计人员能够轻松创建响应式设计。通过在设计中设置对对象的约束，设计人员可以控制元素相对于页面上其他元素的大小和位置。这简化了设计过程，并减少了创建响应式设计所需的手动工作量。

Figma 中的约束确定元素之间的关系，并控制它们如何响应设计中的更改，确保元素即使在设计更改时也能保持相对于其他元素的大小和位置。可以使用约束编辑器设置约束，该编辑器提供了用于设置约束的可视化界面。通过在 Figma 中设置约束，设计人员可以创建灵活的自适应设计，以适应不同的屏幕尺寸和分辨率，以实现最佳的用户体验。

我在 Figma 中写了关于自动布局和约束的文章，你可以在这里阅读

卡片设计

UI 设计中的卡片是指包含内容和视觉元素（如文本、图像和按钮）的容器。它们是用户界面设计中流行的设计元素，因为它们提供了一种简单而有条理的方式来显示信息。卡片通常用于移动和网页设计中，以紧凑且易于理解的方式呈现信息或内容。在设计方面，卡片是矩形的，具有定义的宽度和高度、边框和投影，这使它们具有升高和升高的外观。卡片中的内容通常对齐和间隔一致，从而创建干净有序的外观。卡片具有灵活性和适应性，使其适用于各种用例，并且随着Material Design和其他设计系统的兴起而变得越来越流行。

我在UI设计中写了大约4张流行的卡片，你可以在这里阅读

开始设计完全响应式卡片

现在我们将设计一张在设计中会遇到很多的卡片，那就是产品卡。

成分通常在 1 张产品卡中

以上都是构成卡片的单个小组件，我们必须设置自动布局和约束系统，以便它们对任何大小或变化做出反应。实际上，您的产品卡会有所不同，更复杂或更简单的信息，希望从上述组件中您可以使它们适应您的设计

每个组件

必须先为整个卡创建一个框架。卡片的大小取决于您正在设计的 Web 或应用程序的屏幕大小。不要忘记为框架卡添加自动布局！在这里，我正在创建一个具有白色背景和 12px 填充的框架。

1. 图片

为了构图，您需要使用 Figma 的遮罩功能将图像填充到某个帧中，这样即使您上传任何大小的图像，它仍然会在预定义大小的帧中就位。

在这里，我希望图像根据卡片的宽度和高度进行缩放，因此我将水平和垂直的调整大小参数设置为填充容器。

2. 标题（产品名称）

带有产品标题通常会以1或2行显示，这里我将显示最长的2行。如果产品名称超过 2 行，它将自动显示“...“，所以我将标题的大小调整设置为 truncate 文本。

因为宽度会根据卡片的宽度进行填充，所以我将标题的大小调整设置为填充容器。

垂直将保持 2 行的最大高度，因此我将标题的大小调整设置为固定高度。

3.价格和数量

使用价格和数量选项，将不需要缩放大小。当卡片宽度增加时，价格将向左对齐，而自定义数量将向右对齐。对于这种响应性设置，您需要将自动布局财产间距模式设置为间距。

4. 说明

与标题（产品名称）类似，但描述的文本长度较长，因此这里无需硬固定 2 行的高度，而是会缩放容器的宽度和高度。因此，将描述重新调整为宽度和高度的填充容器。此外，文本部分还具有调整大小为截断文本的功能。

5. 号召性用语按钮 （CTA）

使用 CTA 按钮部分，我们需要根据卡片的宽度缩放 2 个按钮的宽度。与上述类似，我们还将这两个按钮的大小调整设置为填充容器。

但是 2 个按钮在另一个框架中，所以要缩放这 2 个按钮，父框架也必须缩放，所以我们也设置为填充容器。

我们刚刚完成了具有完全响应能力的产品卡的设计。让我们看看结果！

总结

要设计完全响应式卡片，您需要了解响应式设计的概念以及如何在 Figma 中使用自动布局和约束。

通过在 Figma 中设置约束、调整大小和使用自动布局，您可以创建一个完全响应的卡片，该卡片将适应不同的屏幕尺寸和分辨率，以获得最佳用户体验