Diseñe flujos de usuario nativos dentro de Figma y Sketch con Flowkit 2.0

Dibujar y editar muchas líneas y cuadros para los flujos de usuarios en cualquier herramienta de diseño es un verdadero dolor. Si alguna vez lo has hecho, sabes de lo que estoy hablando.

Incluso si logra realizarlo para su proyecto actual, siempre existe el próximo proyecto que necesita casi el mismo tratamiento.

Casi. Ese es el problema. Sus líneas y cuadros antiguos no coinciden con lo que necesita ahora y no hay una manera fácil de reutilizar lo que ya ha hecho.

Después de experimentar este dolor yo mismo en múltiples proyectos de clientes una y otra vez, finalmente decidí hacer algo al respecto.

Decidí hacer mi propia biblioteca de flujo reutilizable. Pensé en cada dirección posible, curva de línea, variación, etc. que posiblemente quisiera en una biblioteca de componentes de flujo. Entonces, lo logré.

Pasé lo que algunos considerarían una cantidad irrazonable de tiempo elaborando cada pequeño detalle. Incluso cambié la convención de nomenclatura varias veces en función de lo útil y memorable que era cada componente.

Tuve una docena de personas que probaron la versión inicial en octubre de 2017, justo antes de que comenzara a funcionar con la versión 1.0.

Avance rápido un año completo y todavía estoy usando Flowkit en mis proyectos y todavía hay personas que me dicen cuánto les encanta y cuánto tiempo les ha ahorrado en sus proyectos.

Después de un año completo de uso personal y recopilación informal de comentarios, quería reconstruir Flowkit desde cero para trabajar con más herramientas de diseño e incorporar algunas actualizaciones aquí y allá.

¿Qué hay de nuevo en 2.0?

Flowkit ha sido rediseñado desde cero para Figma y Sketch. Ambos archivos contienen el mismo contenido con respecto a los símbolos y componentes, pero cada formato fue diseñado de forma nativa para aprovechar las características únicas de cada herramienta de diseño.

¿Qué pasa con Studio y XD? En el momento de escribir este artículo, actualmente no son compatibles con todas las características de componentes anidados que Flowkit necesita para ser completamente funcional. Cuando lo hagan, actualizaré Flowkit.

Tenga en cuenta que el uso del componente de palabra utilizado en el resto del artículo se aplica tanto a los componentes Figma como a los símbolos Sketch respectivamente.

Nueva cuadrícula

Cada componente ha sido rediseñado en 360x360 píxeles con relleno incluido. Esto significa que todos los flujos, bloques, anotaciones, etc. ahora pueden alinearse uno al lado del otro, con margen cero, y tener un espaciado constante en todo el documento. Esto elimina la necesidad de adivinar las dimensiones y el espacio adecuado para cualquier componente específico utilizado en su flujo.

Componentes maestros

Los componentes maestros son las piezas fundamentales que crean todas las instancias de componentes. El número total de componentes maestros para las líneas de flujo se ha reducido de 22 componentes en Flowkit 1.0 a ahora solo 12 componentes maestros en Flowkit 2.0.

Todas las variaciones de los componentes maestros se escalan correctamente al escalar manualmente el cuadro delimitador de un componente o mediante métodos abreviados de teclado como ⌘ (↑ → ↓ ←) y ⌘ ⇧ (↑ → ↓ ←). Cualquier edición realizada en estos componentes afectará a todas las instancias en la biblioteca. No se recomienda modificar los componentes maestros.

Variantes maestras

Existen varias variantes maestras para cambiar rápidamente el estilo central de la instancia de Flow. Estos incluyen rayas, rojo, verde, azul y claro.

Los estilos preconstruidos están disponibles para todos los componentes en Flowkit. Hay múltiples opciones para estilos de trazo, colores de relleno y más incorporados directamente en Figma y Sketch utilizando su propia forma única de manejar estilos.

Convenciones de nombres

Cada componente direccional utiliza la siguiente convención de nomenclatura. Comienza con el punto de origen y termina con el destino.

Tipo / Dirección 1 / Modificador 1 / Dirección 2 / Modificador 2

  • El tipo puede ser Flow o Tap, dependiendo del tipo de flujo que esté creando. Flow está destinado a ser utilizado para flujos de usuarios de alto nivel, mientras que Tap está destinado a ser utilizado con estructuras de alambre o diseños de pantalla reales, todo en la misma mesa de trabajo.
  • La dirección 1 determina la dirección inicial de la ruta. Esto puede ser Derecha, Izquierda, Arriba o Abajo
  • El modificador 1 viene inmediatamente después de la Dirección primaria. Esto puede ser recto, curva o serpiente.
  • La Dirección 2 viene inmediatamente después del Modificador Inicial. Los componentes derecho e izquierdo pueden estar arriba o abajo, mientras que los componentes arriba y abajo tendrán modificadores secundarios como izquierda o derecha.
  • El modificador 2 es la sección final del componente de flujo y determina la dirección de la flecha. Esto puede ser recto, giro en U o gancho.

Flujos

Estos son los componentes principales del sistema. Hay 11 opciones (enumeradas a continuación) para cada dirección. Todos los componentes de Flow se pueden escalar sin sesgar o estirar. Cada componente de flujo también contiene puntos finales anidados que pueden ocultarse o anularse con diferentes puntos finales.

Estos son los 11 bloques de construcción de flujo central.

Hay 11 variantes en total para cada dirección. Por ejemplo:

  1. Flujo / derecho / recto
  2. Flujo / Derecha / Curva / Abajo / Recto
  3. Flujo / derecha / curva / abajo / giro en U
  4. Flujo / Derecha / Curva / Abajo / Gancho
  5. Flujo / Derecha / Curva / Arriba / Recto
  6. Flujo / derecha / curva / arriba / giro en U
  7. Flujo / Derecha / Curva / Arriba / Gancho
  8. Flujo / Derecha / Serpiente / Abajo / Recto
  9. Flujo / Derecha / Serpiente / Abajo / Gancho
  10. Flujo / Derecha / Serpiente / Arriba / Recto
  11. Flujo / Derecha / Serpiente / Arriba / Gancho

Taps e interacciones

Los grifos están diseñados para usarse encima de los diseños de pantalla de la interfaz de usuario al diseñar documentos de flujo. Siguen el mismo patrón de nombres que los componentes de Flow. Cada punto final se ha anulado previamente con el punto final Tap y, además, se puede cambiar a otras interacciones, como Swipe, Long Press y Double Tap.

Puntos finales

En Flowkit 2.0, cada punto final tiene la misma dimensión y se puede intercambiar con cualquier otra instancia de punto final para una personalización completa. Estos incluyen círculos, flechas, grifos, golpes y más.

Ejemplo de flujo de alto nivel con Flowkit

Bloques

Los bloques se utilizan como secciones principales de los flujos de usuarios. Al igual que todos los demás componentes, están construidos en una cuadrícula de 360x360. Hay múltiples opciones de Bloqueo, como Predeterminado, Con guiones, Énfasis y Sólido.

También hay bloques de dispositivos para iOS, Android y navegador.

Etiquetas y anotaciones

Existen varios estilos de etiqueta, incluidas las versiones sólida y de contorno de los valores predeterminados, rojo, azul y verde. Las etiquetas están diseñadas para usarse con líneas Flow o Tap para proporcionar más contexto sobre las rutas de un usuario específico.

Hay dos tipos de componentes de anotación. Las etiquetas de anotación generales se pueden usar en cualquier lugar dentro de su flujo para proporcionar un contexto más situacional, mientras que los puntos de anotación están destinados a llamar áreas específicas de sus diseños de pantalla.

Modo oscuro

En mi mejor voz de Mugatu ...

“Modo oscuro. Hace tanto calor ahora ".

Flowkit 2.0 viene con una opción de color invertido para interfaces oscuras, fondos oscuros y aquellos que generalmente les gusta vivir la vida en el lado oscuro.

Vale genial. ¿Cómo lo uso realmente?

Dado que Flowkit se creó tanto en Figma como en Sketch, la instalación de la biblioteca es bastante simple y no se requiere software adicional.

Instalando en Figma

Figma requiere que los usuarios tengan una cuenta de equipo paga para crear y acceder a las bibliotecas de Figma. Por lo tanto, para usar Flowkit como una biblioteca compartida entre usuarios y archivos, usted y su equipo necesitarán tener una cuenta paga de Figma Team.

  • Abra flowkit-v2.fig con Figma.
  • Haga clic en el icono del libro en la esquina superior derecha para acceder a las bibliotecas.
  • Vaya a la línea de pedido Flowkit 2.0 y haga clic en Publicar.
  • Cree un proyecto de equipo llamado Flowkit y haga clic en Mover.
  • Flowkit ahora estará disponible como una biblioteca en todos los proyectos del equipo.
  • Para obtener más información sobre las bibliotecas de Figma, lea la documentación de Figma.
  • Asegúrese de tener la licencia adecuada del equipo Flowkit para compartir la biblioteca con su equipo de diseño. ¿Tiene una licencia personal y necesita actualizar? Avísame y te conectaré con un código de cupón de actualización.
Cuentas Figma gratuitas
Si tiene una cuenta gratuita de Figma, se recomienda que cree flujos de usuario como páginas adicionales dentro del archivo Flowkit para aprovechar los activos como componentes.

Instalando en Sketch

La instalación de la Biblioteca Flowkit la hará disponible para usar con todos sus archivos de Sketch.

  • Abra las preferencias de Sketch, navegue a la pestaña Bibliotecas.
  • Elija Agregar biblioteca ... en la parte inferior izquierda.
  • Seleccione flowkit-v2.sketch y haga clic en Abrir
  • Ahora está listo para usar Flowkit 2.0 en cualquier documento de Sketch 52+.
Sketch Runner + Flowkit
Se recomienda usar Flowkit con Sketch Runner. Puede descargar el complemento gratuito Sketch Runner, aquí. Sketch Runner le permitirá usar comandos de teclado para insertar símbolos de la biblioteca Flowkit en su lienzo. Use ⌘ "para abrir Sketch Runner, luego escriba la convención de nomenclatura fácil de recordar ™ Flowkit Tipo / Dirección 1 / Modificador 1 / Dirección 2 / Modificador 2 para colocar el símbolo que desee.
Descargue este complemento de acceso directo gratuito para usar Flowkit aún más rápido.

Crear flujos de alto nivel con Flowkit

Cada componente principal dentro de Flowkit se basa en una cuadrícula de 360x360. Cada uno fue diseñado para tener 0px de margen en todos los lados al vincular bloques y flujos.

Se recomienda crear un flujo de alto nivel centrado en una sección o característica particular de su proyecto, por mesa de trabajo grande que luego se pueda compartir o exportar.

Flujos de alto nivel en Figma

  • Presione ⌥2 o haga clic en el icono de componentes en la esquina inferior izquierda para acceder a Flowkit en el panel Componentes.
  • En la parte superior del panel Componentes, busque el valor predeterminado del bloque, elija un componente del bloque y colóquelo en el lienzo.
  • Ahora busque el flujo correcto, elija un componente de flujo y colóquelo en el lienzo.
  • Continúe agregando componentes buscando y navegando por la lista de componentes, según sea necesario.

Flujos de alto nivel en Sketch

  • Use ⌘ "para abrir Sketch Runner.
  • Escribe block default y presiona return.
  • Use ⌘ "nuevamente y escriba flow en línea recta.
  • Continúe agregando componentes con Sketch Runner o navegando por la lista de símbolos de Flowkit desde la barra de herramientas de la aplicación Sketch.

Flujos de pantalla a pantalla

No coloque los componentes de Flowkit encima de mesas de trabajo o marcos e intente conectarlos a otras mesas de trabajo o marcos. Esto dará como resultado componentes recortados y usuarios de Flowkit descontentos.

Coloque los componentes de Flowkit encima de las instancias de la mesa de trabajo en una mesa de trabajo gigante. Esta es la técnica de flujo de pantalla recomendada cuando se usa Flowkit.

Existen distintas formas de crear flujos de pantalla tanto en Figma como en Sketch: pantallas dinámicas y pantallas exportadas.

La pantalla fluye en Figma

Pantallas dinámicas (recomendado)

  • Seleccione un marco y presione ⌘⌥K para convertir a un componente
  • Copie y pegue una instancia de su componente de marco en un marco más grande para comenzar a construir su flujo.
  • Con su primera instancia de cuadro en su lugar, navegue hasta el panel de componentes con ⌥2 y busque tocar a la derecha.
  • Enjuague y repita según sea necesario.
  • Cualquier ajuste realizado a sus cuadros maestros se reflejará en su cuadro de flujo automáticamente.
  • No olvide reubicar sus componentes de flujo si refactoriza sus diseños.

Pantallas exportadas (alternativas)

  • Esta es una forma rápida de crear un flujo cuando las pantallas dinámicas no importan.
  • Haga clic derecho en cualquier marco y elija Copiar como> Copiar como PNG.
  • Pegue el mapa de bits en su marco de flujo grande.
  • Presione ⌥2 o haga clic en el icono de componentes en la esquina inferior izquierda para acceder a Flowkit en el panel Componentes.
  • Busque toque directo y coloque el componente de flujo en su marco de flujo grande.
  • Enjuague y repita según sea necesario.

La pantalla fluye en Sketch

Pantallas dinámicas con complementos

  • Instale el complemento gratuito Angle o Magic Mirror.
  • Cree una mesa de trabajo grande para contener sus flujos de pantalla.
  • Dibuja un rectángulo del mismo tamaño que la primera mesa de trabajo que te gustaría usar.
  • Aplique el complemento Magic Mirror o Angle al rectángulo, para reflejar su mesa de trabajo. Consulte la documentación del complemento para obtener más detalles al respecto.
  • Use Sketch Runner ⌘ "y toque suavemente hacia la derecha para colocar su primer símbolo de flujo.
  • Enjuague y repita según sea necesario.

Pantallas dinámicas con símbolos

  • Convierte tus mesas de trabajo en símbolos.
  • Cree una mesa de trabajo grande para contener sus flujos de pantalla.
  • Coloque la instancia de símbolo de su mesa de trabajo en la mesa de trabajo grande.
  • Use Sketch Runner ⌘ "y toque suavemente hacia la derecha para colocar su primer símbolo de flujo.
  • Enjuague y repita según sea necesario.

Pantallas estáticas exportadas

  • Seleccione una mesa de trabajo y elija Hacer exportable en la parte inferior derecha del panel del inspector
  • Use Sketch Runner ⌘ "y toque suavemente hacia la derecha para colocar su primer símbolo de flujo.
  • Enjuague y repita según sea necesario.

Anulaciones

Ya sea que esté creando flujos complejos o cambiando interacciones en los componentes del grifo, Flowkit viene con muchas capacidades de anulación preconstruidas para ocultar o mostrar ciertos puntos finales.

Vinculación de componentes de flujo

Hay momentos en que es necesario vincular múltiples componentes de flujo para darle la línea loca que desea en su documento. Puede lograr la apariencia de una línea continua ocultando las tapas finales anidadas.

Construyendo un flujo complejo en FigmaConstruyendo un flujo complejo en Sketch

Cambiar las interacciones de toque

La interacción predeterminada para los flujos de pantalla es tocar, pero se puede anular fácilmente con doble toque, deslizar (arriba, abajo, izquierda, derecha) y presionar prolongadamente.

Invalidaciones en FigmaAnulaciones en croquis

Snag Flowkit para usted o su equipo

Visite https://useflowkit.com y obtenga la licencia adecuada para usted.

¿Aún tienes preguntas? Estaré encantado de ayudarte, solo tuitea.