Anexo Clase 12 y 13:

Wireframes Digitales y Patrones de Diseño

Cómo crear un Frame para colocar elementos en él

1) Crear un nuevo archivo de diseño en Figma: Drafts\New design file

2) Crear un Frame dentro del archivo Figma:

3) Dibujar un rectángulo y redimensionar su tamaño en caso de ser necesario.

 4) Dentro del Frame podrá colocar los elementos para comenzar a armar su
prototipo.

Cómo importar un archivo Figma

1) En la pantalla principal de Figma seleccionar Import File:

2) Seleccionar el archivo Figma a importar y hacer clic en Abrir:

Los alumnos importarán desde Drafts los siguientes archivos figma, para
realizar las tareas correspondientes a cada clase (no los mezclen):

● _Clase 12 Wireframe Digital.fig

● _Clase 13 Patrones.fig

Cómo buscar Plugins o Archivos en la comunidad Figma

Para buscar archivos Figma: https://www.figma.com/community.

Ejemplos:

● Mobile Wireframe UI Kit:

https://www.figma.com/community/file/1083028153727751436
● Vapor - Wireframe library (Demo):
https://www.figma.com/community/file/947562866838208459

Para buscar plugins para Figma: https://www.figma.com/community/plugins.

Ejemplos:

● Iconify: https://www.figma.com/community/plugin/735098390272716381/Iconify
● Wireframe: 360 Degree Wireframe Kit for Mobile
Material multimedia complementario
Curso de introducción a Figma:
https://www.youtube.com/playlist?list=PLQgVtkPk0Kahgg2RChS8SnioAtGmrGLj5

Cómo ver un prototipo funcionando con el skin del celular

(Clase 13: En este punto ya debemos saber si diseñaremos

para Android o IOS y seleccionamos el modelo de celular.)
Ir a Prototype\Show prototype settings

1) Seleccionar el tipo de dispositivo

 2) Presionar el botón PLAY

Cómo compartir el link de un archivo de figma

1. Hacer clic en Share
2. Ver que el Archivo de figma este como Proyecto y no como Draft
3. Verificar que cualquier persona con el Link pueda editar - Anyone with a link
can edit.