Figma tiene integrado ya el asset handoff nativo sin necesidad de exportar, igual con control de versiones de 30 días, además tiene un prototipado básico muy cómodo sin límite de archivos que le puedes mandar como link web a quien tu quieras. Los archivos todos van la nube. (¿Linux alguien?) Todo en su versión gratuita. Únanse al lado oscuro. Hay galletas.
Aprender las bases de un proyecto de Diseño de Interfaz y UX
Qué aprenderás sobre el diseño de interfaces UI y UX
¿Qué es user experience?
Qué implica ser un diseñador de interfaces
Básicos de Diseño
Principios de Gestalt y UX
Principios de Usabilidad y Heurística
Kickoff del proyecto del curso
Realizar la investigación inicial de un proyecto UI
Tipos de investigación
Entender el problema: ¿Qué queremos solucionar?
Benchmarking
User Research: Encuestas
User Research: Entrevistas
User Personas
User Journeys
Organizar la información y bocetar los primeros wireframes
Análisis de Interfaces
Introducción a la Arquitectura de la Información
Patrones de UI
Wireframes: comienza en papel
Guerrilla testing con Paper Prototyping
Wireframes digitales en Sketch
Diseñar los detalles de nuestra interfaz de producto
Mood Board
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
Diseño Responsivo y Adaptativo
Design System
User testing
Entregar el diseño de la interfaz e iterar
Cómo entregar para desarrollo: Zeplin
Cómo seguir probando tu interfaz: A/B Testing con Optimize y HotJar
Cierre del curso
Mentorías expert
Diseño UI en vivo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesiónRecursos
Existe una plataforma ideal y enfocada al trabajo colaborativo, con el que se puede compartir el trabajo de un equipo entre sí. Su nombre es Zeplin.
Es bastante simple de usar, y las herramientas de diseño más populares tienen una muy buena integración con este software. Solo es cuestión de descargar el plug-in correspondiente y crear una cuenta gratuita en Zeplin. Una vez instalado, solo hay que decidir el workspace a donde irá el diseño.
Al ya estar dentro de Zeplin, se disponen de ciertas funciones, como hacer anotaciones especiales, consultar el código HTML y CSS de los componentes, entre otras, que ayudan al equipo a tener un control del desarrollo mejor y más eficiente.
Aportes 38
Preguntas 7
Ordenar por:
Esta misma funcionalidad la trae adobe Xd en la opción share seleccionando para developers es casi idéntica ha excepción de auto-generar código para react o css interesante.
Cómo entregar para desarrollo: Zeplin
Parte de nuestro rol como diseñadores es colaborar con el equipo de desarrollo, una parte importante de esto es poder hacer entregables de nuestro trabajo de una forma rápida y fácil para ellos.
Zeplin es una herramienta que nos permite hacer entregas a desarrollo para que nuestros ingenieros de frontend puedan trabajar de manera facil y puedan implementar nuestros diseños. Esta herramienta se puede usar con Sketch, Figma, Photoshop y AdobeXD a traves de plugings.
Con la tecla comando y clic (o ctrl y clic) podemos seleccionar el espacio donde queremos dejar un comentario.
Aquí también podemos tener manejo e versiones.
La gran ventaja de utilizar Zeplin es que nos permite tener todo en un solo lugar, este es una manera de tener un repositorio visual de nuestro diseño y de permitir que todas las personas de nuestro equipo tengan acceso a el y podamos hablar el mismo lenguaje.
Git para diseño de Interfaces, excelente!
El codigo que suelta Zeplin es de referencia no lo utilices en tus proyectos a excepción de los colores obvio
También con XD tienes una opción parecida.
Zeplin es una increible herramienta colaborativa entre el Diseño y la Programacion. Nos permite, y nos da, el momento exacto para conectar ambos mundos. Un paraiso.
Yo y mi compu windows no podemos usar sketch :c
Zeplin es un software que funciona como repositorio de nuestros diseños del producto digital. Permite hacer entregas al área de desarrollo, para que los ingenieros Frontend puedan trabajar el código de manera más fácil y puedan implementar funcionalmente nuestros diseños. Zeplin se conecta con software de diseño UI /UX, como Figma, Sketch, Adobe XD y Photoshop CC, con el fin de exportar los archivos de manera más sencilla. Aunque Figma también ofrece el mismo beneficio con Zeplin.
Lo bueno de este curso es que podemos utilizar cualquier herramienta para el diseño de interfaz.
Cuando grabaron este video ya no existía figma?? figma tiene incorporado para literal hacer todo el proceso del proyecto, desde la parte de diseño hasta la parte de implementación de código, aparte que es una herramienta colaborativa
Ya hay curso de Figma https://platzi.com/cursos/figma/
Con inVision a parte de subir los prototipos con interacciones, puedes hacer los entregables al área de desarrollo, para la opción de ver código, colores, tipografía, etc.
Desconocía esta herramienta, genial!!
Lo he usado en figma y me gusto bastante =D
No sabía que ésta herramienta existía, está fantástica.
1 los diseños no estandarizados entre plataformas
2 no contemplar variables de búsqueda en formularios
3 en algunos casos se pierden funciones al ver cosas en móvil contra lo que se ve en escritorio
4 sistema de usuarios
5 sistema de notificación de ofertas nuevas en función de tu ubicación
6 evitar los filtros de ubicación, utilizando un filtro de municipio
7 evitar los filtros lo mas posible usando la ubicación
8 publicidad no invasiva
9 inicio de sesión federado(no se si esto aplica)
10 botones intuitivos
¿Como estuve?
No sabia de este plugin, que facilidad!!!
Buen tip!
Logre conectar Figma a Zeplin 😁
GENIAL LO DE DEJAR COMENTARIOS
Buena aplicación
Zeplin facilita en parta la elaboracion de codigo
Otro software my bueno es Abstract que sirve como controlador de versiones y sea compartido con Desarrollo. En este caso se llaman Collections al grupo de pantallas de una funcionalidad. Además con este pueden trabajar varias personas del equipo creando lo que se llama BRANCH. Con esto podemos guardar los cambios en el mismo archivo y solo consultar el histórico.
Gracias
Hola Tannia esta clase esta repetida y mal titulada, ya salió
Yo he utillizado XD y va de lujo
😮!! que excelente plataforma!!
miss, qué otro conjunto de herramientas equivalentes, orientadas para un web developer hay? (recomendables)
La idea es que el cliente pueda validar el diseño incluso la responsividad de su página.
Y que arroje claro los frangmentos de código como insumo para la programación?
zeplin: generar entregas a desarrollo para implementar Front-end mediante un plugins enlaza adobe XD- stetch -figma
Interesante esto para poder ayudar a agilizar el proceso a los desarrolladores.
Buena aplicación
¿Adobe Xd también arroja código?
tarde en ver este curso, en mi actual trabajo usan zeplin y veo que es una herramienta muy práctica
Sketch…sketch…sketch…
Si es vedad ahora XD lo permite sin problema
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.