One2x Figma2Code

https://www.npmjs.com/package/@one2x/figma2code
Admin
One2x Figma2Code is a core library and CLI tool that converts Figma designs into usable code with...
Tokens:3,907
Snippets:63
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Test CLI Tool Examples

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Examples of testing the CLI tool after installation or development.

```bash
# 测试 CLI 工具
npx figma2code hello
npx figma2code info
```

--------------------------------

### Install Package

Source: https://www.npmjs.com/package/%40one2x/figma2code

Command to install the package using npm.

```bash
npm i @one2x/figma2code
```

--------------------------------

### Usage Scenario Examples

Source: https://www.npmjs.com/package/%40one2x/figma2code

Examples demonstrating common development workflows, including incremental builds, clean builds, cleaning artifacts, watching for changes, type checking, testing the CLI, and publishing.

```bash
# 日常开发 - 快速增量构建
npm run build

# 遇到构建问题时 - 完全重新构建
npm run build:clean
# 或者使用别名
npm run rebuild

# 只需要清理构建产物
npm run clean

# 开发时监听文件变化
npm run dev          # 监听库文件变化
npm run dev:cli      # 监听 CLI 文件变化

# 发布前检查类型
npm run type-check

# 测试 CLI 工具
npx figma2code hello
npx figma2code info

# 发布包 (会自动运行 build:clean)
npm publish
```

--------------------------------

### Install @one2x/figma2code

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Install the package using npm. This is the first step to using the library or CLI tool.

```bash
npm install @one2x/figma2code
```

--------------------------------

### Common Usage Scenarios

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code

Examples of common development workflows including daily incremental builds, full rebuilds when issues arise, cleaning build artifacts, and monitoring file changes during development. Also includes commands for type checking before publishing.

```bash
# 日常开发 - 快速增量构建
npm run build
```

```bash
# 遇到构建问题时 - 完全重新构建
npm run build:clean
# 或者使用别名
npm run rebuild
```

```bash
# 只需要清理构建产物
npm run clean
```

```bash
# 开发时监听文件变化
npm run dev          # 监听库文件变化
npm run dev:cli      # 监听 CLI 文件变化
```

```bash
# 发布前检查类型
npm run type-check
```

```bash
# 测试 CLI 工具
npx figma2code hello
npx figma2code info
```

```bash
# 发布包 (会自动运行 build:clean)
npm publish
```

--------------------------------

### Install Type Generation Tool (Optional)

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Install the ts-json-as-const tool globally for enhanced TypeScript support when using the CLI.

```bash
# 安装类型生成工具（可选，用于更好的 TypeScript 支持）
npm install -g ts-json-as-const
```

--------------------------------

### Build All Contents (Library + CLI)

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Run the build command for daily development. It supports incremental builds and does not clean existing artifacts, resulting in faster build times.

```bash
# 运行构建命令
npm run build
```

--------------------------------

### Build Commands for @one2x/figma2code

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code

Utilize npm scripts for building the library and CLI tool. Commands like `build`, `build:lib`, `build:cli`, and `build:clean` offer different build strategies, from incremental updates to full clean builds.

```bash
npm run build
```

```bash
npm run build:lib
```

```bash
npm run build:cli
```

```bash
npm run build:clean
```

```bash
npm run rebuild
```

--------------------------------

### Build Commands

Source: https://www.npmjs.com/package/%40one2x/figma2code

Commands for building the library and CLI tool. Use `build` for incremental builds, `build:clean` or `rebuild` for a full clean build, and `build:lib` or `build:cli` for specific parts.

```bash
# 构建所有内容（库 + CLI）
# 支持增量构建，适合日常开发使用
# 不会清理已有的构建产物，构建速度较快
npm run build

# 只构建库部分
# 生成 `dist/index.js` (ES 模块) 和 `dist/index.cjs` (CommonJS 模块)
# 包含完整的类型声明文件
npm run build:lib

# 只构建 CLI 工具
# 生成 `dist/cli.js` 可执行文件
npm run build:cli

# 完全重新构建
# 先清理所有构建产物，再重新构建
# 确保构建结果完全干净，推荐在发布前使用
npm run build:clean

# `build:clean` 的别名
# 同 `build:clean`，符合社区惯例
npm run rebuild
```

--------------------------------

### Clean and Rebuild

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Perform a clean rebuild by first removing all build artifacts and then rebuilding. Recommended before publishing.

```bash
# 完全重新构建
npm run build:clean
# 或者使用别名
npm run rebuild
```

--------------------------------

### Use Figma2Code as a CLI Tool

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code

Execute Figma2Code commands via npx for various operations. This includes displaying welcome messages, package information, and help documentation. Use the --name flag to personalize the greeting.

```bash
# 显示欢迎信息和基础功能测试
npx figma2code hello
npx figma2code hello --name "张三"
```

```bash
# 显示包信息
npx figma2code info
```

```bash
# 显示帮助信息
npx figma2code --help
```

--------------------------------

### View build output structure

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=readme

The directory structure generated after running the build process.

```text
dist/
├── lib/                    # 库文件目录
│   ├── index.js           # ES 模块格式的库文件
│   ├── index.cjs          # CommonJS 模块格式的库文件
│   ├── index.d.ts         # 库的 TypeScript 类型声明
│   └── *.map              # Source Map 文件
└── bin/                    # CLI 工具目录
    ├── cli.js             # CLI 可执行文件
    └── cli.js.map         # CLI Source Map 文件
```

--------------------------------

### Publish Package

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Publish the package to the npm registry. This command automatically runs a clean build before publishing.

```bash
# 发布包 (会自动运行 build:clean)
npm publish
```

--------------------------------

### Use Figma2Code as a CLI Tool

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Execute Figma2Code commands via npx for various functionalities like displaying welcome messages, package info, or help.

```bash
# 显示欢迎信息和基础功能测试
npx figma2code hello
npx figma2code hello --name "张三"

# 显示包信息
npx figma2code info

# 显示帮助信息
npx figma2code --help
```

--------------------------------

### Build CLI Tool Only

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Build only the CLI tool, generating the executable file.

```bash
# 只构建 CLI 工具
npm run build:cli
```

--------------------------------

### Development Watch Mode for Library

Source: https://www.npmjs.com/package/@one2x/figma2code

Builds the library in watch mode, automatically recompiling when file changes are detected. Ideal for active development.

```bash
npm run dev
```

--------------------------------

### Development Commands for @one2x/figma2code

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code

Use `npm run dev` for watch mode builds, which automatically recompile the library or CLI when file changes are detected. This is ideal for active development cycles.

```bash
npm run dev
```

```bash
npm run dev:cli
```

--------------------------------

### Watch Mode Build for Library

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Enable watch mode for the library build. The library will automatically rebuild when file changes are detected.

```bash
# 监听模式构建库
npm run dev
```

--------------------------------

### Development Commands

Source: https://www.npmjs.com/package/%40one2x/figma2code

Commands for development that watch for file changes and automatically rebuild. Use `dev` for the library and `dev:cli` for the CLI tool.

```bash
# 监听模式构建库
# 文件变化时自动重新构建库部分
npm run dev

# 监听模式构建 CLI
# 文件变化时自动重新构建 CLI 部分
npm run dev:cli
```

--------------------------------

### Build Library Only

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Build only the library part, generating ES module and CommonJS module files along with type declarations.

```bash
# 只构建库部分
npm run build:lib
```

--------------------------------

### Use Figma2Code as a Library

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Import necessary components from the library to process Figma data. Requires Figma data as input.

```javascript
import { FigmaExtractor, RawFigmaTransformer, cfs } from '@one2x/figma2code';

// 使用示例
const componentSpec = RawFigmaTransformer.toComponentSpec(figmaData);
```

--------------------------------

### Other Development Commands

Source: https://www.npmjs.com/package/%40one2x/figma2code

Utility commands for cleaning build artifacts and performing TypeScript type checks.

```bash
# 清理构建产物
# 删除 `dist/` 目录下的所有文件
npm run clean

# TypeScript 类型检查
# 不生成文件，只检查类型错误
npm run type-check
```

--------------------------------

### Development Watch Mode for CLI

Source: https://www.npmjs.com/package/@one2x/figma2code

Builds the CLI tool in watch mode, automatically recompiling when file changes are detected. Useful for CLI development.

```bash
npm run dev:cli
```

--------------------------------

### Other Development Commands

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code

Manage build artifacts and check TypeScript types with `npm run clean` and `npm run type-check`. `clean` removes the `dist/` directory, while `type-check` performs static type analysis without generating files.

```bash
npm run clean
```

```bash
npm run type-check
```

--------------------------------

### Watch Mode Build for CLI

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Enable watch mode for the CLI build. The CLI tool will automatically rebuild when file changes are detected.

```bash
# 监听模式构建 CLI
npm run dev:cli
```

--------------------------------

### Clean Build Artifacts

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Remove all generated build files from the dist/ directory.

```bash
# 清理构建产物
npm run clean
```

--------------------------------

### TypeScript Type Checking

Source: https://www.npmjs.com/package/@one2x/figma2code

Runs TypeScript type checking without generating any files, useful for verifying type correctness before committing or releasing.

```bash
npm run type-check
```

--------------------------------

### TypeScript Type Checking

Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents

Perform TypeScript type checking without generating files. This command helps identify type errors.

```bash
# TypeScript 类型检查
npm run type-check
```
Tokens:
Raw