Figma 中制作可滚动的地图180

Figma是一款流行的设计软件，它提供了广泛的功能来创建各种图形元素，包括可滚动的地图。本教程将指导您完成使用 Figma 制作可滚动的地图的逐步过程。

第 1 步：创建新文件

打开 Figma 并创建一个新文件。将文件大小调整为所需的尺寸，例如 1200 x 800 像素。

第 2 步：导入地图图像

从您的计算机导入地图图像。转到“文件”>“导入”并选择地图文件。图像将作为图层添加到您的画布中。

第 3 步：创建框架

创建一个框架（Frame）以放置您的地图。选择“框架”工具并绘制一个覆盖画布的矩形。确保框架较大，因为它将用作地图的容器。

第 4 步：添加滚动区域

选择框架并单击“约束”（Constraints）面板。在“滚动（Scroll）”下拉菜单中，选择“可垂直滚动（Scroll Vertically）”。这将允许您在垂直方向上滚动地图。

第 5 步：放置地图图像

将地图图像拖放到框架中。确保图像填充整个框架，并调整其位置以使其居中。

第 6 步：创建滚动条

创建两个矩形，一个用于滚动条轨道，另一个用于滚动条本身。轨道应该比滚动条宽，并且两者都应该垂直放置。

第 7 步：将滚动条连接到地图

选择滚动条并单击“连接”（Link）面板。在“目标（Target）”下拉菜单中，选择框架。这将使滚动条与地图图像同步，允许您使用滚动条滚动地图。

第 8 步：设置滚动条样式

根据需要调整滚动条的外观。选择滚动条本身并更改其颜色、宽度和圆角。

第 9 步：添加标记或其他元素

您可以添加标记、图标或其他元素来增强地图。使用 Figma 的各种工具来创建这些元素并将其添加到地图上。

第 10 步：预览和导出

单击“预览”按钮以查看可滚动的地图。根据需要进行任何必要的调整。完成设计后，您可以单击“导出”按钮以导出地图为图像或 PDF 文件。

提示：* 使用高分辨率的地图图像以获得最佳结果。
* 调整框架和地图图像的大小以确保地图适当地填充框架。
* 根据您的设计调整滚动条的外观和大小。
* 您还可以添加多个可滚动的地图，并使用选项卡或按钮在它们之间切换。

2025-01-13

上一篇：Figma 中全面调整比例的指南

下一篇：精通 Figma：掌握选区技巧的全面指南