Diseñador Visual

Canvas 2D

Toca para seleccionar y arrastra para mover, resize, snap a grid y a otros componentes, zoom 0.1× – 4×, smart guides con etiquetas de distancia.

35+ componentes

Texto, titulares, botones, formularios, medios, tablas, listas, acordeones, carruseles, diálogos y contenedores semánticos — cada uno con su propio panel de opciones.

Properties · Layers · Theme

Tres paneles laterales para estilizar, ordenar y gestionar color tokens.

Páginas múltiples

Tabs en preview; add / rename / duplicate / delete sin límite.

5 templates built-in

Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace — más bloques prehechos (hero, características, precios, contacto, pie).

Marketplace bidireccional

Importa templates y componentes descargados, y exporta tus diseños.

Básicos

Text · Heading · Button · Link · Icon · Divider · Avatar · Icon Button · Code · Quote

Formularios

Text Field · Text Area · Checkbox · Radio · Switch · Select · Slider · Form

Contenedores

Row · Column · Card · Box · Grid · Section · Header · Footer · Main · Scroll View

Navegación

Navbar · Bottom Nav · Tab Bar · Breadcrumb · Link List

Medios

Image · Video · Carousel · Code Embed

Feedback

Dialog · Snackbar · Progress Bar · Spinner · Badge · Chip · Tooltip · Rating

Datos

List · Table · Accordion

Bloques

Secciones prehechas: hero, características, precios, formulario de contacto, pie

Fijo / Ajustar / Rellenar

Define cada eje por separado: tamaño fijo, ajustarse al contenido o rellenar el espacio sobrante. Con mínimo y máximo opcionales.

Auto-layout

Los contenedores colocan a sus hijos en fila o columna con gap, padding, wrap y alineación. Añade o quita un hijo y todo se recoloca solo.

Rejilla real

Define columnas y filas como chips (1fr, 200px, auto) y coloca los hijos entre celdas con spans. El lienzo dibuja las líneas de pista.

Página en flujo

Los diseños nuevos apilan sus secciones como una página web de verdad, así el HTML exportado se adapta solo en vez de clavarlo todo a coordenadas. El lienzo libre sigue disponible para trabajo al píxel.

Hijos flotantes

Saca un hijo del flujo para fijarlo donde quieras dentro de su contenedor: una insignia en la esquina de una tarjeta, un botón flotante sobre un hero.

Tokens

Colores, espaciados, tamaños de texto, sombras, radios y opacidad como valores con nombre que reutilizas en todas partes. Renombra uno y todos los componentes le siguen; el panel te dice cuántos lo usan.

Tema claro y oscuro

Da a cada token un valor oscuro y conmuta el lienzo para comprobarlo. La exportación lleva los dos y respeta el ajuste del sistema de quien lo lea.

Estilos de texto y efecto

Guarda una tipografía o un juego de sombras completo con un nombre y aplícalo de un toque, como los estilos de párrafo de una herramienta de diseño.

Componentes reutilizables

Convierte cualquier selección en un componente. Cada copia queda enlazada: edita el original y todas se actualizan, y aun así cada copia puede sobrescribir su texto o su imagen.

Panel de salud

Avisa de colores fuera de tu paleta, espaciados fuera de la escala, textos sin estilo y contrastes que no cumplen accesibilidad — antes de exportar.

Estados

Estiliza hover, active, focus y disabled por componente, y previsualiza cada uno en el lienzo sin salir del editor.

Interacciones

Conecta un toque para navegar a otra página, abrir o cerrar un diálogo o cambiar el estado de un componente. Las flechas del lienzo muestran el flujo.

Prototipo ejecutable

El modo previsualización lo ejecuta de verdad: la navegación, los diálogos y la validación de formularios funcionan, así que puedes pasar un enlace y que lo recorran.

Animaciones

Animaciones con keyframes y botón Reproducir, más efectos de entrada y de scroll y transiciones de página. Se exportan como CSS real.

Historial legible

Una lista de lo que hiciste de verdad («Mover Botón 2», «Cambiar radio de 3 elementos»); toca cualquier entrada para volver a ese punto.

Versiones con nombre

Guarda un checkpoint antes de un cambio arriesgado y restáuralo después. También puedes comparar dos versiones lado a lado y ver qué se movió.

Recuperación

Cada guardado deja una copia de seguridad. Si un fichero vuelve dañado, el Diseñador ofrece la copia o tu último checkpoint en vez de perder el trabajo.

Compartir e importar

Envía un diseño como un solo fichero, impórtalo de vuelta o trae un diseño desde Figma. Los comentarios de revisión se anclan a un componente y se resuelven.

Landing Page

Landing moderna con hero y grid de características

Login Form

Formulario de autenticación email/password

Dashboard

Panel admin con stats cards y settings

Portfolio

Portfolio personal con about, projects, contact

E-Commerce

Catálogo de productos con vista de detalle

Barra flotante

Selecciona algo y las pocas acciones que de verdad usas para ese componente aparecen justo encima.

Teclado y ratón

Con teclado conectado: las flechas desplazan, Supr elimina, y funcionan los atajos de siempre de deshacer, copiar, pegar, duplicar, agrupar y zoom.

Uso a una mano

Los paneles recuerdan la altura a la que los dejaste, el lienzo se desplaza para que la selección quede visible sobre el teclado, y hay modo zurdo.

Accesible

El lienzo funciona con lector de pantalla, incluido mover y redimensionar por pasos, y las zonas táctiles cumplen el tamaño mínimo recomendado.