Gatsby-source-figma 项目常见问题解决方案

Gatsby-source-figma 项目常见问题解决方案

gatsby-source-figma 🍭 Gatsby plugin for using Figma documents as a data source. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-source-figma

1. 项目基础介绍

gatsby-source-figma 是一个用于 Gatsby 静态站点生成器的插件，它允许开发者将 Figma 文档作为数据源。通过该插件，用户可以轻松地将 Figma 文件中的设计数据（如图层、组件和样式）导入到 Gatsby 站点中。该项目的编程语言主要使用 JavaScript。

2. 新手常见问题及解决方案

问题一：如何安装和使用 gatsby-source-figma 插件？

解决方案：

1. 确保你已经安装了 Node.js 和 Gatsby CLI。
2. 在你的 Gatsby 项目根目录下，运行以下命令安装插件：

   yarn add gatsby-source-figma
   

3. 在 gatsby-config.js 文件中，添加以下配置：

   plugins: [
     {
       resolve: `gatsby-source-figma`,
       options: {
         fileId: `FIGMA_FILE_ID`, // 替换为你的 Figma 文件 ID
         projectId: `FIGMA_PROJECT_ID`, // 替换为你的 Figma 项目 ID
         accessToken: `YOUR_FIGMA_ACCESS_TOKEN`, // 在 Figma 设置中创建访问令牌
       },
     },
   ]
   

问题二：如何查询 Figma 文件中的数据？

解决方案：

1. 在 gatsby-config.js 中配置好 gatsby-source-figma 插件后，你可以使用 GraphQL 查询 Figma 文件中的数据。
2. 在 gatsby-browser.js 或其他适合的地方，运行以下 GraphQL 查询：

   query StyleguideQuery {
     figmaDocument {
       name
       lastModified
       thumbnailUrl
       pages {
         name
         children {
           name
         }
       }
     }
   }
   

问题三：如何获取 Figma 文件中的图像？

解决方案：

1. 在 gatsby-config.js 中配置好 gatsby-source-figma 插件后，使用以下查询结构来获取图像：

   query ImageQuery {
     allFigmaImage {
       nodes {
         id
         image
       }
     }
   }
   

2. 确保 gatsby-config.js 中的插件配置包含了 nodeIds 和 scale（可选）：

options: { fileId: FIGMA_FILE_ID, nodeIds: ['NODE_ID'], // 替换为你的 Figma 节点 ID scale: 2, // 图像缩放因子（可选） }

3. 使用查询结果中的 `image` 字段获取图像 URL。

gatsby-source-figma 🍭 Gatsby plugin for using Figma documents as a data source. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-source-figma