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/
├── src/
│   ├── index.js
│   ├── api.js
│   ├── utils.js
├── gatsby-config.js
├── package.json
├── README.md

• src/: 包含项目的主要源代码。
  • index.js: 项目的入口文件。
  • api.js: 处理与 Figma API 的交互。
  • utils.js: 包含一些辅助函数。
• gatsby-config.js: 项目的配置文件。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件负责初始化插件并设置与 Figma API 的连接。以下是 index.js 的主要内容：

const { createFigmaApi } = require('./api');
const { getConfig } = require('./utils');

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }, configOptions) => {
  const { createNode } = actions;
  const config = getConfig(configOptions);
  const figmaApi = createFigmaApi(config.accessToken);

  // 获取 Figma 文件数据并创建节点
  const fileData = await figmaApi.getFile(config.fileId);
  createNode({
    ...fileData,
    id: createNodeId(`Figma-${fileData.id}`),
    internal: {
      type: 'FigmaDocument',
      contentDigest: createContentDigest(fileData),
    },
  });
};

3. 项目的配置文件介绍

项目的配置文件是 gatsby-config.js。这个文件用于配置 Gatsby 插件的选项。以下是 gatsby-config.js 的主要内容：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-figma`,
      options: {
        fileId: `YOUR_FIGMA_FILE_ID`,
        accessToken: `YOUR_FIGMA_ACCESS_TOKEN`,
      },
    },
  ],
};

• fileId: Figma 文件的 ID。
• accessToken: 从 Figma 账户设置中获取的访问令牌。

通过这个配置文件，你可以指定要获取的 Figma 文件以及访问该文件所需的令牌。

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