Clase 13 .

PROTOTIPADO

Figma, XD y el código
 📝 Identificar funciones de código en
Figma y XD.

💡 Realizar prototipos responsive.

OBJETIVOS DE LA CLASE 🤝 Elaborar un diseño contemplando al

equipo de desarrollo.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 13

CÓDIGO

Prototipado Figma Y XD

DISEÑO RESPONSIVE
 CRONOGRAMA DEL CURSO
Clase 12 Clase 13 Clase 14

Pruebas A/B Figma, XD y el código Sistema de diseño

PRUEBAS A/B SISTEMAS DE DISEÑO MÁS

PROTOTIPO DE CÓDIGOS USADOS

PENSANDO LOS COLORES

ALTERNATIVAS DE PRUEBAS
CREANDO PANTALLAS DE NUESTRA INTERFASE
A/B
RESPONSIVE

ITERACIONES Y COLOR SEGUNDA ENTREGA

INTERMEDIA

PRUEBAS A/B
TESTING
FIGMA, XD Y el código
 FIGMA, XD Y el código
Figma, Adobe XD y otros programas para creación de productos digitales se utilizan por
muchas ventajas y facilidades que estuvimos viendo en estas clases, como la posibilidad del
diseño colaborativo o las funciones de estilos y componentes.

Pero una de las ventajas principales son la posibilidad de ver y copiar el código y los valores
existentes de cada uno de nuestros diseños. Nos van a permitir copiar elementos de una sola
línea o conjuntos completos de valores para facilitar el proceso de desarrollo.
 FIGMA, XD Y el código
Como vimos desde la clase 0, un equipo de producto deberá estar conformado como mínimo
por un diseñador UX, un diseñador UI y un desarrollador o developer. Esto nos permitirá tomar
las mejores decisiones en nuestros productos digitales, para que tengan un buen nivel de
usabilidad, accesibilidad y sean viables para su implementación (su codificación o
desarrollo).

Al momento de pasar nuestros diseños y componentes a nuestro equipo de desarrollo será

clave que hayamos creado cada elemento con buenas prácticas y conozcamos las
siguientes funciones…
FIGMA Y el código
Figma: Inspect o inspeccionar
Vamos a poder ver y copiar valores de nuestra selección.
Podremos:
1. Las propiedades incluyen valores para las dimensiones y

restricciones de un objeto.

2. Ver el contenido en una capa de texto.

3. Vea los valores de tipografía para una capa de texto,

incluida la fuente, el grosor, la altura de la línea y más.

4. Utilice la sección Color para ver valores en modelos de

color Hex, RGB, CSS, HSL y HSB .

Figma: Inspect o inspeccionar

5. Copie los valores de las sombras (sombra interior y paralela) y

los bordes (trazo) de un objeto.

6. Vea los detalles de cualquier animación de creación de

prototipos , incluidos el disparador, la acción y el destino. También

puede ver la animación, la curva de suavizado y la duración de la

transición.

7. Vea el código CSS, iOS y Android para su selección.

Figma: Inspect o inspeccionar
Cada sección del panel Inspeccionar le permite copiar valores
individuales o conjuntos completos de propiedades relacionadas.

1. Seleccione un objeto o una capa en el lienzo o en el panel Capas .

2. En el panel Inspeccionar , coloque el cursor sobre la sección de la
que desea copiar los valores. Por ejemplo, seleccione una capa de
texto para copiar el Contenido o una capa para copiar sus valores
de Color o Sombra .
3. Haga clic en el botón azul Copiar para copiar todos los valores en la
sección, o haga clic en un solo elemento de línea para copiar un
solo valor.
4. Pegue los valores copiados en cualquier lugar.
Figma: Export o exportar
Es posible que ustedes o un colaborador deban exportar sus diseños
como parte del proceso de desarrollo. Figma admite los siguientes
formatos de exportación: PNG, JPG, SVG y PDF.
Para exportar sus activos:
1. Haga su selección y haga clic en en la sección Exportar.
2. Acceda a las opciones de exportación en la barra lateral derecha:
Los colaboradores con “can view” pueden acceder a la
configuración de exportación desde la pestaña Exportar de la
barra lateral derecha.
Los colaboradores con “can edit” pueden encontrar la sección
Exportar en la pestaña Diseño .
3. Aplicar la configuración de exportación a su selección.
4. Exporta tu selección actual.
 Figma: Componentes
Cualquiera que pueda editar el acceso a un archivo tiene
la opción de agregar una descripción y un enlace a sitios
externos para la documentación de los componentes.
Cualquiera que pueda ver el acceso a un archivo puede:

1. Nombre
2. Descripción cuando se proporcione
3. Enlace a documentación externa cuando se
proporcione

Es importante cuando hablamos de componentes usar

nombres correctos y saber indicar nuestras necesidades
al equipo de devs.
Inspect EN FIGMA
XD Y el código
XD: Compartir

1. Abre el archivo de Adobe XD que desee compartir. En XD,

cambie al modo Compartir.
2. En el panel Configuración de vínculos, establece un título
específico para el diseño.
3. En Ver configuración, selecciona Desarrollo y elige la salida
de su factor de forma (Web, iOS o Android)
4. Haces clic en Crear vínculo para generar un vínculo que se
pueda compartir. También puedes acceder a él desde la
lista de selector de URL, en el inspector de propiedad en
el modo Compartir.
XD: Compartir
Para ver los estilos de diseño en un vínculo de
especificaciones de diseño compartidas, abres el
vínculo compartido en un navegador y haces lo
siguiente:
1. Para ver el token/estilos/estados de diseño y
su código hexadecimal, haz clic en </>. El
panel muestra los tokens de diseño
correspondientes. Pasa el ratón sobre los
tokens de diseño para ver su código
hexadecimal.
2. Para ver las variables, haz clic en { }.
COMPARTIR Y CÓDIGO EN XD
 ☕
BREAK
¡5/10 MINUTOS Y VOLVEMOS!
 Recordatorio

¡ RESPONSIVE DESIGN !
 Recordatorio
RESPONSIVE DESIGN
El Responsive Design o diseño adaptativo, es la técnica que se usa en la
actualidad para tener una misma web o producto digital adaptado en los
diferentes dispositivos que nos brinda la tecnología: desktop/ordenador, tablet y
mobile/Smartphone.

Se trata de redimensionar y colocar los elementos de la web o producto de forma que

se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una
mejor experiencia de usuario.
 Recordatorio

Proyecto dribbble
 Recordatorio
RESPONSIVE DESIGN
Uno de los beneficios principales del diseño responsive es el cómo facilita el código
y hace más fácil el trabajo de los desarrolladores de nuestro equipo. Para ello, es
importante que pensemos en cada instancia de nuestros componentes.

Teniendo esto en claro vamos a realizar un ejercicio esencial a la hora de realizar

productos digitales.
CREANDO UNA VERSIÓN RESPONSIVE

TIEMPO: 25 MIN
HACIENDO UNA VERSIÓN RESPONSIVE
1. Elige alguna o algunas pantallas claves de tu producto digital.

2. Realizaremos una versión responsive de esa pantalla utilizando nuestros

componentes responsives. Si estás trabajando en mobile, pasa a desktop. Si estás

trabajando en desktop, pasa a mobile.

3. Trabajaremos en un documento colaborativo y los tutores podrán corregir y responder

dudas.
¿CÓMO NOS FUE?
 2

SEGUNDA ENTREGA DEL PROYECTO FINAL

SEGUNDA ENTREGA DEL PROYECTO FINAL
Formato Documento Google Slides o Figma/XD con permiso de comentarios. El 2

nombre del archivo o link debe ser “Idea+Nombre Apellido”.

Se debe sumar una diapositiva con el link de editor al proyecto para poder visualizar
el armado del proyecto.

>>Objetivos Generales:
1.Integrar todos los desafíos realizados en el proyecto.
2.Chequear y revisar el proyecto.

>>Objetivos Específicos:
1.Mostrar los avances del proyecto. Mejoras en los wireframes y avances en la cantidad y calidad de las
pantallas.
2.Observar las decisiones tomadas a partir de los resultados de las distintas pruebas

>>Se debe entregar: Proyectos de la primer entrega + Animaciones y transiciones, componentes, variables,
responsives, Transiciones y Microinteracciones, Resultados de A/B Testing. Prototipo en Media
PRESENTACIÓN EJEMPLO
¿PREGUNTAS?
 ¿QUIERES SABER MÁS?
TE DEJAMOS MATERIAL AMPLIADO DE LA
CLASE
● Tutorial App inventor | inventors App

● Tutorial AppInvertor, crear una aplicación| El Androide Libre

● Tutorial Framer | Framer

● Designers who code. A Story about Hybrids | centigrade.de

● Imagining the Future Shopping Experience | Nina Wei

● Light, Camera, Action Prototype | medium.com

¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:

- Código en Figma y XD
- Diseño Responsive
OPINA Y VALORA ESTA CLASE
#DEMOCRATIZANDOLAEDUCACIÓN