Como mencioné en “La página web, ¿un mal necesario?“, empezaré a crear contenido para que ustedes, lectores curiosos, aprendan a usar herramientas digitales de la forma más sencilla y útil posible. Mi objetivo es ahorrarles esas horas interminables viendo a un experto explicar cada detalle. Aquí vamos directo al grano. En esta ocasión, exploraremos Figma a lo que llamo Nivel -1, o nivel guardería. No se confundan, no se trata de volverse expertos (yo tampoco me considero uno), pero esta guía será un buen punto de partida para que puedan familiarizarse, dar sus primeros pasos y lograr un prototipo básico de una landing page.
Primero, lo primero. Crear una cuenta es tan simple como entrar a figma.com, hacer clic en “Comenzar gratis” y seguir los pasos típicos: dejar tu correo electrónico, aceptar todo lo que haya que aceptar y ¡listo! Ya firmaste tu pacto con el diablo… digo, con Figma.
En segundo lugar, como dice un profesor en mi universidad: “Si es gratis, es de la página oficial y es legal, ¡descarga todo!” Así que eso haremos. Abajo encontrarás el apartado de descargas de Figma, dandole clic a la imagen te redireccionará a la website. Descarguemos tanto la aplicación de escritorio como el instalador de fuentes; la app móvil podemos dejarla para más adelante. ¿Ves qué rápido avanzamos?
En tercer lugar, mantén abierta en otra pantalla la Figma Community . Al ser una plataforma colaborativa, ya hay miles de personas trabajando en ella y subiendo sus contenidos de forma abierta, lo cual nos viene genial para empezar. Para quienes recién inician y no saben casi nada, es conveniente contar con plantillas y materiales prediseñados que solo tendremos que modificar.
¡Listo! Ya tenemos todo para comenzar.
Cápsula 0: Frames
En esta parte, veremos cómo empezar a trabajar en Figma. Como menciono, esta plataforma funciona como una hoja infinita donde puedes almacenar múltiples recursos gráficos. Sin embargo, no es que puedas comenzar a trabajar directamente en la página. Primero, necesitas crear frames o espacios de trabajo donde irás colocando los diseños de la web que deseas crear.
Cápsula 1: Figuras Vectoriales e Imágenes
En esta parte, veremos las distintas figuras geométricas que tiene figma para poder crear el contenido de la web y también veremos la inserción de imágenes, rápido y sencillo.
Cápsula 2: Figma Community, Icons y Texto
Esta parte final veremos el apartado de Figma Community para usar plantillas prediseñadas a modo inspiración y así comenzar a diseñar nuestra web.
Con estos básicos ya sabremos lo más importante y eso es cómo utilizar la herramienta a nivel -1 o nivel menos que básico ya que nos estamos enfocando solo y únicamente en diseñar las páginas. Figma a parte de eso ofrece más funcionalidades a nivel diseño e interacción que pueden ser útiles para presentar el proyecto web a alguna empresa o interesado pero eso lo veremos en otro capítulo de blog.
Atajos
Como lo mencioné en el vídeo aquí comparto un cuadro de atajos del teclado que puede ser útil al usar la herramienta.
| Atajo Windows | Atajo Mac | Herramienta |
| V | V | Selección |
| H | H | Hand / Mano |
| F | F | Frame / Marco |
| S | S | Slice / Corte |
| T | T | Texto |
| C | C | Comentario |
| R | R | Rectángulo |
| L | L | Línea |
| O | O | Elipse |
| ctrl + shift + K | ⌘ + shift + K | Insertar Imagen |
| shift + 0 | shift + 0 | Zoom al 100% |
| shift + 1 | shift + 1 | Zoom to Fit |
| shift + 2 | shift + 2 | Zoom a la Selección |
| shift + R | shift + R | Mostrar / Ocultar Reglas y Guías |
