Vectores y operaciones booleanas en Figma

Cuando diseñas en Figma, entender la diferencia entre vectores y mapas de bits marca el rumbo de tu trabajo: define qué formato usar, cómo escalar tus gráficos y cómo construir formas complejas con operaciones booleanas. Esta guía te ayuda a elegir bien y a organizar tus archivos con frames en lugar de grupos.

¿Qué es un mapa de bits y cuándo conviene usarlo?

Un mapa de bits almacena la dimensión de la imagen y el color exacto de cada píxel, recordando que cada píxel emite tres canales: R, G y B. Esa información se guarda en formatos como GIF, JPG y PNG, y cada uno responde a una necesidad distinta.

• GIF: ideal para animaciones, soporta hasta 256 colores y permite transparencia.
• JPG: admite millones de colores y comprime agrupando píxeles similares bajo un mismo color según el porcentaje que definas.
• PNG: combina lo mejor de ambos, con millones de colores y fondos transparentes.

El problema aparece con las pantallas. En una pantalla retina, que tiene el doble de densidad de píxeles, necesitas exportar la imagen al doble de tamaño. Eso te obliga a mantener dos versiones del mismo archivo: una para resolución estándar y otra para retina.

¿Por qué un mapa de bits se ve borroso en pantallas retina? Porque guarda un color por píxel a una resolución fija. Si la pantalla tiene el doble de densidad, la imagen no tiene suficiente información y se ve pixelada.

¿Qué son los vectores y por qué escalan sin perder calidad?

A diferencia del mapa de bits, un vector no guarda píxeles. Guarda expresiones matemáticas que se calculan según el nivel de zoom o uso. Por eso un logotipo o un icono en SVG se ve nítido en cualquier resolución.

El formato más común es el SVG (Scalable Vector Graphics), que almacena tipo de figura, relleno, tamaño y posición. Las formas vectoriales que Figma incluye por defecto son: rectángulo, línea, flecha, elipse, polígono y estrella.

¿Cómo funcionan los nodos en una forma vectorial?

Los vectores están formados por nodos que puedes mover, modificar, añadir o eliminar para cambiar la forma. Puedes aplicar un relleno sólido o degradado, pero solo si la forma está cerrada: cada nodo necesita uno anterior y uno posterior. Si la forma queda abierta, no se aplica relleno.

¿Cómo combinar formas con operaciones booleanas en Figma?

Dibujar formas vectoriales complejas a mano con la pluma puede ser tedioso. Para resolverlo, Figma ofrece operaciones booleanas que combinan dos o más formas en una sola sumando, restando o intersecando.

• Unión: fusiona las formas en una sola figura.
• Sustracción: resta la forma superior a la que está al fondo.
• Intersección: deja únicamente el área donde las formas se solapan.
• Exclusión: elimina la zona común y conserva el resto.

Un flujo práctico en Figma: dibujas dos elipses presionando shift para que sean círculos perfectos, las seleccionas, y desde la barra superior aplicas la operación que necesitas. Si excluyes, por ejemplo, la zona central queda totalmente transparente y puedes mover la forma resultante como un solo objeto.

¿Cuál es la diferencia entre sustraer y excluir? Sustraer elimina la forma de arriba dejando un recorte; excluir borra la intersección y mantiene las áreas que no se tocan.

¿Cuándo usar un frame y cuándo un grupo en Figma?

Organizar capas en Figma se vuelve confuso cuando no distingues entre frames y grupos. Aunque parezcan similares, se comportan de forma muy distinta y eso impacta tu diseño.

Un frame funciona como un rectángulo que puede contener otras capas. Le puedes aplicar color de fondo, definir tamaños predefinidos como un iPhone, y delimitar el área de una pantalla, ya sea móvil, desktop o smartwatch. Si presionas la tecla F, accedes directamente a las plantillas en la barra de propiedades.

Un grupo, en cambio, viene heredado de herramientas de diseño más antiguas y está muy limitado en Figma. Solo agrupa elementos visualmente, no acepta propiedades como color de fondo, y su tamaño se calcula en función del contenido.

¿Qué pasa si redimensionas un grupo?

Aquí está el detalle crítico: si estiras un grupo, todos los elementos internos se deforman para adaptarse al nuevo tamaño. En un frame, el contenedor crece sin afectar lo que contiene. Por eso, siempre que quieras agrupar para construir una página o un componente, usa frames.

¿Puedo aplicar color de fondo a un grupo en Figma? No. Si intentas darle color de fondo a un grupo, Figma cambia el color de los elementos internos en lugar de crear un fondo. Para eso necesitas un frame.

¿Te quedó alguna duda sobre cuándo usar SVG, PNG o JPG en tus proyectos? Cuéntame en los comentarios qué tipo de gráficos manejas más en tu día a día.