Design Mode

Design Mode / Modo Diseno

Vector design tool with CanvasKit (Skia WASM) renderer. / Herramienta de diseno vectorial con CanvasKit.

Features / Funcionalidades

Drawing / Dibujo

• Shapes: rectangle, ellipse, line, star
• Freehand pen tool with vector paths
• Text with custom fonts

Layers / Capas

• Fill (solid, linear gradient, radial gradient)
• Stroke (color, width, alignment: inside/center/outside)
• Effects (drop shadow, inner shadow, blur)
• Opacity, blending, rotation

Components / Componentes

• Create reusable components
• Instances with override propagation
• Variant properties

Auto Layout / Layout Automatico

• Powered by Yoga (Flexbox)
• Horizontal/vertical direction, gap, padding, alignment
• Min/max constraints, wrapping

Boolean Operations / Operaciones Booleanas

• Union, intersect, difference, XOR (SVG paths)

Design Tokens / Tokens de Diseno

• Colors, typography, spacing, gradients, shadows
• $token reference syntax with auto-extraction

Figma Import / Importacion Figma

• Via file key + personal access token
• Frames, components, instances, text, rectangles, ellipses

Export / Exportacion

• PNG — Raster at any resolution
• JSX/TSX + CSS + tokens JSON — React components with Tailwind