Guía Excalidraw¶
Excalidraw es una herramienta gratuita de pizarra online que te permite dibujar y hacer bocetos fácilmente. Lo que la diferencia es que sus diagramas parecen casi hechos a mano. A diferencia de muchas otras herramientas que dicen soportar elementos dibujados a mano, los dibujos de Excalidraw son los que más se acercan a ese estilo natural y manuscrito.
Esta es una de las razones por las que, en poco tiempo, se ha vuelto bastante popular. Además, está llena de funciones útiles manteniendo la simplicidad, y lo mejor es que tiene una curva de aprendizaje muy suave.
Empezar con Excalidraw es sencillo, pero si nunca has usado una pizarra digital o una herramienta de diseño gráfico, una guía rápida puede ayudarte mucho. Si planeas usar Excalidraw a menudo, es buena idea dedicar solo 10 minutos a aprenderlo.
Primeros pasos con Excalidraw¶
Para acceder a Excalidraw no necesitas descargar nada. Es una aplicación web a la que puedes acceder desde Excalidraw.com y no requiere registro.
Interfaz de usuario¶
Excalidraw mantiene la simplicidad en su interfaz. Principalmente hay dos partes: la barra de herramientas en la parte superior, donde encuentras todas las herramientas para dibujar y escribir, y el lienzo, tu espacio para crear.
También hay una barra de menú contextual a la izquierda que aparece cuando seleccionas algo, ofreciendo opciones específicas. Cuando no hay nada seleccionado, desaparece.
La interfaz de Excalidraw: arriba la barra de herramientas, a la izquierda el menú contextual y en el centro el lienzo infinito.
El lienzo en Excalidraw es un espacio de juego infinito. Dibuja donde quieras y muévelo libremente. Además, puedes hacer zoom hasta un 3000%!
Aquí está la magia: tus dibujos se mantienen nítidos, no borrosos, incluso al hacer mucho zoom. ¿Por qué? Porque Excalidraw trabaja con SVG, que significa Gráficos Vectoriales Escalables. En resumen, SVG mantiene todo claro y definido, sin importar cuánto amplíes o reduzcas.
Crear formas básicas en Excalidraw¶
¡Ahora vamos a lo divertido: dibujar en Excalidraw!
Para dibujar formas básicas como rectángulos, elipses o rombos, solo elige la herramienta correspondiente en la barra superior. Haz clic en cualquier parte del lienzo y arrastra el ratón. Cuando estés conforme con el tamaño, suelta el botón.
Crear formas básicas en Excalidraw es muy fácil con las herramientas de formas.
Si quieres un cuadrado, círculo o rombo (alto = ancho), mantén pulsada la tecla Shift mientras arrastras. Mantener shift al dibujar o redimensionar mantiene la proporción.
Después de crear un objeto, selecciónalo (si no está ya seleccionado). Verás que aparece un menú a la izquierda del lienzo. Puedes modificar los objetos de Excalidraw con las opciones de esta barra.
Un repaso rápido de estas propiedades:
– Color de trazo: Elige el color del borde entre 15 opciones, incluyendo blanco y transparente. También puedes usar tu propio color con valores Hex.
– Color de fondo: Elige un color de relleno entre 15 opciones o personalízalo.
– Estilo de relleno: Elige entre Hachure, cruzado o sólido.
– Grosor de trazo: Fino, negrita o extra-negrita.
– Estilo de trazo: Sólido, discontinuo o punteado.
– Irregularidad: Ajusta el estilo de trazo – Arquitecto (limpio y preciso), Artista (a mano cuidadosamente) o Dibujante (a mano alzada).
– Bordes: Cuadrados o redondeados.
– Opacidad: Haz tu objeto tan transparente como quieras.
Aquí tienes algunas variaciones que creé usando las opciones del menú de la izquierda:
El menú contextual de Excalidraw te ayuda a personalizar tus objetos de forma intuitiva.
Redimensionar objetos en Excalidraw¶
Para redimensionar un objeto, selecciónalo con la herramienta de selección (1), luego arrastra una de las esquinas del rectángulo delimitador. Si quieres mantener la proporción, mantén pulsada la tecla shift mientras arrastras.
Si quieres que el objeto se redimensione simétricamente desde el centro, mantén pulsada la tecla Option en Mac o Alt en Windows.
Rotar objetos en Excalidraw¶
También puedes rotar objetos. Selecciónalos con la herramienta de selección, toma el manejador de rotación (un círculo sobre el rectángulo delimitador) y gíralo.
Puedes bloquear la rotación en múltiplos de 15 grados manteniendo pulsada la tecla shift.
Atajos de teclado para trabajar más rápido¶
Quizá hayas notado algunos números bajo los iconos de la barra superior —
Barra superior de Excalidraw: los números en rojo son atajos de teclado para cada herramienta.
Estos números son los atajos de teclado para cada herramienta. En vez de hacer clic, puedes pulsar la tecla correspondiente. Por ejemplo, 2 activa el rectángulo, 3 el rombo y 4 la elipse.
Los atajos de Excalidraw son bastante intuitivos. Aunque no aparecen en la barra, también puedes pulsar R para rectángulo, D para rombo, E para elipse, A para flecha, L para línea, etc.
Puedes ver la lista de atajos pulsando Shift + / mientras trabajas en Excalidraw.
También puedes consultar esta lista de atajos de teclado en este artículo para referencia rápida. Si quieres un PDF descargable o una lista imprimible, puedes descargarlo aquí.
Herramienta de selección en Excalidraw
La herramienta de selección (flecha oscura) se usa para seleccionar uno o varios objetos en el lienzo. Siempre que quieras modificar un objeto, primero debes seleccionarlo.
Mover el lienzo
La herramienta mano (✋) te permite mover el lienzo. Tras seleccionarla, haz clic y arrastra. También puedes mantener espacio + clic y arrastrar.
También puedes hacer clic con la rueda del ratón y arrastrar para mover el lienzo.
Si usas un trackpad, puedes mover el lienzo con dos dedos.
Deshacer y rehacer
Si cometes un error, puedes deshacer con Cmd + Z en Mac o Ctrl + Z en Windows. Para rehacer, Cmd + Shift + Z en Mac o Ctrl + Shift + Z en Windows.
Herramienta de texto¶
Puedes añadir texto usando la herramienta de texto (8).
Añadir texto es tan común que Excalidraw tiene un atajo natural: doble clic. Haz doble clic en el lienzo y se activa la herramienta de texto.
Después de escribir, puedes modificar el texto como quieras. Si quieres darle fondo, haz clic derecho y selecciona Wrap text in a container.
Excalidraw tiene 3 estilos de fuente: Manuscrita, Sans-serif y Código (monoespaciada).
Si quieres usar una fuente personalizada, lee este artículo.
Herramientas avanzadas en Excalidraw¶
Las herramientas anteriores son suficientes para crear formas y cuadros de texto, pero no para diagramas complejos y flujogramas.
Veamos algunas herramientas más avanzadas de Excalidraw.
Crear formas irregulares con la herramienta Línea¶
Quizá notes que no hay herramienta para triángulos, pentágonos, estrellas, hexágonos, etc.
Puedes dibujar estas formas con la herramienta línea, que crea líneas rectas. Elige la herramienta línea o pulsa 6, y ve colocando puntos en el lienzo. Se forma una figura cerrada al hacer clic en el primer punto, permitiendo añadir color y estilo de relleno.
Si quieres una figura abierta, pulsa Esc (o doble clic) al terminar.
Ajustar las esquinas
Para ajustar las esquinas, usa la herramienta de bordes en el menú izquierdo. Hay dos opciones: esquina aguda y esquina redondeada.
Para cambiar entre ellas, selecciona el objeto y elige el estilo en el menú contextual.
Dos estilos de esquina en Excalidraw. La misma figura con esquinas redondeadas y agudas.
Herramienta Flecha¶
También hay una herramienta de flecha para crear flechas rectas, similar a la línea. Para crear una flecha, coloca tantos puntos como quieras y luego haz doble clic o pulsa Esc al terminar.
Después de dibujar la flecha, puedes personalizar color, grosor y puntas en ambos extremos.
La herramienta flecha es más que una línea con punta. Tiene funciones únicas:
— Flechas con nombre
Puedes hacer doble clic en el cuerpo de la flecha y ponerle un nombre. Es útil para mostrar pasos intermedios en procesos y diagramas de flujo.
— Vinculación de flechas
Puedes vincular flechas a otros objetos para que, al mover el objeto, la flecha siga conectada. Para ello, arrastra la punta de la flecha cerca del objeto. Cuando veas un contorno tenue, suelta y quedarán vinculados.
Puedes ver ambas funciones en esta demo:
Puedes nombrar flechas y vincularlas a otros objetos para que sigan conectadas al moverlos. (¡Genial para diagramas y lluvias de ideas!)
Herramienta a mano alzada¶
Si las herramientas de formas no te sirven, puedes usar la herramienta de dibujo libre seleccionando el lápiz (✏️) o pulsando 7.
Esta herramienta simula una pluma real. Si la mueves despacio, el trazo es más grueso; si la mueves rápido, es más fino.
Demo de la herramienta a mano alzada: movimiento lento = trazo grueso.
Agrupar y desagrupar objetos en Excalidraw¶
Puedes agrupar objetos para combinarlos en una sola unidad. Por ejemplo, agrupar varias formas para moverlas y redimensionarlas juntas.
Para agrupar, selecciona los objetos manteniendo Shift, haz clic derecho y elige “Agrupar selección”. O pulsa Cmd + G en Mac o Ctrl + G en Windows.
Esto agrupa todos los elementos seleccionados en un solo objeto.
Para desagrupar, selecciona el grupo, haz clic derecho y elige “Desagrupar selección”. O pulsa Cmd + Shift + G en Mac o Ctrl + Shift + G en Windows. Así podrás editar cada objeto por separado.
Desagrupar es útil si necesitas modificar un objeto individualmente. Agrupar y desagrupar es una forma práctica de trabajar con varios elementos juntos o por separado.
Añadir imágenes externas¶
Excalidraw permite insertar imágenes externas en el lienzo. Haz clic en el icono de imagen en la barra superior o pulsa 9. Selecciona la imagen en tu ordenador y pulsa Enter.
Luego puedes moverla y redimensionarla arrastrando las esquinas.
Insertar imágenes externas abre muchas posibilidades: puedes hacer collages, anotar imágenes con las herramientas de Excalidraw, unir varias imágenes, ponerles fondo blanco o transparente, etc.
Guardar, compartir y exportar en Excalidraw¶
Una vez que tienes tus dibujos, es hora de guardarlos o exportarlos.
Guardar¶
Excalidraw guarda automáticamente tus dibujos en tu dispositivo. Cuando cierras la pestaña, tu trabajo queda guardado en el almacenamiento del navegador. La próxima vez que abras Excalidraw en el mismo dispositivo y navegador, tus dibujos estarán ahí.
Si quieres trabajar en el mismo dibujo en otro ordenador, puedes guardar el lienzo en un archivo con extensión .excalidraw. Este archivo guarda toda la escena.
Para guardar tu lienzo:
- Haz clic en el menú hamburguesa a la izquierda del lienzo.
- Elige “guardar imagen”.
- Haz clic en “Guardar en disco”.
¡Listo! Ahora puedes continuar tu trabajo más tarde arrastrando este archivo a la pestaña de Excalidraw o transfiriéndolo a otro ordenador.
Exportar¶
Si necesitas copiar tus dibujos como PNG o SVG para usarlos en otro programa, sigue estos pasos:
- Selecciona los objetos que quieras exportar.
- Haz clic derecho sobre ellos.
- Elige “Copiar al portapapeles como PNG” o “como SVG”.
Si eliges PNG, recuerda que es un formato de mapa de bits, así que puede verse pixelado al ampliar. Pero puedes copiar imágenes PNG en resolución 3x para mayor calidad.
Para ello:
- Haz clic en el menú hamburguesa.
- Ve a “Exportar imagen”.
- Pon la escala en
3x.
Ahora tienes tus dibujos en alta resolución, listos para pegar en otro programa.
Compartir¶
También puedes compartir tu lienzo como enlace de solo lectura: Menú hamburguesa -> Guardar en -> Exportar a enlace. Este enlace es permanente, ideal para compartir con profesorado o clientes.
Colaboración en vivo¶
Puedes invitar a otras personas a colaborar en tiempo real compartiendo un enlace común al lienzo.
Haz clic en el icono de dos personas (👥) en la barra superior derecha. Aparecerá un cuadro para poner tu nombre y obtener un enlace compartible.
Ponle un nombre y comparte el enlace.
Resumen¶
Ahora ya sabes cómo crear diagramas personalizados con las herramientas de Excalidraw, agrupar y manipular objetos, y colaborar en tiempo real. También hemos visto cómo guardar, exportar y compartir tus dibujos para usarlos en documentos, presentaciones y online.
Con estos fundamentos, puedes empezar a usar Excalidraw para plasmar tus ideas visualmente. Su accesibilidad y funciones la hacen ideal para brainstorming, planificación, colaboración y comunicación.