@directededges/specs-from-figma

中文文档
0.38.0发布于 2026/10/30PolyForm-Internal-Use-1.0.0TypeScriptES Module近 30 天下载 2万

Core data transformation model for Spectacular design specification tools

原始使用文档
文档目录14 节
  1. Overview
  2. Installation
  3. Usage
  4. Plugin environment
  5. CLI / REST API environment
  6. Public API
  7. Component
  8. Foundations map types
  9. Development
  10. Building
  11. Testing
  12. Version & Compatibility
  13. License
  14. Repository

@directededges/specs-from-figma

Figma → spec. Core data transformation model for Spectacular design specification tools: transforms raw Figma design data into structured, deterministic component specs (YAML/JSON). Used across CLI, MCP, and plugin environments.

Overview

@directededges/specs-from-figma provides:

  • Component Processing: Transform Figma design components into structured specifications
  • Runtime Abstractions: Platform-agnostic data loading and node resolution
  • Cross-Platform Support: Works in both Node.js (CLI/MCP) and Browser (Figma Plugin) environments

Installation

npm install @directededges/specs-from-figma

Usage

Plugin environment

import { Component } from '@directededges/specs-from-figma';

const component = await Component.fromPlugin(figmaNode, config);
console.log(component.yaml());

An optional coordinator and author can be passed as a third argument.

CLI / REST API environment

import { Component } from '@directededges/specs-from-figma';
import type { StylesMap, VariablesMap, CollectionsMap } from '@directededges/specs-from-figma';

const component = await Component.fromRestApi(
  libraryJson,   // raw REST API JSON
  componentId,   // component name or ID
  config,
  { styles, variables, collections }
);
console.log(component.yaml());

Both factory methods return a fully-processed Component. Call .yaml() for a YAML string or .json() for a plain object.

Public API

The public surface is intentionally minimal. All internal runtime and processing code is bundled and not re-exported.

Component

Main transformation class. Use the static factory methods — do not call new Component() directly.

MethodDescription
Component.fromPlugin(node, config, options?)Process a Figma Plugin API node
Component.fromRestApi(json, id, config, options)Process a component from REST API JSON
component.yaml()Returns a YAML string of the component specification
component.json()Returns a plain JavaScript object

Foundations map types

Used as the options payload for fromRestApi:

  • StylesMap — map of style IDs to style data
  • VariablesMap — map of variable IDs to variable data
  • CollectionsMap — map of collection IDs to collection data

Output schema types (e.g. Component from @directededges/specs-schema) are provided by the specs-schema package.

Development

Building

# Install dependencies
npm install

# Build the package
npm run build

# Build types only
npm run build:types

# Build JavaScript only
npm run build:js

Testing

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

Version & Compatibility

  • Pre-1.0 — breaking changes may occur in minor versions
  • Node.js: 20+ required
  • Target: ES2020
  • Module Format: ESM only

License

PolyForm Internal Use License 1.0.0

Repository

https://github.com/DirectedEdges/specs-transforms

版本与发布记录

@directededges/specs-from-figma 共发布 31 个版本,首次发布于 2026/04/06;过去 12 个月发布了 31 个版本。

版本发布日期距今
0.38.0latest2026/10/3013 天前
0.37.02026/10/2221 天前
0.36.02026/10/2122 天前
0.35.02026/10/2022 天前
0.34.02026/10/1428 天前
0.33.02026/09/231 个月前

关于 @directededges/specs-from-figma 的常见问题

@directededges/specs-from-figma 是什么?

Core data transformation model for Spectacular design specification tools

如何安装 @directededges/specs-from-figma?

在项目目录运行 npm install @directededges/specs-from-figma,或使用 pnpm add / yarn add / bun add。

@directededges/specs-from-figma 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@directededges/specs-from-figma 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@directededges/specs-from-figma 可以商用吗?

@directededges/specs-from-figma 使用 PolyForm-Internal-Use-1.0.0 许可。声明的许可为 PolyForm-Internal-Use-1.0.0,请阅读许可原文确认使用条件。以上为概括,不构成法律意见,请以许可原文为准。

@directededges/specs-from-figma 的下载量有多少?

根据 npm 官方下载统计,@directededges/specs-from-figma 在 2026/10/13 – 2026/11/11 这 30 天内被下载 20,141 次,日均约 671 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@directededges/specs-from-figma 还在维护吗?

最新版本 0.38.0 发布于 2026/10/30(13 天前);至今共发布 31 个版本,其中过去 12 个月发布了 31 个;首次发布于 2026/04/06。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。