Buenas Prácticas para Organizar y Nombrar Elementos en Canvas
Todos los cursos GRATIS
Se acaba en:
:::
Resumen
Tener orden en tus documentos es algo muy importante, ya que vas a compartir especificaciones a programadores, clientes y hasta otros diseñadores. Si implementas buenas prácticas en tu documentación debería de ser muy sencillo entender cómo utilizar tus archivos.
Para que otras personas puedan utilizar tus documentos sigue siguientes buenas prácticas:
Ten una estructura para nombres de componentes y elementos en común con tu equipo y nombra todos los elementos de tu documento.
Agrupa tus componentes para que sea más sencillo encontrarlos
Ponle nombre a todos tus artboards
Usa símbolos reutilizables con los estados de tus elementos (de preferencia en documentos diferentes de los flujos)
Documenta el nombre, descripción y estados de tus componentes
Ordena tus pantallas, puedes colocar los Flujos de manera horizontal y las secciones de manera vertical
Utiliza el menú de layers de elementos de cada artboard para visualizar y navegar entre las capas
Un aporte, que en lo personal me ayuda mucho. Cuando esten diseñando una app, descarguen en sus celulares la app "espejo" y vinculen las pantallas. De esa manera, podran ver un poco mejor los componentes y la distribucion de espacios. Estarán un paso mas cerca del usuario y se pueden utilizar los prototipos para simular el funcionamiento.
Recomiendo Figma!
saludos
Con la app de XD para móviles también se puede hacer eso
Aquí vale la pena mencionar que si a la hora de diseñar utilizas BEM todo el mundo del Front End te lo agradecerá (aún no llego a Back End así que no sé si ellos también lo harán)
Obligatorio usar BEM
Principalmente Frontend, Backend necesita más entender que pantalla necesita qué datos o funcionalidades para organizar las rutas, conexiones y peticiones. Ya el nombre de los componentes y su clase son más importantes para Frontend que para Backend.
Muchas grandes compañías usan el gris basado en 8px, pueden verlo por ejemplo en el Design System de Trello: [Nachos] (https://design.trello.com/style/layout).
También pueden aprender sobre espaciado revisando la documentación de Design Systems. Les recomiendo Carbon el Design System opensource de IBM.
También recomiendo introducir cajas con comentarios junto a pantallas o flujos que pueden resultar más complejos.
Es algo que conlleva muy poco esfuerzo y ayuda a que cualquier miembro del equipo entienda mejor cómo hemos resuelto nuestro trabajo
26. Orden de pantallas y buenas prácticas
Estructura de nombres
Agrupar componentes
Documentar componentes con su descripción y estados
Ordenar pantallas
ORGANIZACIÓN ES MUY IMPORTANTE. Ya que al abrir nuestro archivo otros desarrolladores se pueden confundir. (Interacción en el archivo otorgado).
El orden de colocación de las pantallas debe ser coherente y ordenado, que cualquiera abra el archivo y sepa entender el por que de cada pantalla por que está puesta ahí.
Por ejemplo organizar pantallas de forma HORIZONTAL, pero sus interacciones de forma VERTICAL puede funcionar muy bien.
Pongámosle nombre a todos mis elementos.
Una buena práctica es tener cada una de las capas bien nombrada (de preferencia en inglés, para facilitar el trabajo de desarrollo) y dividida en carpetas (dentro de XD, Sketch o Figma) también debidamente nombradas. Otra buena práctica es mantener agrupados en conjuntos las moléculas y organismos, así como convertir a componentes (símbolos) para hacer más eficiente el flujo de trabajo de diseño - desarrollo.
tengo una pregunta. Estoy usando figma para el diseño y quisiera saber de que forma se pueden guardar las tipografias y los colores para tener un mayor acceso a el? ya que tengo todo desaparramado y nada guardado y solo me aparece la opcion de layers
te comparto este recurso que me ayudo mucho cuando estaba aprendiendo Figma ❤️
¿Por qué el “menú open” es mas grande que las otras interfaces? No afecta en algo?
Gracias, mi TOC me ayuda a organizar todo adecuadamente. 😂
Yo también padezco del mismo TOC
Cool, yo igual suelo llevar el flow de modo horizontal (por ejemplo las views de cada tab en el tab-bar)l y de manera vertical cada proceso dentro de ese view
Venía haciendo lo mismo, pero parece interesante la manera de agrupar de Rulótico, lo voy a intentar
Los componentes y los simbolos son casi iguales?
Así es.
En la última versión de Adobe Xd los símbolos fueron remplazodos por componentes.
Excelente clase Ruló!!
Pregunta, mas recomendado agrupar los elementos de botones demas contenido en simbolos o en agrupaciones?
Me parece mejor usar símbolos con esto si tienes que cambiar un botón por ejemplo solo modificas el símbolo y esto cambiara todos los botones que heredan de ese símbolo, si usas agrupaciones vas a tener que ir por cada grupo cambiando las propiedades.
Deberías crear símbolos o componentes para cada elemento que vayas a repetir. Cuando creas la aplicación deberías reusar la mayor cantidad de componentes que puedas para que sea mucho más fácil de hacer el diseño y facilitarle la vida al desarrollador. Te dejo el link de un artículo de Figma en donde muestra las mejores prácticas para componentes y estilos
El grupo de estrellas no debería también estar escrito en ingles?
Sí, creo que no se dio cuenta...
Que buena clase
mi única anotación del curso es que seria bueno que enseñaran herramientas que no sean de pago
Usa Figma y miente en el apartado de estudiante, asi te lo daran gratis
🤘 El profe tiene razón, una muy buena práctica y que a futuro nos va a ayudar demasiado es ser muy organizado con los nombres, estados, componentes y faces. Al inicio puede parecer tedioso tener que hacerlo, pero cuando ya tienes demasiados elementos en tu diseño, será AÚN más insufrible. 👿
La organización siempre facilita el flujo de trabajo entre varias áreas
Algo que hacemos en mi equipo de trabajo, es nombrar cada pantalla de acuerdo a su correspondiente Historia de Usuario, para tener una guía de documentación directa de cada pantalla.