@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
169 lines • 4.02 kB
TypeScript
import type { AnalyzedComponent } from './types';
/**
* Export components to Figma format
*/
export declare function exportToFigma(components: AnalyzedComponent[], options?: FigmaExportOptions): FigmaDocument;
/**
* Export to Figma JSON file
*/
export declare function exportToFigmaFile(components: AnalyzedComponent[], outputPath: string, options?: FigmaExportOptions): Promise<void>;
/**
* Convert CSS color to Figma color
*/
export declare function cssColorToFigma(cssColor: string): FigmaColor;
/**
* Convert Figma color to CSS
*/
export declare function figmaColorToCss(color: FigmaColor): string;
/**
* Generate Figma plugin manifest
*/
export declare function generateFigmaPluginManifest(name: string): object;
/**
* Generate Figma import code snippet
*/
export declare function generateFigmaImportCode(components: AnalyzedComponent[]): string;
/**
* Figma color
*/
export declare interface FigmaColor {
r: number
g: number
b: number
a: number
}
/**
* Figma paint (fill/stroke)
*/
export declare interface FigmaPaint {
type: 'SOLID' | 'GRADIENT_LINEAR' | 'GRADIENT_RADIAL' | 'IMAGE'
color?: FigmaColor
opacity?: number
}
/**
* Figma text style
*/
export declare interface FigmaTextStyle {
fontFamily: string
fontWeight: number
fontSize: number
lineHeight?: { value: number, unit: 'PIXELS' | 'PERCENT' | 'AUTO' }
letterSpacing?: { value: number, unit: 'PIXELS' | 'PERCENT' }
textAlign?: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED'
}
/**
* Figma node base
*/
export declare interface FigmaNodeBase {
id: string
name: string
type: FigmaNodeType
visible?: boolean
locked?: boolean
}
/**
* Figma frame node
*/
export declare interface FigmaFrameNode extends FigmaNodeBase {
type: 'FRAME' | 'COMPONENT' | 'COMPONENT_SET'
children: FigmaNode[]
absoluteBoundingBox?: { x: number, y: number, width: number, height: number }
constraints?: { horizontal: string, vertical: string }
fills?: FigmaPaint[]
strokes?: FigmaPaint[]
strokeWeight?: number
cornerRadius?: number
paddingLeft?: number
paddingRight?: number
paddingTop?: number
paddingBottom?: number
itemSpacing?: number
layoutMode?: 'NONE' | 'HORIZONTAL' | 'VERTICAL'
primaryAxisAlignItems?: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN'
counterAxisAlignItems?: 'MIN' | 'CENTER' | 'MAX'
}
/**
* Figma text node
*/
export declare interface FigmaTextNode extends FigmaNodeBase {
type: 'TEXT'
characters: string
style?: FigmaTextStyle
fills?: FigmaPaint[]
}
/**
* Figma rectangle node
*/
export declare interface FigmaRectangleNode extends FigmaNodeBase {
type: 'RECTANGLE'
absoluteBoundingBox?: { x: number, y: number, width: number, height: number }
fills?: FigmaPaint[]
strokes?: FigmaPaint[]
strokeWeight?: number
cornerRadius?: number
}
/**
* Figma document
*/
export declare interface FigmaDocument {
name: string
lastModified: string
version: string
document: {
id: string
name: string
type: 'DOCUMENT'
children: FigmaNode[]
}
components: Record<string, FigmaComponentMeta>
styles: Record<string, FigmaStyleMeta>
}
/**
* Figma component metadata
*/
export declare interface FigmaComponentMeta {
key: string
name: string
description: string
}
/**
* Figma style metadata
*/
export declare interface FigmaStyleMeta {
key: string
name: string
styleType: 'FILL' | 'TEXT' | 'EFFECT' | 'GRID'
}
/**
* Export options
*/
export declare interface FigmaExportOptions {
includeVariants?: boolean
includeProps?: boolean
frameWidth?: number
frameHeight?: number
componentSpacing?: number
}
/**
* Figma node types
*/
export type FigmaNodeType = | 'DOCUMENT'
| 'CANVAS'
| 'FRAME'
| 'GROUP'
| 'VECTOR'
| 'BOOLEAN_OPERATION'
| 'STAR'
| 'LINE'
| 'ELLIPSE'
| 'REGULAR_POLYGON'
| 'RECTANGLE'
| 'TEXT'
| 'SLICE'
| 'COMPONENT'
| 'COMPONENT_SET'
| 'INSTANCE'
/**
* Union of all Figma node types
*/
export type FigmaNode = FigmaFrameNode | FigmaTextNode | FigmaRectangleNode | FigmaNodeBase