Gatsby 是一款基于 React 的静态网站生成器，它以驾驭 Webpack 和 GraphQL 为特点，被越来越多的开发者使用。而 Figma 是一款设计师和团队配合所使用的设计工具，它提供了快捷的界面设计和自动化的协作方式。今天我将分享如何使用 npm 包 gatsby-source-figma，在 Gatsby 中获取 Figma 中的设计元素并将其呈现在我们的页面中。
安装 gatsby-source-figma
在我们的 Gatsby 项目中添加 gatsby-source-figma 是非常容易的。首先，在你的项目中打开控制台，输入以下命令：
npm install gatsby-source-figma
配置你的 Figma API 密钥
在你可以开始使用 gatsby-source-figma 之前，你需要在 Figma 上创建一个 API 密钥。这个密钥将给予 Gatsby 访问 Figma 的权限。下面是如何获取 API 密钥：
- 登录到 Figma。
- 进入你的 "账户和设置" 页面。
- 在菜单中选择 "开发者设置"。
- 点击 "创建新的 API 密钥"。
- 给你的 API 密钥命名，并记下它的值。请注意，Figma 只会在创建时显示一次 API 密钥。如果你忘记了它，你需要创建一个新的 API 密钥。
将 Figma API 密钥添加到 Gatsby 的配置文件中。配置文件通常位于项目根目录中，并命名为 gatsby-config.js。在该文件中添加以下内容：
-- -------------------- ---- -------
--------------------------
-------------- - -
-------- -
-
-------- ----------------------
-------- -
------------ -------------------------------
--
--
--
-这个配置告诉 Gatsby 在构建网站时从 Figma 中获取设计元素，并将它们添加到 GraphQL 数据层级中。我们将访问 Figma API 密钥，它被定义在 .env 文件中。我们使用 dotenv 将 .env 文件中的变量添加到进程中。请确保在项目中安装 dotenv 依赖。
查询 Figma 中的数据
我们已经在 GraphQL 层中添加了 Figma 的数据，现在我们需要查询它们。在项目文件 src/pages/index.js 中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- ---------------
------ ------- -- ---- -- -- -
---------------------------------
------ -
-----
---- ------------------------------------------------- --
------
--
--
------ ----- ----- - --------
----- -
-------------- -
--------------- -
----- -
------------------------
-
-
-
-
--在上述代码中，我们引入了 Image 组件并查询了 Figma 中的一个矩形元素。我们使用 fluid 查询得到了一个带有响应式图像的 figmeRectangle 数据节点，并将其传递给 Image 组件来显示在页面中。
使用 HTML 和 CSS 样式
这是 Gatsby 最强大也是最丰富的一些特性之一。你可以使用常规的 HTML 和 CSS 样式呈现 Figma 中的设计元素。例如，你可以在项目文件 src/styles/global.css 中添加以下样式：
.box {
width: 100%;
background-color: #ffffff;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
border-radius: 10px;
overflow: hidden;
}接下来，我们将在项目文件 src/pages/index.js 中添加以下代码来应用这个样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- ---------------
------ -----------------------
------ ------- -- ---- -- -- -
---------------------------------
------ -
---- ----------------
---- ------------------------------------------------- --
------
--
--
------ ----- ----- - --------
----- -
-------------- -
--------------- -
----- -
------------------------
-
-
-
-
--这个示例演示了如何使用常见的 HTML 和 CSS 样式来呈现 Figma 设计元素。你可以通过结合 Gatsby 和 Figma 很容易地构建自己的 Web 设计项目。
总结一下，我们在这篇文章中介绍了如何使用 npm 包 gatsby-source-figma，这是一个用于在 Gatsby 项目中获取 Figma 设计元素的有效工具。我们还学习了如何在我们的项目中使用 HTML 和 CSS 样式来定制页面，并提供了一个实际的示例。希望这篇文章能够帮助你开始在 Gatsby 中使用 Figma，并构建一个惊人的 Web 设计项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80036