Interfaz en Figma

Clase 2 de 25 • Curso Básico de Figma - 2022

ISAAC DANIEL ATAUCURI YNFANTE

student•

• Primero descarga la app para escritorio de Figma. • Luego crea tu cuenta, nombra tu primer equipo y crea tu primer proyecto. • Figma me preguntará si crearé un archivo de ‘diseño’ o ‘figjam’, el primero es un espacio vectorial para la creación de interfaces y el segundo es un tablero para la colaboración. Usaremos el archivo de diseño. • Figma sigue esta secuencia: equipo-> equipo -> proyecto -> archivos-> páginas. • Conceptos: o Páginas/ Pages: Todo el espacio que existe y captura todas las capas de tu espacio de trabajo. o Capas/Layers: Objetos que componen la interfaz son lo s bloques compuestos de textos vectores e imágenes y estos bloques se pueden dividir en grupos o frames. • El frame es el espacio de trabajo, aquí iniciaremos, se crea presionando la tecla F o A. • Crearemos una app de notas desde cero. • Luego hemos iniciado en un lienzo en blanco (blank canvas) para luego elegir el frame ‘android small’ tamaño estándar 360*640.

Cristhian Villar

student•

Hecho, vamos bien... Gracias.

Cindy Milena Fontalvo Jiménez

student•

Muchas gracias Isaac

Rubén Ernesto Aragón Gil

student•

Ya he hecho muchos cursos en Platzi y poco lo he llevado a la práctica, creo tener lo suficiente para empezar con el diseño, y luego partir con el código, sé que soy principiante, pero de lo que logro... lo logro.

yesica tamara mattos

student•

Esa es la actitud !

Jose Noe Castellanos Trejo

student•

Así empezó yo, empeze con lo básico para diseño, solo así pude entener ciertas cuestiones del desarrollo front-end.

Jesús Ignacio García Fernández

student•

Ya tengo mi cuenta, mi primer proyecto, y mi primer frame.

Con ganas de seguir aprendiendo

Jesús Ignacio García Fernández

student•

Se puede utilizar como aplicación web sobre el navegador pero lo puedes descargar como aplicación de escritorio.

Para linux los pasos puedes seguir este enlace

Eduardo Zegers

student•

Que gran aporte, justo estaba buscando esto!

alejandro chávez

student•

graax

Maria Cristina Del Pilar De la Barra Portocarrero

student•

Esperaba este curso renovado

German Pinilla

student•

++Interfaz en Figma++

En esta clase veremos un poco sobre que es Figma y su interfaz y una breve introduccion al proyecto que desarrollaremos a lo largo del curso.

Lo primero que debemos hacer es descargar la aplicacion desktop de Figma desde la pagina oficial, alli podremos encotrar los instaladores de la aplicacion para los sistmas operativos MacOSX y Windows.

++Podemos descargar Figma desde su pagina oficial:++ https://www.figma.com/downloads/

Figma funciona en web, pero es recomendable usar la aplicacion, ya que esta optimizada para el desarrollo de aficaz de nuestras interfaces y para que siempre tengaos la ultima version actualizada.

++Como empezar a usar Figma?++

Crear una cuenta asociada a la cuenta de google
Nombre de equipo (Sino tienes un equipo, entonces tu nombre o un nombre de pruebas)
Crear y nombrar un proyecto

Al crear un nuevo archivo, Figma nos despliega 2 opciones para crear nuestro proyecto, que son:

* Archivos de diseño / Design Files: Es un espacio detrabajo vectorial, pensado para 
la creacion de interfaces como tal.

* Archivos de Figjam / Figjam Files: Es un tablero digital interactivo que permite 
crear sesiones de co-creacion con otras personas y esta enfocado al proceso de 
ideacion.

En este curso trabajaremos la creacion de "Archivos de diseño / Design Files".

La estructura de los archivos en figma va asociado a un proyecto y a un equipo. Lo que podemos traducir en que necesariamente, debemos crear un Equipo y un proyecto.

[Equipo] -> [Proyecto] -> [Archivos del proyecto]

++Paginas en Figma++ Son basicamente todo el espacio en dos dimensiones que existe y que captura todas las capas de tu espacio de trabajo.
++Que son los layers / capas?++ Son todos los diferentes objetos que van a componer mi interfaz como los son los bloques que continen texto, vectores, imagenes, y tambien pueden tener grupos o frames y todo dentro de una pagina.
++Punto de partida++ Nuestro punto de partida sera siempre crear un frame o espacio de trabajo y lo podemos crear unicamente pulsando "F" o "A" en nuestra aplicacion de Figma. Una vez presiones alguna de las dos teclas, figma pregunta por el tamaño del dispositivo.

William Ruiz

student•

gracias por tu aporte

JOSE ENRIQUE GARCIA CRUZ

student•

Estoy emocionado, me intriga como mejorara mi forma de ver y hacer el diseño de interfaces como programador,

Luis Rodríguez

student•

Ya hice todo el curso, pero antes del examen, voy a volverlo a ver porque estoy realizando un proyecto y de paso quiero reforzar lo que aprendí, pues vengo de XD.

Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech

student•

🤔Me pregunto: Qué pasará con Adobe XD ahora que se compró Figma....?

Jesús Ignacio García Fernández

student•

Un frame se crea presionando la tecla "F" o la tecla "A"

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

Es recomendable usar Figma como aplicación en el escritorio
En Figma podemos trabajar con dos tipos de archivos: El de diseño y el de FigJam
El archivo de diseño esta pensado para las interfaces
El archivo de FigJam es un tablero interactivo e inteligente que esta pensado para la ideación
La estructura de Figma viene así: Equipo -> Proyecto -> Archivos -> Paginas
Las páginas son todo el espacio donde estarán las capas de mi archivo
Las capas son todos los objetos que componen mi interfaz como por ejemplo el texto, los rectángulos, botones, etc.
Siempre iniciamos con un Frame = Espacio de trabajo
Vamos a hacer un bloc de notas en este curso :)
Nuestra versión gratis nos permite crear solamente 3 páginas por proyecto
La tecla "F" es el atajo para crear un Frame
Un tamaño estándar de interfaces en Mobile lo encontramos en Figma como Android Small

William Ruiz

student•

gracias por tu aporte jeisson

Pedro Isaac Aguilar

student•

Se ve muy bien la primera clase en la interfaz, de este curso nuevo de Figma. Desde el curso anterior que había de Figma veo que el profesor Santiago es muy bueno enseñando a trabajar en este software!

Yocselys Bermúdez

student•

Figma Desktop, cuenta y primera página creadas, emoionada por todo lo que viene a continuación. 👩‍💻🙌

Giuliana Armentia Ramirez

student•

Wii!! al fin piensan en los de diseño 🥲

Henry J. Perez

student•

Linux pro tip

En caso de que estes utilizando Linux, como yo, hasta la fecha no tienen aplicación para Linux.
La solución es que puedes utilizar una navegador como Chrome, Brave o Edge y crear un shortcut con ventana independiente y funciona igual q la version de WIndows.
Yo lo he hecho con Notion y Whatsapp web y funciona de maravilla. Espero te sea util

Claudio Othón Ortiz Mata

student•

gracias por la ayuda

laura castro

student•

alguien sabe cuales son los 3 modos de figma? porque lo preguntan en el examen pero el no habla de modos :( quede perdida

Danilo Galindo

student•

**Los 3 modos de Figma son: ** Diseño, prototipado y código.

Luis Angel Castillo Vega

student•

Me paso lo mismo. jaja

Jhancarlos Vásquez

student•

Estoy estudiando para ser Frontend y me surgió la necesidad de aprender Figma, que bonito encontrarse un curso recién desempaquetado y actualizado

Diego Colín

student•

Somos 2 xd

Jose Tellez

student•

Estoy estudiando programacion frontend, tecnicamente no voy a ocupar figma para diseñar porque no es mi area, ppero estoy haciendo un proyecto y lo maqueté todo con papel y lapiz, ahora quiero pasarlo a Figma y tener un diseño chulo mientras en el camino aprendo a usar la herramienta, nunca se sabe.

Ashley Arturo Martínez Wilson

student•

Design File vs FigJam File

Design Files

Los archivos de diseño en Figma son donde los diseñadores y equipos de trabajo pueden crear, editar y colaborar ene el diseño de interfaces y experiencias de usuario.
Estos archivos son adecuados para el diseño de aplicaciones, sitios web y otros productos digitales.
Algunas características clave de los archivos de diseño en Figma incluyen:
- Herramientas de diseño vectorial
  - Figma ofrece herramientas de dibujo y edición vectorial que permiten a los diseñadores crear formas, íconos y elementos gráficos con presición.
- Componentes y estilos
  - Figma facilita la creación y gestión de componentes reutilizables y estilos que pueden aplicarse a lo largo de un proyecto, promoviendo la coherencia y eficiencia en el diseño.
- Diseño responsivo
  - Con las herramientas de auto-layout y restricciones de diseño, Figma permite a los diseñadores crear interfaces que se adaptan automáticamente a diferentes tamaños de pantalla y dispositivos.
- Prototipado y animaciones
  - Figma incluye funciones de prototipado que permiten a los diseñadores crear y compartir prototipos interactivos y animaciones para validar y refinar sus diseños antes de la implementación.

FigJam Files

FigJam es una herramienta de colaboración y pensamiento visual en tiempo real que permite a los equipos trabajar juntos en la generación y organización de ideas.
Los archivos de FigJam están diseñados para la fase inicial de un proyecto, donde los equipos pueden definir objetivos, identificar problemas y explorar soluciones.
Algunas características clave de los archivos de FigJam incluyen:
- Tablero digital interactivo
  - FigJam proporciona un lienzo infinito en el que los equipos pueden crear diagramas, mapas mentales, esquemas de flujo de trabajo y otros tipos de representaciones visuales.
- Herramientas de dibujo y anotación
  - FigJam ofrece herramientas básicas de dibujo, así como opciones de texto, notas adhesivas y formas predefinidas para facilitar la comunicación visual de ideas.
- Colaboración en tiempo real
  - Al igual que en los archivos de diseño, FigJam permite a los equipos colaborar en tiempo real, con la posibilidad de ver los cursores y las ediciones de otros usuarios a medida que ocurren.
- Integración con archivos de diseño
  - FigJam se integra con los archivos de diseño de Figma, lo que permite a los equipos llevar fácilmente las ideas y conceptos generados en FigJam al proceso de diseño en sí.

Yelitza Ibonny Cruz Corpuna

student•

actualmente figma no se puede instalar :c ¿la puedo seguir usando en web?

Barbara Ramos

student•

si, sin problemas

Alejandro Bejarano

student•

¿Hay forma de ahorrar tiempo descargando o usando componentes de diseño predeterminados como una barra de búsqueda, menús o barra de botones?