FIGMA - Figma Design to Code Converter

Công cụ chuyển đổi thiết kế Figma sang nhiều định dạng mã nguồn khác nhau, được viết bằng TypeScript.

Cài đặt

Cài đặt toàn cục từ npm

npm install -g zp-figma-converter

Sau khi cài đặt, bạn có thể sử dụng lệnh figma từ bất kỳ đâu trong terminal.

Cài đặt từ mã nguồn

# Clone repository
git clone https://gitlab.zingplay.com/quangvd2/json2csd.git
cd json2csd

git checkout figma-converter

# Cài đặt dependencies
npm install

# Build project
npm run build

# Cài đặt toàn cục từ mã nguồn
npm link

Cấu hình

Tạo file .env trong thư mục gốc của dự án của bạn:

# Figma API Token - Bắt buộc
FIGMA_API_KEY=your_figma_api_key_here

# Figma API Base URL (tùy chọn)
FIGMA_API_BASE_URL=https://api.figma.com/v1

Cài đặt và cấu hình dotenv trong dự án của bạn:

npm install dotenv

Thêm đoạn code sau vào điểm khởi đầu của ứng dụng (ví dụ: index.js/ts):

import * as dotenv from 'dotenv';
dotenv.config();

Xây dựng

npm run build

Sử dụng

Cú pháp cơ bản

figma <output-format> <figma-file-key> [figma-node-id] [options]

Chuyển đổi file Figma sang CSD (Cocos Studio)

figma-csd <figma-file-key>

Chuyển đổi một node cụ thể của file Figma sang CSD

figma-csd <figma-file-key> <node-id>

Chỉ định thư mục đầu ra

figma-csd <figma-file-key> -o ./my-output-dir

Hiển thị thông tin chi tiết trong quá trình chuyển đổi

figma-csd <figma-file-key> -v

Lưu ý: Trước khi sử dụng, bạn cần:

Tạo file .env từ .env.example
Thêm Figma Access Token của bạn vào file .env

Cấu trúc dự án

src/: Thư mục chứa mã nguồn TypeScript
- figma/: Chứa các thành phần liên quan đến API Figma
- converters/: Chứa các bộ chuyển đổi sang các định dạng khác nhau
- utils/: Tiện ích xử lý file, XML, etc.
output/: Thư mục chứa file đầu ra
output/assets/: Thư mục chứa hình ảnh được tải về từ Figma
dist/: Thư mục chứa mã biên dịch

Các định dạng đầu ra được hỗ trợ

csd: Cocos Studio Document
Các định dạng khác sẽ được bổ sung trong tương lai

Chuyển đổi Figma sang CSD

Các loại node Figma được hỗ trợ

RECTANGLE → ImageViewObjectData
TEXT → TextObjectData
FRAME / GROUP → PanelObjectData
VECTOR / ELLIPSE / STAR / LINE / REGULAR_POLYGON / BOOLEAN → SpriteObjectData
Others → SingleNodeObjectData

Cách lấy Figma Access Token

Đăng nhập vào tài khoản Figma của bạn
Truy cập Settings > Personal Access Tokens
Tạo token mới và lưu vào file .env

Hướng dẫn mở rộng

Thêm định dạng đầu ra mới

Tạo converter mới trong thư mục src/converters/
Đăng ký converter mới trong FigmaConverter
Cập nhật danh sách SUPPORTED_FORMATS trong file CLI
Cập nhật README với thông tin về định dạng mới

Giấy phép

ISC

Package detail

zp-figma-converter

readme