Diseño de UI/UX: 6 tácticas para organizarse en Figma

1. Introducción: Definitivamente me consideraría un creativo, pero también siempre me ha interesado la organización y los procesos y sistemas. eficiencia, la consistencia y la comunicación clara son enormes beneficios que encontrarás estar en la misma página con tu equipo en Figma. [MÚSICA] Soy Maddie Beard. Soy Diseñador de UI/UX y la clase de hoy se trata tácticas para desarrollar un proceso organizado con tu equipo en Figma. Por lo general, soy una de las personas del equipo que está reuniendo a todos para tratar de mejorar nuestros flujos de trabajo, procesos y comunicación. Como la mayoría de los diseñadores, me encanta Figma. Entonces, si también amas a Figma o si es nuevo para ti, entonces esta es la clase para ti. He estado trabajando profesionalmente como diseñador desde 2017, tanto para empresas tecnológicas, grandes como pequeñas, incluyendo Adobe. También he trabajado para mí como freelancer y emprendedor. Los sistemas y procesos son tan poderosos en el lugar de trabajo moderno. Aplicarlos en Figma no solo conseguirá que los diseñadores estén en la misma página, sino también a los gerentes de producto, ingenieros y otros socios interfuncionales. Pasaremos por seis tácticas para que te avancen hacia un proceso que funcione para ti. Cuando termines con esta clase, mi esperanza es que te vayas entendiendo cómo trabajar más inteligente y no más duro con tu equipo en Figma. Esta clase es para cualquier diseñador en un equipo, ya sea que seas un colaborador individual o gestionas a otros diseñadores. Especialmente si eres nuevo en trabajar en equipo, o si has notado que tu equipo le vendría bien alguna mejora cuando se trata de procesos y flujos de trabajo y colaboración. Sé que vas a sentir una oleada de confianza en cómo trabajas y te comunicas después de estas seis lecciones. 2. Cómo describir tu equipo: Al crear un proceso para tu equipo, es muy bueno tener en cuenta con quién trabajas para que puedas asegurarte de que el proceso sea beneficioso para todos los involucrados. En esta lección, vamos a hacer un ejercicio rápido de higo gym para delinear a sus grupos de interés y averiguar cuáles son sus objetivos cuando se trata de este proceso que estamos a punto de desarrollar. Puedes hacer esto solo o con algunas otras personas en tu equipo. Si prefieres un método más tradicional, también puedes hacerlo simplemente con notas adhesivas en tu pared o pizarra blanca. Comienza creando secciones usando la herramienta de sección para cada equipo pequeño dentro de tu equipo más grande. ¿Quién va a estar saltando a tus archivos Figma todos los días o solo de vez en cuando? Para mi equipo, son diseñadores, gerentes de proyecto, gerentes de diseño e ingenieros. A continuación, toma algunas notas adhesivas y anota los goles para cada una de estas disciplinas. Te voy a mostrar lo que se me ocurrió, aunque el tuyo podría ser un poco diferente. Los compañeros diseñadores necesitan poder retomar donde lo dejaste sin demasiada explicación. Los desarrolladores necesitan saber dónde encontrar diseños, entender cómo debe comportarse la pantalla y cómo hacer preguntas o plantear inquietudes. Los PM necesitan saber dónde encontrar diseños, cómo proporcionar retroalimentación y cómo escribir requisitos basados en diseños finales. Por último, los gerentes de diseño deben poder conocer el estado de un proyecto en todo momento, hacerse una idea de cómo están progresando los diseñadores debajo de ellos y si hay alguna área en la que puedan necesitar mejorar. Todas estas cosas también podrían aplicarse a tu equipo, pero también los equipos son muy diferentes. Asegúrate de revisar estos y pensar en tu caso de uso específico. Ahora es tu turno. Sigue adelante y completa este ejercicio ya sea por ti mismo o con alguien de tu equipo. Si lo completas individualmente, podrías pensar en compartirlo con alguien de tu equipo para obtener sus pensamientos y rebotar algunas ideas el uno del otro. Lo más importante de este ejercicio es realmente arrojar la perspectiva de que Figma es solo para diseñadores. Al menos en mi experiencia, la relación entre diseño, ingeniería y gestión de productos comienza con la comunicación. Ahora, a medida que avanzas por todas estas lecciones, podrás tener en mente a estas personas y sus metas, así como a las tuyas propias. 3. Configuración de un archivo Figma: Cuando comienzas un nuevo proyecto, ¿alguna vez te congelas mirando un archivo Figma en blanco o tal vez te sientes totalmente cómodo comenzando desde cero, pero cada diseñador de tu equipo lo hace de manera un poco diferente resultando en última instancia en desorganización a largo plazo? Bueno, de cualquier manera, puedo decirte por experiencia que crear una plantilla de experiencia que crear una plantilla archivo Figma es una de las mejores cosas que puedes hacer por tu equipo y es por eso que lo hice el proyecto para esta clase. Si eres fanático de la consistencia y la velocidad, entonces este es un lugar perfecto para comenzar. Si eres fanático de los atajos, entonces tengo buenas noticias para ti. De hecho ya he creado una plantilla que voy a estar compartiendo con ustedes para usar para su equipo. Esto es algo que me ha funcionado muy bien para mí y mi equipo, pero puedes continuar y descargarlo en la sección de recursos y hacer los cambios que quieras para tu propio uso. En esta lección, voy a estar guiándote por cada parte de ella una por una. Empecemos por la portada. Esta es la portada, y lo que tenemos aquí es realmente solo la portada que va a aparecer en tu página de inicio de Figma como tu imagen en miniatura. Simplemente me gusta mucho que esto sea súper sencillo para que alguien sepa exactamente a qué se está metiendo en términos de qué proyecto es y cuál es el estado. Puedes poner el título de tu proyecto aquí. Puedes poner el nombre de tu equipo aquí. Esto realmente solo es relevante si su equipo de diseño se divide en equipos separados. Este es un componente, por lo que puede cambiar el estado muy fácilmente aquí. Una vez que se lanza, entonces puedes cambiarlo a eso. O si alguna vez se vuelve irrelevante, entonces me gusta cambiarlo a archivo solo para que alguien sepa que no debería ser como construir basado en estos diseños o algo así. Eso es súper fácil de cambiar aquí. Ahora, vamos al resto de estas páginas. Traspaso. Siempre tengo esta página primero y no he roto por un título llamado Handoff que dev sepa que esto es para ellos. Hay una marca de verificación verde, dice Ready For Dev, y luego la fecha en que se actualizó más recientemente. Aquí es justo donde vas a lanzar cualquiera de tus diseños que están listos para el desarrollo y es realmente a prueba completa. Esto es lo primero que alguien debería notar al bajar por el panel izquierdo y no meter nada aquí si no está listo para ser construido, ese es básicamente el resultado final. También puede dividir esto en múltiples secciones si lo desea en función de tal vez fases, MVP, y luego una siguiente iteración. No obstante, quieres hacerlo funciona, pero simplemente me gusta mucho tener esto en la cima. Luego nos movemos al Diseño. Wireframes, aquí es donde guardarás todos tus wireframes. La siguiente sección es para un crit de diseño, y puedes hacer tantos de estos como quieras si tienes críticos todo el tiempo. Pero me gusta tener esto como una página separada solo para poder copiar y pegar pantallas en las que estoy trabajando y una retroalimentación en esta página, mantenerla más ordenada para que durante la creación, no se ven como un desastre caliente. Después el Sandbox. Ahí es donde quieres mantener tu lío caliente, donde quieres guardar cualquier cosa con la que solo estés jugando, tal vez algo de inspiración, solo cosas que todavía estás probando, aquí es donde eso puede ir. Entonces Tal vez más tarde. Esto es si se me ocurren diseños y se empuja a que tal vez se lance después de MVP. Quiero quedarme con estas pantallas, me gustan mucho. A lo mejor son pantallas terminadas, a lo mejor son solo ideas. Voy a ponerlos en Tal vez más tarde para que podamos volver a ellos en una futura iteración. Después Investigación. Descubrimiento, podría poner aquí algunos análisis competitivos o cualquier investigación que hiciera nuestro investigador de UX, pero esto podría ser viñetas, esto podría ser capturas de pantalla, sea lo que sea. Después Prototipos. Si también estamos probando prototipos para una investigación, entonces quiero mantenerlos en estas páginas separadas para que no confundan a los desarrolladores porque a veces, al menos para mí como diseñador, voy a hacer pequeños hacks rápidos para que mi prototipo funcione bien con el fin de probarlo. Ese tipo de cosas agregarán formas o agregarán confusión a diseños que no necesariamente quieres que vean los ingenieros, así que por eso tengo esto especialmente estallado como parte de nuestra investigación. He publicado esta plantilla a la comunidad Figma, así que es totalmente gratis para ti ir a duplicar y cambiar lo que quieras, ya sea que solo cambies algunas páginas, secciones enteras. Puedes cambiar emojis u opciones de estado e incluso puedes marcar esa portada para esté más en línea con la marca de tu empresa. En la siguiente lección, vamos a hablar más en detalle sobre etiquetar y anotar tus diseños para mayor consistencia. 4. Etiquetado y anotación de tus diseños: Todos sabemos que una buena comunicación asíncrona es esencial para que los equipos produzcan trabajo de alta calidad de manera eficiente. En mi experiencia, dos formas en que los diseñadores pueden comunicarse asincrónicamente son a través de loop, lo que hablaremos en una lección futura, y a través de etiquetar y anotar nuestros diseños en Figma. El etiquetado se trata de darle a tus compañeros de equipo y a tu yo futuro la disposición de la tierra cuando saltas a una página en Figma a veces por primera vez, mientras que las anotaciones son más sobre la comunicación un comportamiento previsto que podría no ser obvio con solo mirar los diseños. Profundicemos en esto y mírelo en acción comenzando con etiquetas. Hay tres niveles de etiquetas que utilizo en mi proceso. Empezando por el título, luego el subtítulo, y finalmente el nombre de la pantalla individual. Como viste brevemente en la lección anterior, esta plantilla que creé tiene un componente que puedes usar para titular y subtitular tus flujos. El objetivo del título es que destaque si alguien se alejó una página para que pueda afinar en el flujo que está buscando. El subtítulo o descripción es más para establecer contexto sobre qué es este flujo, quién debería verlo, qué lo desencadena, y cosas así. Hay infinitas formas en las que un equipo de diseño puede elegir usar convenciones de nomenclatura para dar título a pantallas individuales. Cada equipo en el que he trabajado lo ha hecho un poco diferente, pero diré que en su mayor parte, cuanto más específico y granular se pueda obtener con esto, menos confusión habrá entre diseñadores , ingenieros y PMs. Déjame mostrarte un ejemplo de una convención de nomenclatura que utilicé en mi compañía más reciente para mostrarte a lo que me refiero, y luego puedes usar este ejemplo y retocarlo un poco para que funcione para ti. Aquí hay una serie de pantallas que muestran el flujo para un nuevo usuario que ordena la recogida lo antes posible en un restaurante. Para este proyecto, se utilizó una convención de nomenclatura con esta estructura: Tipo de pantalla, Usuario, Tipo de orden, Pantalla, Estado. Se puede ver esa estructura en acción con todas estas pantallas dentro del flujo. De esta manera, cada pantalla tiene un nombre único basado en una convención de nomenclatura consistente. Honestamente, tus convenciones de nomenclatura probablemente nunca serán perfectas, y eso está totalmente bien. Recuerda los objetivos de cada uno de tus socios interfuncionales medida que definas cómo nombrar tus marcos en el futuro. convenciones de nomenclatura consistentes también ayudarán inmensamente cuando la gente esté trabajando con enlaces a sus diseños de Figma en espacios externos. Más sobre eso en la siguiente lección. 5. Cómo granular con enlaces Figma: En esta breve lección, te voy a mostrar cómo obtener el nivel adecuado de granularidad a la hora de generar y compartir enlaces a tus diseños de Figma. mucho que nosotros los diseñadores deseemos que no fuera cierto, no todo en nuestro equipo sucede dentro de Figma. A menudo es posible que tengas que vincularte a Slack, Jira, Confluence , Asana, Trello, Google Docs, Drive y muchos más. Dependiendo del escenario, es posible que desee vincular todo el archivo, solo una página o incluso una pantalla individual. Así que vamos a recorrer cómo hacer cada uno. Aquí, tengo un ejemplo de algunas pantallas que están listas para dev. Digamos que quiero compartir todo este, todo el archivo. Esto es muy fácil. Todo lo que voy a hacer es llegar al botón grande azul Compartir. Una vez que haga clic en él, entonces podré compartir en base al correo electrónico de alguien u obtener un enlace para copiar. Por lo general, solo obtendré un enlace, pero también puedo editar lo que esta persona puede hacer: editar, ver, ver prototipos solamente. Eso es simple. Probablemente ya sepas cómo hacer eso si estás del todo familiarizado con Figma. Pero, ¿y si solo quiero enlazar a una página específica? ¿Y si quiero enviar a alguien a un lugar más directo para que no tenga que averiguar qué página necesita estar mirando? Digamos que esta página aquí, solo voy a controlar da clic en esta página y luego presionar “Copiar enlace a página”. Ahora, cada vez que alguien llegue a ese enlace, va a venir directamente a esta página y no automáticamente a la portada o a cualquier otra página. Ahora bien, ¿y si quieres enviar un enlace a un marco específico o como una pantalla muy específica? Voy a afinarme en este modal de aquí mismo y lo voy a hacer es pasar el cursor sobre el título. De nuevo, haga clic de control, y va a hacer copiar y pegar como enlace de copia. Otra diversión aparte aquí es que también puedes copiar como PNG, y luego pegarlo en tal vez como Google Slides o algo así para que en realidad no tengas que exportar. Simplemente hace la vida mucho más fácil, tan divertido hecho. Si alguno de estos es nuevo para ti, sigue adelante y practica copiando y comprobando si el enlace te está enviando al lugar correcto. Todo lo que hemos estado hablando hasta ahora ha sido todo sobre mejorar la comunicación y ponerte en la misma página que tu equipo. Pero, ¿qué anotaciones escritas no son suficientes? A veces es muy necesario que un diseñador recorra sus diseños y hable con ellos en tiempo real. Ahí es donde entra en juego una de mis herramientas favoritas. Estaremos hablando de Loom en la siguiente lección. 6. Nivelación de la comunicación Async: Una herramienta que realmente me ha ayudado a subir de nivel mi comunicación es Loom. Si no has oído hablar de él, es básicamente un video asincrónico para ayudar a los equipos a reducir las reuniones innecesarias. En este video, te voy a mostrar cómo usar Loom para comunicarte con tu equipo como diseñador, pero antes de meterme en él, solo quiero decir que si eres alguien que se pone un poco nervioso verte en cámara o escuchar el sonido de tu propia voz y la idea de usar Loom para comunicarte con tu equipo te pone un poco ansioso, solo quería decir que te siento totalmente. Solía estar muy, muy nerviosa ante la cámara e incluso a la hora de presentar mi trabajo, me resultaba mucho más desalentador hacerlo en cámara que en persona. Hay algo en la cámara y escuchar el sonido de tu propia voz que es realmente antinatural al principio, pero solo estoy aquí para animarte a que cuanto más lo hagas, más cómodo y seguro vas a estar. Con cada video de Loom que hagas, te sentirás cada vez más cómodo y simplemente se sentirá más y más fácil. En este punto cuando hago un video de Loom para un cliente con el que estoy trabajando o alguien de mi equipo, literalmente se siente como una segunda naturaleza, ni siquiera le doy otra idea. Solo confía en mí en esto y después de esta lección, incluso puedes enviarme en un video de telar de práctica a alguien sin ningún juicio en absoluto solo para superar el miedo a enviar tu primero. He descubierto que eso me ha dado más confianza para presentar mi trabajo también en otros escenarios, como en persona o sobre un Zoom en tiempo real, y así solo te animaría a que realmente te apoyaras en él si lata. Realmente no tienes nada que perder porque Loom es totalmente gratis para comenzar, puedes tener hasta 25 videos que son cada 5 min duración antes de que tengas que empezar a pagar realmente una membresía. Si tu equipo quiere usar Loom como un todo, eso es probablemente algo para lo que podrías obtener un presupuesto de tu empresa. Una vez que tengas tu cuenta, continúa y descarga la extensión para una computadora Mac o Windows. Esto te permitirá comenzar a grabar con solo un par de clics. Al hacer clic en el icono de Loom en tu barra de estado, la aplicación se abrirá y te permitirá configurar la grabación que estás a punto de realizar. Primero, decide si quieres grabar solo tu pantalla o tu pantalla y tu cámara. Elige qué parte de la pantalla quieres capturar y asegúrate de que estás usando la cámara web y el micrófono correctos. Entonces empieza a grabar. Puedes mover tu cámara facial en cualquier momento a lo largo de la grabación, cual es muy útil, también puedes usar la pequeña barra la izquierda para pausar o detener la grabación o este lápiz aquí para dibujar en tu pantalla, llamar la atención sobre las cosas o mostrar tus ideas más allá en tiempo real. He incluido un enlace en la sección de recursos de esta clase para que veas un video real de Loom que creé para uno de los equipos en los que trabajé en los últimos años para que realmente puedas ver un verdadero problema de diseño en lugar de que yo solo invente algo por el bien de esta clase. Pensé que eso podría ser útil para algunos contextos reales, un ejemplo del mundo real, así que siéntete libre de comprobarlo si crees que eso podría ser útil. Son sólo cuatro minutos de duración. Ahora, entremos a compartir el video de Loom con tu equipo, lo cual es súper simple. Una vez que pulsas el ícono de detener, tu video se detendrá automáticamente y comenzará a subir a tu biblioteca de Loom y se abrirá una ventana del navegador para mostrarte eso. Todo lo que tienes que hacer es hacer clic, copiar enlace y ¡listo! Puedes pegarlo en cualquier lugar que quieras mostrarlo a tu equipo y obtener comentarios. Cualquier persona con ese enlace podrá comentar directamente en Loom ya sea simplemente escribiendo un comentario o grabando realmente un comentario de nuevo a usted, pero por supuesto también pueden simplemente dejar comentarios en un hilo de Slack o lo que sea que funcione para tu equipo. Loom tiene toneladas de otras características interesantes, pero para el propósito de esta clase, solo sentirse cómodo compartiendo tu trabajo esta manera es lo más importante. Realmente es un ahorro de tiempo. Si quieres tener algo de práctica, sigue adelante y graba un video de Loom para mí y envíalo a mi correo electrónico, maddy@maddybeard.com, y me aseguraré de responder. 7. Documentación de tu trabajo: Finalmente has terminado el proyecto en el que tú y tu equipo llevan meses trabajando. ¿Ese es el final de tu proceso? No. Hay un paso más, pero recomiendo encarecidamente hacerlo. Pero no te preocupes, súper simple y fácil. Creé otra plantilla para que la hagas aún más rápida. Documentar todos los proyectos que has hecho es más una táctica para ti que para cualquier otra persona de tu equipo, pero sigue siendo igualmente importante. Es una excelente manera de hacer un seguimiento de su impacto para que cuando vaya a solicitar una promoción o actualice su cartera, tenga un lugar para comenzar. Vamos a saltar directamente a la plantilla que puedes encontrar en la sección de recursos de esta clase. Como puedes ver, esta plantilla es básicamente para que puedas catalogar todos los proyectos que has trabajado en tu empresa. He incluido espacios para un título, descripción, tu rol y con quién trabajaste, fechas, horas del proyecto, cuándo se lanzó, enlaces a documentación. Como diseños, muelles de confluencia, el proyecto en vivo, un prototipo, cualquier cosa que pueda ser relevante. Así como un lugar para poner visuales o simplemente una captura de pantalla rápida para que sepas qué proyecto es cuál. Creo que es importante incluir todas las cosas en las que has trabajado, no solo grandes proyectos. Si una de estas líneas de artículos no tiene sentido para uno de tus proyectos, puedes deshacerte totalmente de ella o cambiarla. Incluso recomendaría incluir extracurriculares en esto. Básicamente en cualquier momento que hiciste un impacto en tu empresa. Tal vez has iniciado un club de lectura para tu equipo de diseño, participado en un hackathon, escrito un par de artículos para sitio web de tu empresa o incluso has organizado un sitio fuera del sitio para ayudar a tu equipo a vincularse incluir todas y cada una de esas cosas también. Adelante, toma esa plantilla y empieza a llenarla con todos los proyectos que has hecho hasta ahora. Es fácil olvidar todas las pequeñas cosas en las que gastas tiempo y energía. Rastrear esto va a ser impactante para ti tanto profesional como personalmente. 8. Reflexiones finales: Enhorabuena por pasar esta clase. Realmente espero que ustedes se vayan con las herramientas que necesitan para trabajar de manera más inteligente, y no más duro con su equipo en Figma. No olvides descargar las plantillas de esta clase en la sección de recursos. Si surgieron preguntas durante las clases, no dude en dejarlas en la sección de discusión a continuación, y me aseguraré de responder. Muchas gracias por pasar tiempo conmigo hoy y ojalá te vea en una futura clase o más en mi canal de YouTube. Adiós. [MÚSICA]