Es una aplicación para diseñar interfaces ( UX y UI ) que se ejecuta en el navegador web, lo que significa que puedes trabajar desde una computadora Windows, Mac o Linux. Adicionalmente también puedes instalar su versión para escritorio en equipos Windows o Mac y su herramienta para vista previa en dispositivos Android o iOS.

Opciones de Descarga

Descargas de Figma

Características de Figma

  • Permite la colaboración en tiempo real, es decir que tú y tus colaboradores puedan hacer cambios en un mismo diseño en tiempo real.
  • Permite generar sistemas de diseño centralizado donde todos los integrantes de un proyecto pueden contribuir y tener el diseño en sus cuentas y al estar guardado en la nube, Figma crea una única fuente de verdad para todos, cada cambio se registra y se actualiza para el equipo.
  • Permite crear bibliotecas de componentes reutilizables a los que todo el equipo tiene acceso.
  • Tiene prototipos que te permiten simular la interactividad que un usuario tendrá con la interfaz diseñada.
  • Genera código en formato SVG, CSS, iOS y Android que sirve de referencia cuando pasemos nuestros prototipos al equipo de desarrollo.
  • Permite manejar un historial de versiones de los cambios que se hagan en el diseño (similar a lo que hace git con el código). Así que olvidate de renombrar tu archivo como: final1, final2, final_final_con_cambios_del_cliente 🤭 sorry amigo diseñador pero no puedes negar que así guardas tus diseños.
  • Figma Community es un espacio donde la misma comunidad de usuarios crea vectores, diseños, ilustraciones, guías de estilos, plugins, recursos y demás para la misma comunidad de tal manera que entre todos nos ayudamos 💪🤓. Muy similar a lo que es GitHub para los programadores.
  • Figma es una herramienta de pago, sin embargo tiene una excelente plan gratuito con el que podemos comenzar a trabajar antes de decidir adquirir algún plan de pago.
  • Si eres profesor o estudiante puedes aplicar al Plan Educativo gratis por 2 años.

Atajos de Teclado

Atajo Win/Linux Atajo Mac Herramienta
H H Herramienta Mano
F F Herramienta de Marco
S S Herramienta de Corte
V V Herramienta Selección
K K Herramienta Escala
R R Herramienta Rectángulo
L L Herramienta Línea
shift + L shift + L Herramienta Flecha
O O Herramienta Elipse
ctrl + shift + K ⌘ + shift + K Herramienta Place Image
P P Herramienta Pluma
shift + P shift + P Herramienta Lápiz
T T Herramienta Texto
C C Herramienta Comentario
+ + Acercar
- - Alejar
shift + 0 shift + 0 Zoom al 100%
shift + 1 shift + 1 Zoom to Fit
shift + 2 shift + 2 Zoom a la Selección
1 1 Opacidad 10%
2 2 Opacidad 20%
55 55 Opacidad 55%
9 9 Opacidad 90%
0 0 Opacidad 100%
shift + R shift + R Mostrar / Ocultar Reglas y Guías
ctrl + shift + 4 ⌘ + shift + 4 Mostrar / Ocultar Grid
shift + A shift + A Activar Auto Layout
ctrl + alt + K ⌘ +⌥ + K Crear Componente
ctrl + alt + M ⌘ +⌥ + M Crear Máscara
ctrl + alt + P ⌘ +⌥ + P Ejecutar el último Plugin

Recursos para Figma

A continuación te enlisto una serie de recursos con los que podemos trabajar en conjunto con Figma para enriquecer nuestros prototipos y no demorar tanto en diseñar assets para nuestras interfaces, sobre todo si no eres diseñador como yo 🤓 estos recursos te encantarán:

Aprende Figma ¡GRATIS!

Si estás interesado en aprender esta poderosa herramienta de prototipado de UI te invito a que veas mi Curso de Figma totalmente gratuito en mi canal de YouTube.

¡¡¡Accede ya!!!

Ver Curso

El prototipo que ves a continuación, lo diseñamos paso a paso en el curso, puedes descargar los recursos en el siguiente enlace.