Crear iconos en Figma sin que se conviertan en un caos de capas sueltas es posible cuando dominas las operaciones booleanas. Estas instrucciones permiten combinar formas simples como rectángulos y elipses en una sola pieza sólida y editable, ideal para construir los elementos visuales que toda app necesita.
¿Qué son las operaciones booleanas y cómo funcionan?
Las operaciones booleanas son instrucciones que le indican a Figma cómo debe combinar dos o más formas geométricas. Ya conoces las herramientas de construcción básicas: con la tecla R generas rectángulos y con la tecla O generas elipses [0:53]. A partir de ahí, las operaciones booleanas definen qué ocurre cuando esas formas se superponen.
Para acceder a ellas, selecciona dos o más capas y dirígete al panel derecho, donde encontrarás un ícono de dos cuadros fusionados con un dropdown que despliega las opciones disponibles [1:20].
¿Cuáles son las cuatro operaciones booleanas principales?
- Unión: fusiona ambas formas en una sola figura, tomando el color de la capa superior [1:33].
- Subtract (sustraer): elimina la capa de arriba y recorta esa zona de la capa inferior, como si aplicaras un corte con máscara [1:46].
- Intersección: conserva únicamente la zona donde ambas capas coinciden [2:05].
- Exclusión: elimina la zona donde las capas coinciden y mantiene el resto [2:13].
Un detalle fundamental es que las operaciones booleanas no son destructivas [2:22]. Puedes seguir seleccionando y moviendo las formas originales dentro de la operación, y el resultado se actualiza en tiempo real.
¿Qué diferencia hay entre una operación booleana y flatten?
La operación flatten funciona de forma similar a la unión, pero con una diferencia clave: une los vectores de ambas figuras y genera una forma nueva que ya no es editable por separado [2:42]. Al presionar enter para inspeccionar los nodos, verás que todos están intercalados en una sola estructura. En el panel de capas las formas originales desaparecen. Por eso se considera una operación más destructiva. La recomendación es trabajar con operaciones booleanas y aplicar flatten solo cuando estés seguro del resultado final [3:10].
Para memorizar: unión une todo, sustraer elimina una parte, intersección deja lo común y exclusión quita lo común [3:18].
¿Cómo construir el ícono de Inicio paso a paso?
El proyecto consiste en crear los iconos del tab bar de Finwise: Inicio, Transacciones, Cuentas y Presupuestos, cada uno en versión fill (activo) y versión outline (inactivo) [0:22]. El tamaño estándar es de 24 por 24 píxeles [3:50].
Para el ícono de la casa:
- Crea un rectángulo de 16 por 16 píxeles y céntralo dentro del marco, dejando unos tres píxeles de margen inferior y cuatro en los laterales [4:02].
- Genera otro rectángulo de 6 por 8 píxeles para la puerta y céntralo en la base. Asígnale un color diferente para distinguirlo [4:22].
- Para el techo, haz doble clic en el rectángulo principal para entrar al modo de edición de nodos. Pasa el cursor sobre el borde superior hasta que aparezca el pincel con el signo de más y crea un nuevo nodo central [4:50].
- Selecciona los nodos izquierdo y derecho superiores con shift y bájalos para formar la pendiente del techo [5:18].
- Ajusta el nodo superior hasta obtener una proporción de aproximadamente 16 por 18 píxeles [5:30].
Finalmente, selecciona el cuerpo de la casa y la puerta, aplica la operación sustraer y obtendrás el ícono terminado en versión fill [5:55].
¿Cómo crear la versión outline del ícono?
Duplica el ícono, selecciona la copia y usa el atajo shift + X para intercambiar entre fill y stroke [6:25]. Configura el stroke en color blanco y ajústalo para que se mantenga por dentro del contorno, así el ícono conserva exactamente las mismas dimensiones que la versión sólida [6:15].
Con esta técnica ya tienes las dos versiones necesarias para un tab bar funcional. El mismo proceso de combinar formas básicas con operaciones booleanas aplica para construir el resto de los iconos del proyecto. ¿Cuál de las cuatro operaciones booleanas te parece más útil para tus propios diseños?
