Domina las herramientas básicas: formas, texto y colores

Tipo de lección: Video

Concepto clave

En el diseño de interfaces, las herramientas básicas de Figma son como los materiales de construcción de un arquitecto. Piensa en las formas como los ladrillos y vigas que definen la estructura, el texto como las señales y etiquetas que comunican información, y los colores como la pintura y acabados que dan personalidad y jerarquía visual. Estas tres herramientas trabajan juntas para crear componentes visuales coherentes.

En el contexto de diseño de producto, dominar estas herramientas no es solo saber dónde están los botones, sino entender cómo se combinan para crear interfaces profesionales. Cada elemento visual que creas debe tener un propósito claro: las formas organizan el espacio, el texto comunica contenido, y los colores guían la atención del usuario. Es similar a cómo en una cocina profesional, un chef domina primero el cuchillo, la tabla y los ingredientes básicos antes de crear platos complejos.

Cómo funciona en la práctica

Vamos a crear un botón de acción básico paso a paso:

1. Selecciona la herramienta Rectángulo (R) y dibuja un rectángulo de 120x40 píxeles
2. En el panel de propiedades a la derecha, haz clic en el color de relleno y selecciona un azul primario (#2563EB)
3. Selecciona la herramienta Texto (T) y haz clic dentro del rectángulo
4. Escribe "Continuar" y ajusta la fuente a Inter Medium, tamaño 14px, color blanco (#FFFFFF)
5. Centra el texto usando las guías de alineación que aparecen automáticamente
6. Finalmente, selecciona ambos elementos (rectángulo y texto), haz clic derecho y elige "Agrupar selección" (Ctrl+G)

Este proceso simple demuestra cómo las tres herramientas trabajan juntas: la forma proporciona el contenedor, el texto comunica la acción, y el color establece la jerarquía visual.

Caso de estudio

Imagina que estás diseñando la pantalla de inicio de una app de fitness. Analicemos cómo aplicarías las herramientas básicas:

En diseño de producto, la consistencia visual es clave. Establece una paleta de colores y tipografía desde el inicio y aplícala sistemáticamente en todos los elementos.

Errores comunes

• Usar demasiados colores: Los principiantes suelen crear paletas con 8-10 colores diferentes. Limítate a 3-5 colores principales para mantener la coherencia visual.
• Texto mal alineado: Centrar texto manualmente "a ojo" en lugar de usar las herramientas de alineación de Figma. Siempre usa las guías azules que aparecen automáticamente.
• Formas desproporcionadas: Crear botones o tarjetas con dimensiones aleatorias. Establece un sistema de medidas (ej: múltiplos de 8) y mantenlo consistente.
• Ignorar la jerarquía tipográfica: Usar el mismo tamaño de fuente para todo. Define claramente tamaños para encabezados, cuerpo y etiquetas.
• No nombrar capas: Dejar nombres genéricos como "Rectángulo 1". Renombra inmediatamente cada elemento con nombres descriptivos como "btn-primary".

Checklist de dominio

1. Puedo crear y modificar al menos 5 tipos diferentes de formas (rectángulo, círculo, línea, polígono, estrella)
2. Sé aplicar y ajustar propiedades de texto (fuente, tamaño, interlineado, alineación)
3. Puedo crear y guardar colores en la sección "Estilos" del panel de diseño
4. Domino las combinaciones de teclas principales: R (rectángulo), O (círculo), T (texto)
5. Sé agrupar y desagrupar elementos para organizar mi espacio de trabajo
6. Puedo alinear y distribuir elementos usando las herramientas del panel superior
7. Entiendo cómo exportar elementos individuales en formatos comunes (PNG, SVG, JPG)

Diseña una tarjeta de producto para un e-commerce

Crea una tarjeta de producto completa usando solo formas, texto y colores. Sigue estos pasos:

1. Abre un nuevo archivo en Figma y crea un frame de 800x600px
2. Dibuja un rectángulo de 300x400px para la tarjeta principal
3. Aplica un color de fondo blanco (#FFFFFF) y añade una sombra sutil (X:0, Y:2, Blur:8, Spread:0, Color: #000000 con 10% opacidad)
4. Crea un rectángulo de 300x200px en la parte superior para la imagen del producto, usa un color de placeholder (#E5E7EB)
5. Añade texto con el nombre del producto (ej: "Zapatillas Running Pro") usando una fuente en negrita, tamaño 18px
6. Debajo, añade una descripción breve (ej: "Ideales para entrenamiento diario") en tamaño 14px, color gris (#6B7280)
7. Crea un rectángulo para el precio (ej: "$89.99") con color de fondo verde (#10B981) y texto blanco
8. Finalmente, añade un botón "Añadir al carrito" debajo del precio
9. Organiza todas las capas en grupos lógicos y renómbralas apropiadamente

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.