figspec

Unofficial static Figma frame/file viewer available as HTML CustomElement

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
import { program } from "commander";
import * as dotenv from "dotenv";
import * as Figma from "figma-js";
import * as fs from "fs/promises";
import * as path from "path";
import { URL, fileURLToPath } from "url";

import pkg from "../../package.json" assert { type: "json" };

import { fetchFile } from "./fetchFile.mjs";
import { fetchNode } from "./fetchNode.mjs";

const isFigmaURL = (url) =>
  /https:\/\/([w.-]+.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.test(
    url
  );

program
  .version(pkg.version)
  .option("-o, --outDir <outDir>", "Directory to download", process.cwd())
  .option("-t, --token <token>", "Personal Access Token for Figma API")
  .option("-u, --url <url>", "Figma file/node url to fetch")
  .option("--pretty", "Pretty print JSON");

async function main() {
  const token = program.token || process.env.FIGMA_TOKEN;

  if (!token) {
    console.error("Personal Access Token is required.");
    process.exit(1);
  }

  if (!program.url) {
    console.error("File/Node url is required.");
    process.exit(1);
  }

  if (!isFigmaURL(program.url)) {
    console.error("The URL is not a valid Figma URL.");
    process.exit(1);
  }

  const url = new URL(program.url);

  const fileKey = url.pathname.split("/")[2];
  const nodeId = url.searchParams.get("node-id") || null;

  const figma = Figma.Client({
    personalAccessToken: token,
  });

  const files = await (async () => {
    if (nodeId) {
      const node = await fetchNode(figma, fileKey, nodeId);

      return [
        {
          filename: `${nodeId}.json`,
          data: program.pretty
            ? JSON.stringify(node.response, null, 2)
            : JSON.stringify(node.response),
        },
        {
          filename: `${nodeId}.svg`,
          data: node.image,
        },
      ];
    }

    const file = await fetchFile(figma, fileKey);

    return [
      {
        filename: "file.json",
        data: program.pretty
          ? JSON.stringify(file.response, null, 2)
          : JSON.stringify(file.response),
      },
      ...file.images.map((image) => ({
        filename: `${image.nodeId}.svg`,
        data: image.data,
      })),
    ];
  })();

  const outDir = path.resolve(
    path.isAbsolute(program.outDir)
      ? program.outDir
      : path.resolve(process.env.INIT_CWD, program.outDir),
    fileKey
  );

  try {
    await fs.rmdir(outDir, {
      recursive: true,
    });
  } catch (err) {
    // Ignore when the dir does not exist
    if (err.code !== "ENOENT") {
      throw err;
    }
  }

  await fs.mkdir(outDir, {
    recursive: true,
  });

  await Promise.all(
    files.map(async (file) => {
      // Node IDs returned by Figma API contains `:` character. In many operating system,
      // filename can include this. However, Windows (or NTFS?) cannot so we need to escape it.
      // See <https://github.com/pocka/figspec/issues/27> for the context.
      const safeFilename = file.filename.replace(/:/g, "-");

      await fs.writeFile(path.resolve(outDir, safeFilename), file.data);
    })
  );
}

dotenv.config({
  path: path.resolve(
    path.dirname(fileURLToPath(import.meta.url)),
    "../../.env"
  ),
});
program.parse();
main().catch((err) => {
  console.error(err);
  process.exit(1);
});