Comprender la diferencia entre mapas de bits y vectores, dominar las operaciones booleanas y saber cuándo usar un frame o un grupo en Figma son habilidades fundamentales para cualquier persona que diseñe interfaces digitales. Estas bases te permiten trabajar con mayor precisión, optimizar recursos gráficos y mantener un flujo de trabajo limpio.
¿Qué diferencia hay entre un mapa de bits y un vector?
Cada píxel de una pantalla emite tres colores: rojo, verde y azul (RGB). La combinación de estos valores determina el color de cada píxel. Al almacenar la dimensión de una imagen junto con el color de cada uno de sus píxeles, obtenemos lo que se conoce como mapa de bits [01:00].
Los formatos más habituales de mapa de bits son:
- GIF: admite hasta 256 colores, permite animaciones y soporta fondos transparentes.
- JPG: admite millones de colores y comprime agrupando píxeles similares bajo un mismo valor de color.
- PNG: combina lo mejor de ambos, con millones de colores y soporte para transparencias.
El principal inconveniente del mapa de bits es que la imagen debe estar optimizada para cada resolución de pantalla [02:08]. En pantallas retina, que duplican la densidad de píxeles, necesitamos una imagen con el doble de tamaño, lo que obliga a gestionar dos versiones de cada recurso gráfico.
¿Cuándo conviene usar vectores en lugar de bitmaps?
Para elementos como logotipos, iconos o ilustraciones simples, los vectores son la opción más eficiente [02:42]. En un vector la información no se almacena como píxeles, sino como expresiones matemáticas que se recalculan según el nivel de zoom o el tamaño de pantalla. El formato estándar es SVG (scalable vector graphics), que guarda datos como tipo de forma, relleno, tamaño y posición [03:05].
Los vectores están formados por nodos que pueden moverse, modificarse, añadirse o eliminarse para cambiar la forma del trazado [03:30]. Una forma vectorial puede tener relleno sólido o degradado, pero solo cuando la forma está cerrada, es decir, cuando cada nodo tiene un nodo anterior y uno posterior que completan el contorno.
¿Cómo funcionan las operaciones booleanas en Figma?
Dibujar formas complejas nodo a nodo puede ser muy laborioso. Las operaciones booleanas resuelven esto combinando formas simples para crear una nueva [04:10]. En Figma disponemos de cuatro operaciones:
- Unión: fusiona dos formas en una sola silueta.
- Sustracción: la forma superior se resta de la inferior, generando un recorte.
- Intersección: conserva únicamente el área donde ambas formas se superponen.
- Exclusión: elimina la zona de superposición y conserva el resto.
Para aplicarlas en Figma, basta con seleccionar dos o más formas y acceder al menú de operaciones booleanas en la barra superior [05:15]. Por ejemplo, al seleccionar dos círculos y pulsar unión, el panel de capas muestra un único objeto con la silueta combinada. Con excluir, la zona central se vuelve completamente transparente, algo que sería muy difícil de trazar manualmente con la herramienta pluma [07:20].
¿Cómo se crean formas vectoriales básicas en Figma?
Figma ofrece por defecto rectángulo, línea, flecha, elipse, polígono y estrella [03:15]. Al dibujar, si mantienes pulsada la tecla Mayúsculas, la proporción se bloquea: un círculo será perfecto en lugar de ovalado [05:35].
¿Cuál es la diferencia entre frames y grupos en Figma?
Organizar correctamente el trabajo en Figma depende de entender esta distinción [07:50]. Un frame se comporta como un rectángulo con propiedades propias —color de fondo, bordes, esquinas redondeadas— que además puede contener otras capas en su interior. Sirve para delimitar el área de diseño, imitando la pantalla de un teléfono, un escritorio o cualquier dispositivo [08:20]. Al presionar la tecla F se activa la herramienta de frame y en la barra lateral derecha aparecen tamaños predefinidos como iPhone u otras resoluciones.
Un grupo, en cambio, hereda la lógica de herramientas de diseño más antiguas y tiene limitaciones importantes [08:00]:
- No admite propiedades visuales propias: al intentar aplicar un color de fondo, este se aplica a los elementos internos, no al grupo.
- Al redimensionar el grupo, todos los elementos internos se deforman proporcionalmente [10:10].
Por estas razones, la recomendación es clara: utiliza siempre frames para agrupar elementos, ya sea una página completa o una sección de la interfaz. Los grupos quedan relegados a usos muy puntuales y conviene evitarlos siempre que sea posible [10:30].
Si ya estás experimentando con estas herramientas en Figma, comparte en los comentarios qué operación booleana te ha resultado más útil o si has encontrado algún caso donde los grupos funcionen mejor que los frames.
