• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

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.

tutorial para dominar el canvas de figma
Tutorial para dominar el Canvas de Figma en 2021

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.

Índice del artículo

  • Lienzo
    • Activar las Reglas de Figma
    • Cambiar el color del Canvas
    • Páginas del archivo
  • ¿Qué hay en el Canvas de Figma?

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.

Activar las Reglas de Figma

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.

Cambiar el color del Canvas

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 del archivo

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.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.