Interfaz en Figma

• 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.

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.

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

Con ganas de seguir aprendiendo

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

Esperaba este curso renovado

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.

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

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.

Un frame se crea presionando la tecla “F” o la tecla “A”

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

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!

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

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

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

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.

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í.

Para los que tengan el correo institucional que termine en .du les aconsejo que le saquen todo el jugo ya que varias empresas dan descuentos o incluso acceso total a las versiones premium como figma, JetBrains da todos sus ides gratis y para mí lo mejor sería copilot de githup

Herramientas y funcionalidad de Figma

• Figma ofrece una amplia gama de herramientas y funcionalidades que permiten a los diseñadores y equipos trabajar de manera eficiente en proyectos de diseño y prototipado.
• Aquí hay una descripción general de algunas de las principales características y conceptos en Figma:
  • Equipos
    • Figma permite a los usuarios organizarse en equipos, lo que facilita la colaboración y el intercambio de recursos entre miembros del equipo.
    • Los equipos pueden tener diferentes niveles de acceso y permisos, dependiendo de las necesidades del proyecto.
  • Proyectos
    • Los proyectos en Figma son colecciones de archivos de diseño y FigJam relacionados con un tema o iniciativa específica.
    • Los proyectos ayudan a organizar y gestionar el trabajo en Figma, especialmente en equipos grandes o en entornos donde se están trabajando en múltiples proyectos simultáneamente.
  • Archivos
    • Los archivos en Figma son los documentos individuales donde los diseñadores crean y editan sus diseños (Design Files) o trabajan en la generación de ideas y colaboración (FigJam).
  • Páginas
    • Dentro de un archivo de diseño, Figma permite a los usuarios crear múltiples páginas para organizar y separar diferentes partes del proyecto.
    • Las páginas pueden representar diferentes etapas del proceso de diseño, diferentes secciones de un sitio web o diferentes vistas de una aplicación.
  • Control de versiones
    • Figma ofrece un sistema de control de versiones que permite a los usuarios guardar y acceder a versiones anteriores de sus archivos.
    • Estos facilita el seguimiento de cambios y la colaboración en proyectos a los largo del tiempo.
  • Prototipado
    • Figma ofrece herramientas de prototipado que permiten a los diseñadores crear prototipos interactivos de sus diseños.
    • Estos prototipos pueden incluir transiciones, animaciones y acciones de usuario, lo que permite a los equipos probar y validad sus ideas antes de implementarlas.
  • Herramientas de diseño
    • Figma proporciona diversas herramientas de diseño vectorial, como selección, pluma, rectángulo, elipse, línea y texto.
    • Estas herramientas permiten a los diseñadores crear y manipular formas y elementos gráficos en el lienzo.
  • Capas y marcos
    • Los objetos en Figma se organizan en capas, que se pueden anidar dentro de marcos (frames).
    • Los marcos son contenedores que pueden representar diferentes dispositivos o tamaños de pantalla, lo que facilita el diseño responsivo.
  • Componentes y estilos
    • Figma permite a los diseñadores crear componentes reutilizables y estilos que pueden aplicarse en todo el proyecto.
    • Los componentes son elementos de diseño, como botones o tarjetas, que se pueden reutilizar en diferentes partes del diseño.
    • Los estilos se refieren a atributos como colores, tipografía y efectos que se pueden aplicar de manera consistente en todo el proyecto.
• Estas son solo algunas características y funcionalidades que Figma ofrece a los diseñadores y equipos de trabajo.

Empezando el curso… Hice un taller de 2 horas de FIGMA con ICESI espero avanzar con este curso, ya tengo un prototipo navegable con FIGMA., me gusto esta app.

ESTOY MUY EMOCIONADA ❤️

Para instalar Figma en Ubunto solo debes usar este comando

sudo snap install figma-linux

Para otra distros de linux te recomiendo ir a https://snapcraft.io/figma-linux

Ya tengo mi cuenta y mi primer proyecto!

Me gusta mucho que las herramientas de este tipo sean todas similares, si aprendés a usar una ya sabés bastante de las demás

APORTE PARA EXAMEN ✅
Sobre este capítulo:

• Luego de tener nuestro Figma abierto (ya sea en nuestra PC o en la web).
• Ingresamos a nuestra cuenta .
• Creamos nuestro primer proyecto.

Este mismo puede ser un proyecto de Diseño o de FigJam

• De diseño: Un espacio de trabajo vectorial pensado para la creación de interfaces.
• FigJam: Tablero digital e interactivo. Colaborativo e inteligente. Más pensado para el proceso de BrainStorming.

La estructura de Árbol de nuestro proyecto, se separará en:

• Equipo.
• Proyecto.
• Archivos.

Podemos agregar diferentes tipos de archivos a nuestro proyecto.

• Páginas.
• Podemos organizar nuestro proyecto por páginas.
• Estas páginas contienen todas las capas de nuestro proyecto.
• Capas: Son todos esos diferentes objetivos que componen nuestra interfaz.

Los podemos agrupar en grupos o Frames.

SHORTCUTS DEL DIA.

Letra: “F " o " A” : Escoger nuestro espacio de trabajo.

https://www.figma.com/downloads/

Ya tengo mi figma. Clone ubuntuuu

Lista con mi cuenta, mi primer proyecto, y mi primer frame.

Puedes decargar figma para Linux aqui

Con muchas expectativas de este curso, por temas de tiempo no pude terminar la versión anterior

No sabía que figma existía y estaba usando otras herramientas, que GRAN descubrimiento!

He trabajado con Figma en Linux, es muy similar a la versión para Windows.
Al final corre sobre electron.

a ver entiendo lo siguiente. Con figma puedo diseñar como quedaria una APP y luego entonces atraves de otros programas construir dicha APP? es asi?, gracias…

Excelente! Figma descargado

Interfaz de Figma

• Primero descarga la app para escritorio de Figma.

• Luego crea tu cuenta (iinscríbete con una cuenta de Google)

• Nombra tu primer equipo

• Crea tu primer proyecto.

• Dentro del proyecto, Figma me preguntará si crearé un:

  • archivo de ‘diseño’ → este es un espacio vectorial para la creación de interfaces
  • o ‘figjam’ → es un tablero digital interactivo e inteligente para la colaboración, pensado para el proceso de ideación.

• Este curso se centra en la parte izquierda, por eso usaremos el archivo de diseño.

Sobre la estructura jerárquica con la que Figma maneja los archivos

Figma sigue esta secuencia: equipo -> proyecto -> archivos-> páginas.

• Figma te pregunta primero sobre tu equipo (en dónde estás trabajando, con quiénes estás trabajando)

• El proyecto se refiere al tipo de trabajo o meta puntual que se busca desarrollar, al ser un proyecto puede tener muchos archivos diferentes.

• Los archivos son de extensión “.fig”, pero está almacenado en la nube.

• Una página es un espacio en dos dimensiones, que existe y captura todas las capas del espacio de trabajo.

• Una layer o Capa Son todos los diferentes objetos o bloques que componen mi interfaz (pueden ser textos, imágenes, vectores, etc) pueden estar unidas en grupo o Frames.

  • Los frames son como combinaciones que pueden hacer convivir diversas capas como un solo bloque.

Nuestro punto de partida…

Nuestro punto de partida siempre será un Frame.

• Se crea presionando la letra “F” o la letra “A”.
  • Luego Figma te preguntará el tamaño en el que quieres crear dicho Frame.

Acerca del Proyecto que desarrollaremos

Permitirá seguir cada lección y según ello, ir agregando o cambiando diversas cosas en el proyecto de una manera práctica.

El proyecto consistirá en la creación de un block de notas desde cero. Cada lección irá agregándole cosas diferentes al desarrollo del proyecto como tal.

Recomiendo ver las lecturas recomendadas que en esta clase son los videos aportan mucho valor a la clase

No sabia lo de Desktop App!!

La verdad, amo los cursos que son hechos con un formato de Step-by-Step, aunque sean cursos sobre cosas más abstractas o generales y no para aprender a usar una herramienta específica.

Este curso y el de Photoshop son ejemplos de eso, porque así al presentar una información muy ordenada y por trozos, aprendo mejor.

Para todas las personas que estén estudiando la universidad, les recomiendo muchísimo que se registren con su cuenta de la universidad, ya que esto les permitirá entrar en el programa de Figma For Education, que es básicamente todas las cosas de Figma Premium, pero, para estudiantes de Universidad.
Así que de verdad recomiendo aprovechar esta oportunidad que brinda Figma.

Si eres nuevo en Figma, aquí te dejo algunos pasos que puedes seguir para empezar:

• Crea una cuenta en Figma: Lo primero que debes hacer es crear una cuenta en Figma. Puedes hacerlo registrándote en su sitio web y proporcionando tu dirección de correo electrónico.

• Familiarízate con la interfaz de usuario: Una vez que hayas iniciado sesión en Figma, tómate un tiempo para explorar la interfaz de usuario. Figma es bastante intuitivo, pero es importante que comprendas los diferentes paneles y herramientas que están disponibles.

• Crea un nuevo archivo: Para empezar a diseñar en Figma, debes crear un nuevo archivo. Puedes hacerlo haciendo clic en el botón “New File” en la página principal de Figma. Luego, selecciona el tipo de archivo que deseas crear, como un archivo para diseñar una aplicación móvil, una página web, entre otros.

• Aprende a utilizar las herramientas básicas: Figma tiene una amplia gama de herramientas que puedes utilizar para crear tus diseños. Es importante que te familiarices con las herramientas básicas, como la herramienta de selección, la herramienta de formas, la herramienta de texto, entre otras.

• Experimenta con los elementos de diseño: En Figma, puedes agregar diferentes elementos de diseño, como botones, iconos, imágenes, entre otros. Experimenta con estos elementos para crear diseños únicos.

• Utiliza las funciones de colaboración: Figma es una herramienta que se centra en el trabajo en equipo. Utiliza las funciones de colaboración para compartir tus diseños con otros miembros del equipo y trabajar en ellos juntos en tiempo real.

• Estos son solo algunos de los pasos que puedes seguir para comenzar a utilizar Figma. A medida que te familiarices con la herramienta, descubrirás nuevas formas de utilizarla para crear diseños increíbles.

si eres estudiante de universidad puedes acceder a Figma premiun gratis solo con tu correo , busca "figma para estudiantes y llena el formulario "

En Figma, la interfaz de usuario está diseñada para ser intuitiva y fácil de usar para los diseñadores. A continuación, se describen los elementos principales de la interfaz de usuario de Figma:

Barra de herramientas: la barra de herramientas se encuentra en la parte superior de la interfaz y contiene todas las herramientas de diseño, como la herramienta de selección, la herramienta de dibujo y la herramienta de texto.

Panel de capas: el panel de capas se encuentra en la parte izquierda de la interfaz y muestra una lista de todas las capas y elementos en el diseño. También se puede utilizar para organizar y agrupar las capas.

Panel de propiedades: el panel de propiedades se encuentra en la parte derecha de la interfaz y muestra las opciones y ajustes para el elemento seleccionado en el diseño.

Área de trabajo: el área de trabajo ocupa la mayor parte de la interfaz y es donde se crea y se edita el diseño. Aquí es donde se pueden arrastrar y soltar elementos desde el panel de capas, aplicar estilos y ajustar las propiedades de los elementos.

Barra de menú: la barra de menú se encuentra en la parte superior de la interfaz y contiene opciones para guardar, exportar y compartir el diseño, así como opciones para acceder a las bibliotecas de componentes y otros recursos de diseño.

En general, la interfaz de usuario de Figma está diseñada para ser intuitiva y fácil de usar, con herramientas y opciones accesibles y organizadas de manera lógica. Esto permite a los diseñadores concentrarse en el proceso creativo y producir diseños de alta calidad de manera eficiente.

APORTE PARA EXAMEN ✅

Sobre el capitulo anterior: ¿Para qué sirve Figma y por qué elegirlo?

Sobre Figma:

• Figma tiene relevancia sobre el trabajo colaborativo.
• Si bien se utiliza sobre múltiples propósitos, hace hincapié en el diseño de interfaces.

Problemas comunes al trabajar colaborativamente:

Acceso a los archivos correctos:

Todos los que afrontamos un proyecto colaborativo, sabemos que podemos llegar a tener múltiples archivos de un mismo proyecto perteneciente a diferentes personas .

Versiones diferentes / actualización:

Sin necesidad de ningún tipo de comando, solamente teniendo el proyecto abierto, haz un cambio y se verá reflejado en cualquier lado al instante.

Comunicación entre involucrados:

Comunícate con tus colaboradores, haz chistes y échale la culpa al PM.

Visibilidad sobre el estado actual del proyecto:

Haciendo un preview del proyecto podemos ver la magnitud del trabajo realizado, el faltante, la complejidad de lo que resta respecto a lo estimado.

Figma como producto:

• Editor en línea de vectores que siempre se mantiene actualizado:
• Actualizaciones constantes que fixean bugs y generan nuevos features.
• Accesible desde cualquier dispositivo con internet y pantalla.
• Facilita diferentes procesos de co-creación con resultados visibles.

Curiosidad:
Figma lanzó su versión BETA EN EL 2013.

Este profe es vecino de un amigo en Peñalisa jajaja

Excelente clase

vamos de nuevo!!!

Ya tengo mi cuenta, mi primer proyecto, y mi primer frame.
a la siguiente clase

Ya estamos listo para avanzar a la siguiente clase 😃