Figma Extension

A VS Code extension that provides seamless integration with Figma, offering HTML export capabilities and design-to-code workflows.

Features

• Server Management: Start, stop, and manage a local server for Figma integration
• HTML Export: Export Figma designs to HTML/CSS with metadata
• File Explorer: Browse and manage exported Figma files within VS Code
• Preview Panel: Preview exported HTML directly in VS Code
• Status Bar Integration: Quick access to server status and controls

Requirements

• VS Code version 1.103.0 or higher
• Node.js (for running the local server)

Extension Settings

This extension contributes the following settings:

• figma.server.port: Port number for the local server (default: 3000)
• figma.server.autoStart: Automatically start server when VS Code opens
• figma.server.allowedOrigins: Allowed origins for CORS configuration
• figma.server.exportPath: Path to save exported files (default: ./figma-exports)

Usage

1. Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux)
2. Type "Figma" to see available commands
3. Use "Figma: Start Server" to begin the local server
4. Export your Figma designs and they will appear in the Figma Explorer panel

Known Issues

• Server may take a few seconds to start on first launch
• Large Figma exports may require additional processing time

Release Notes

0.0.1

Initial release with basic Figma integration features:

• Local server management
• HTML export functionality
• File explorer integration
• Preview capabilities