Actividad 3: Instagram en Figma
Última actualización
¿Te fue útil?
Última actualización
¿Te fue útil?
Figma es una de las muchas herramientas de diseño y prototipado que existen. En Laboratoria, la usamos porque permite colaboración en tiempo real y se puede usar desde el navegador de cualquier computador (independientemente de su sistema operativo). ¡Y, además, es una herramienta gratuita! Durante el resto del curso y para el desarrollo del proyecto utilizaremos Figma. Así que te dejamos este ejercicio y contenido introductorio para ayudarte a empezar con Figma. Y para que vayas probando tu capacidad de aprender y las técnicas para ello.
Para estar lista, necesitamos que crees una cuenta. Anda a Figma.com y crea una cuenta. Para usar Figma te recomendamos usar Google Chrome o Firefox.
Para que vayas probando Figma y conociendo su interfaz vamos a hacer un ejercicio en el que replicarás en blanco y negro la interfaz de Instagram.
Mira el siguiente video video.
Luego que hayas creado tu cuenta vas a poder crear tu sandbox.
Dentro del espacio de trabajo o workspace encontrarás una página para el ejercicio, anda a esa página. En esa página podrás crear las distintas pantallas (artboards) que quieras crear para tu proyecto.
Para crear un artboard haz clic en el ícono Frame tool que es el segundo ícono luego del menú.
Ahora en el lado derecho te aparecerán los tamaños de pantallas predeterminados en Figma.
Estos son tamaños de pantalla predeterminados, pero puedes editar. Para ello, selecciona el artboard que acabas de seleccionar y en el lado derecho te saldrán las opciones. Para cambiar el tamaño utiliza W y H. Que como te imaginarás, (recordando CSS) vienen de Width y Height (ancho y alto). Es probable que tengas que cambiar el height cuando crees pantallas que son scrolleables.
Luego de crear los artboards que necesitas. Tu archivo puede quedar de esta manera:
File/workspace: Instagram-mobile
Artboards: home, perfil, login, registro
Podrás ver todos tus artboards en el lado izquierdo de la pantalla, donde podrás editar el nombre de cada uno. Aquí un ejemplo:
Para crear la primera pantalla de Instagram, antes tenemos que crear 4 figuras básicas: un línea, un círculo, un cuadrado y un triángulo.
Para crear todas estas figuras tendremos que usar la tercera opción a la derecha del menú shaping tools.
Línea
Para crear una línea usamos line tool dentro de las opciones de shaping tools y creamos la línea. Con las opciones de la derecha podremos cambiar su ancho, su color, su posición, tamaño, etc. Siéntete libre de explorar todas las opciones.
Círculo
Para crear un círculo usamos elipse tool dentro de las opciones de shaping tools y creamos el círculo. Con las opciones de la derecha podremos cambiar su ancho, su color, su posición, tamaño, etc. Un tip, para crear un círculo perfecto, presiona shift cuando lo estés dibujando.
Triángulo
Para crear un triángulo usamos polygon tool dentro de las opciones de shaping tools y creamos el triángulo. Con las opciones de la derecha podremos cambiar su ancho, su color, su posición, tamaño, etc. Un tip, para crear un triángulo equilátero (todos sus lados iguales), presiona shift cuando lo estés dibujando.
Cuadrado
Para crear un cuadrado usamos rectangle tool dentro de las opciones de shaping tools y creamos el cuadrado. Con las opciones de la derecha podremos cambiar su ancho, su color, su posición, tamaño, etc. Un tip, para crear un cuadrado (todos sus lados iguales) y no un rectángulo, presiona shift cuando lo estés dibujando.
Ahora que tienes todas las formas. Intenta mezclarlas, duplicarlas, editarlas y crea la pantalla del home de Instagram en blanco y negro.
El cuadrado sirve para los posts del friends feed o news feed.
Los círculos para mostrar los perfiles y sus stories. Si le das un mayor borde,
puedes mostrar stories que aún no ves.
La línea más el círculo pueden crear la lupa para la sección de buscar.
El triángulo con algunos cuadrados pueden hacer la casita del botón de home.
El logo de Instragram lo puedes encontrar rápidamente en Google :)
Siéntete libre de hacer la pantalla lo más real posible.
Un ejemplo:
Una vez que tengas la pantalla principal, intenta hacer una segunda pantalla del app. Aquí otras pantallas de ejemplo hechas por nosotros.
