zp-figma-converter
Version:
Convert Figma designs to various code formats
160 lines • 6.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FigmaController = void 0;
const path = __importStar(require("path"));
const figma_api_1 = require("./figma-api");
const figma_node_parser_1 = require("./figma-node-parser");
const csd_converter_1 = require("../converters/csd/csd-converter");
/**
* Controller for Figma to CSD conversion
* Acts as a facade for the entire conversion process
*/
class FigmaController {
/**
* Create a new Figma controller
* @param fileKey Figma file key
* @param outputDir Directory to save output files
*/
constructor(fileKey, outputDir = 'output') {
this.fileKey = fileKey;
this.outputDir = path.join(outputDir);
this.assetsDir = path.join(outputDir, 'assets');
this.figmaApi = new figma_api_1.FigmaApi();
this.parser = new figma_node_parser_1.FigmaNodeParser(this.assetsDir);
// Register converters
this.converters = new Map();
this.converters.set('csd', new csd_converter_1.CsdConverter());
// Add more converters here (e.g., 'cocos-creator', 'godot')
}
/**
* Convert a Figma node to a specific format
* @param nodeId Node ID
* @param format Target format (e.g., 'xml', 'csd')
* @param outputPath Output file path (optional)
* @returns Path to the generated file
*/
convertNode(nodeId, format, outputPath) {
return __awaiter(this, void 0, void 0, function* () {
// Validate converter
const converter = this.converters.get(format);
if (!converter) {
throw new Error(`Unsupported format: ${format}`);
}
// Get node data
const node = yield this.getNode(nodeId);
// Parse node to intermediate representation
const intermediateNode = this.parser.parse(node);
// Export assets (images)
const imageNodes = this.collectImageNodes(intermediateNode);
if (imageNodes.length > 0) {
yield this.downloadAssets(imageNodes.map(n => ({ id: n.id, filePath: n.imageRef.replace('.png', '') })), 'png');
}
// Generate output path if not provided
const finalOutputPath = outputPath || this.generateOutputPath(node.name, converter.getExtension());
// Convert to target format
yield converter.convert(intermediateNode, finalOutputPath);
return finalOutputPath;
});
}
/**
* Collect nodes with image references
* @param node Intermediate node
* @returns List of nodes with images
*/
collectImageNodes(node) {
const imageNodes = [];
if (node.imageRef) {
imageNodes.push(node);
}
for (const child of node.children) {
imageNodes.push(...this.collectImageNodes(child));
}
return imageNodes;
}
/**
* Download assets from Figma
* @param nodeIds List of node IDs to download
* @param format Image format (png, svg, jpg)
* @returns List of downloaded file paths
*/
downloadAssets(nodeIds_1) {
return __awaiter(this, arguments, void 0, function* (nodeIds, format = "png") {
return this.figmaApi.downloadImages(this.fileKey, nodeIds, format);
});
}
/**
* Get file info from Figma
* @returns Figma file data
*/
getFileInfo() {
return __awaiter(this, void 0, void 0, function* () {
return this.figmaApi.getFile(this.fileKey);
});
}
/**
* Get specific node from Figma
* @param nodeId Node ID
* @returns Figma node data
*/
getNode(nodeId) {
return __awaiter(this, void 0, void 0, function* () {
return this.figmaApi.getNode(this.fileKey, nodeId);
});
}
/**
* Create default output file path
* @param baseName Base name for file
* @param outputDir Output directory (default: 'csd')
* @param extension File extension (default: '.csd')
* @returns Generated file path
*/
generateOutputPath(baseName, extension = ".csd") {
// Sanitize file name (remove special characters)
const sanitizedName = baseName.replace(/[^a-zA-Z0-9_\-]/g, "_");
return path.join(this.outputDir, `${sanitizedName}${extension}`);
}
}
exports.FigmaController = FigmaController;
//# sourceMappingURL=figma-controller.js.map