El Canvas de Figma

Cuando comencé a escribir los artículos de este curso lo hice con tutoriales de las herramientas más avanzadas. Pero mientras lo hacía iba recibiendo mensajes de lectores que me hacían preguntas sobre temas más básicos, principalmente eran estudiantes interesados en la experiencia de usuario. Gracias a sus inquietudes decidí comenzar por temas como el que vamos a tocar hoy, el Canvas de Figma.

Si deseas aprender Figma desde cero y no hiciste las clases anteriores puedes visitar el apartado dedicado al Curso de Figma en español.

Hagamos un repaso completo al Canvas.

Lienzo

El lienzo o Canvas de Figma lo encontramos en el centro del Editor, es el sitio en el que vamos a trabajar con nuestros diseños.

Dentro del Canvas vamos a usar las demás herramientas de Figma (Páginas, Frames, Auto Layouts, Grupos, Lápiz, Formas, Textos, etc) y con los Plugins que vayamos instalando.

El tamaño del Canvas es “casi” infinito y crecerá a medida que vayamos añadiendo más elementos.

Reglas

Para trabajar y organizar los diseños con más control y de manera más “ordenada” podremos utilizar las Reglas en los ejes X e Y, horizontal y vertical.

Para activar o desactivar las reglas tenemos cuatro opciones:

• Utilizar la combinación de teclas Shift + R o Mayúsculas + R.
• Pinchar en el menú de la barra de Herramientas, luego en View y finalmente en Rulers (Menu > View > Rulers).
• Introducir en el INPUT del buscador que aparece en el menú el término “Ru…” y la opción “Rulers” aparecerá en la primera posición de los resultados.
• Seleccionar la opción Rulers en el menú que se despliega desde el ítem Opciones de Zoom y Vista (Zoom/view Options) ubicado en la parte derecha de la Barra de herramientas.

Color

El color de fondo del Canvas de Figma es de color gris por defecto, el código HEX exacto es #E5E5E5.

Lo podemos cambiar fácilmente desde el módulo Background de una Página introduciendo el código hexadecimal o utilizando el Color Picker. Lo encontraremos en el panel de Propiedades ubicado en la pestaña Design del sidebar derecho de la aplicación.

Páginas

Juan, ahora estamos hablando del Canvas de Figma y no de las Páginas… ¿Por qué el color del Canvas se cambia desde las propiedades de una Página?

Buena pregunta, es un detalle importante a destacar. Un archivo de Figma puede tener más de una Página, con lo cual podremos tener tantos Canvas como Páginas tenga nuestro Archivo.

¿Qué hay en el Canvas de Figma?

Aunque lo veremos más adelante hagamos un repaso a lo que encontramos a su alrededor:

• Barra de Herramientas, la podemos ver arriba del Canvas, desde allí podremos acceder a todas las herramientas de Figma.
• Panel de Layers, es el sidebar izquierdo de la aplicación, allí estarán las Capas, los Frames, las Páginas y los Assets o Componentes.
• El sidebar derecho o panel de Propiedades, desde allí podremos cambiar el aspecto y el comportamiento de todos los objetos que formen parte de nuestros diseños. Además en la parte inferior del sidebar tenemos un botón o icono de interrogación, desde allí podremos acceder a la Ayuda de Figma y otros recursos de interés.

Con el tiempo veremos que el uso del Canvas se puede extender tanto como lo pidan nuestras necesidades. En cada proyecto podremos usar el Canvas no sólo para tener allí nuestros diseños sino también para recopilar información, hacer un benchmarking, crear debates o charlas con nuestros compañeros de equipo, colaboradores, clientes, etc.

Y con esto terminamos esta clase de Figma para aprender a usar el Canvas. Si tienes alguna duda por favor deja tus preguntas en un comentario.

Muchas gracias.