Conectores de FigJam para los flujos en Figma Design.
Personas que dibujan flujos de usuario en Figma Design
Plugin · Conectores de FigJam · Prototipos
Conectores de FigJam / Figma Design / Prototipos
La Idea
Al dibujar un flujo en Figma Design, mover una pantalla puede dejar las flechas apuntando al lugar equivocado. Desarrollé Autoflow para usar los conectores nativos de FigJam y mantenerlos unidos a pantallas, botones y capas de instancias. La solución pasa por el portapapeles porque la API no permite crearlos directamente en Design.
Siempre Unidos
Usé conectores nativos de FigJam para que Figma conserve la unión al mover o redimensionar los elementos, incluso con el plugin cerrado.
Conectar
Definí el origen con clic y el destino con Shift+clic. Copy connector prepara la flecha con el estilo del panel y ⌘V la crea en el archivo.
Flujos
Incluí dos distribuciones para selecciones de tres o más elementos: una secuencia o conexiones desde el primero hacia los demás.
Estilo
Reuní color, trazo, etiqueta, trazado y puntas en una barra similar a FigJam. Los estilos se pueden guardar y aplicar, también al editar varios conectores.
Prototipo
Añadí Create prototype interaction para crear una interacción On click → Navigate entre el origen y el destino del conector seleccionado.
La Implementación
La API de Design no permite crear ni clonar conectores directamente. Usé un conector de FigJam marcado con sharedPluginData como origen para el portapapeles. Al pegarlo, el plugin escucha nodechange, conserva una copia por enlace, la mueve a la página o sección común y fija sus extremos con AUTO.
Preparé pruebas del emparejado de elementos, los anclajes y la comunicación entre plugin e interfaz, con un pegado simulado sobre un mock de Figma. Capturé la interfaz compilada en su entorno de pruebas.
Conectores de FigJam para los flujos en Figma Design.
Cada conector necesita tu ⌘V, con el plugin abierto. Los conectores no esquivan otras pantallas, y el fondo de la etiqueta no se puede editar por API en Design.
