Design EditorDocumentaciónUsar el editor
Lienzo y herramientas
El lienzo ocupa toda la ventana y los paneles flotan sobre él. Cada herramienta tiene un atajo de una sola tecla.
1Herramientas
| Herramienta | Qué hace |
|---|---|
Selección V | Selecciona, mueve y cambia el tamaño de las capas. |
Marco F | Dibuja un marco. Un marco de nivel superior es un tablero, una pantalla o una diapositiva. |
Rectángulo R | La ranura de formas. Su menú también incluye Polígono, Estrella, Línea, Icono y Navegador. |
Elipse O | Círculos y elipses, con arcos y anillos. |
Polígono Y, Línea L | Polígonos regulares y líneas rectas. |
Pluma P | Trazados con varios puntos de anclaje. Enter o Escape termina el trazado. |
Lápiz Shift+P | Líneas a mano alzada, suavizadas en curvas. |
Texto T | Haz clic para un cuadro de texto que crece, o arrastra para un ancho fijo. |
Nota N | Tarjetas de nota, contexto y prompt para ti o para un agente. |
| Imagen | Coloca un archivo PNG, JPEG, GIF, WebP o SVG. |
Mano H | Desplaza el lienzo. Mantener pulsada la barra espaciadora hace lo mismo. |
2Formas especiales
- Estrella: un polígono con radio interior. El panel define el número de puntas y el radio interior.
- Arcos de elipse: Inicio, Barrido e Interior en el panel convierten una elipse en una porción de tarta, un arco o un anillo.
- Icono: elige entre Lucide, Feather, Simple Icons (marcas), Material Symbols en versión contorneada, redondeada y angulosa, y Phosphor.
- Suavizado del lápiz: Preciso, Equilibrado o Suave, en Configuración, Sistema. Ahí también está el estilo del cursor de lápiz.
3Páginas web en vivo en el lienzo
La forma Navegador muestra una página web real como dispositivo de Escritorio, Tableta o Teléfono, con URL, zoom y desplazamiento. Usa el Chrome, Chromium, Edge o Brave que ya tengas instalado; define DE_BROWSER_PATH para elegir otro.
Las páginas de un archivo que abres quedan en pausa hasta que haces clic en Cargar páginas, así que abrir un archivo nunca visita un sitio por sí solo.
4Notas y scripts
Las tarjetas de nota, contexto y prompt solo existen en el lienzo. Se excluyen de todas las exportaciones, así que puedes dejar instrucciones para un agente junto al diseño.
Un nodo de script es un marco dibujado con JavaScript. Sus parámetros @input aparecen como campos en la sección Script del panel.
6Alinear, ajustar y combinar
Al arrastrar una capa aparecen guías inteligentes y se ajusta a los bordes y centros de las capas cercanas.
Alinea a la izquierda, al centro, a la derecha, arriba, en medio o abajo desde el panel. Distribuye en horizontal o en vertical cuando hay tres o más capas seleccionadas.
Las operaciones booleanas combinan formas: Unión Cmd+Alt+U, Restar Cmd+Alt+S, Intersección Cmd+Alt+I, Excluir Cmd+Alt+X. También están en el menú de la capa. Los marcos que contienen otras capas no se pueden combinar.
7Copiar y pegar
Copiar, cortar y pegar funcionan con capas. Si copias capas en Figma y las pegas aquí, llegan como capas editables. Pegar HTML de cualquier origen también lo convierte en capas.