Concepto clave

En esta lección, aprenderás a crear una tarjeta de perfil, un componente fundamental en interfaces de usuario. Piensa en ella como una tarjeta de presentación digital: contiene información esencial sobre una persona o entidad, como nombre, foto y detalles de contacto, organizada de forma visualmente atractiva. En Figma, diseñar una tarjeta de perfil te introduce a conceptos básicos como frames (marcos), layers (capas) y alignment (alineación), que son la base para construir interfaces más complejas.

Imagina que estás organizando fotos en un álbum: el frame es como el álbum mismo, que define el espacio donde colocas elementos. Las layers son las fotos individuales que puedes mover y ajustar dentro de ese espacio. Alinear elementos correctamente, como centrar una imagen o texto, es clave para un diseño profesional, similar a como alineas objetos en una estantería para que se vean ordenados. Dominar esto te permitirá crear componentes reutilizables y consistentes en tus proyectos.

Cómo funciona en la práctica

Vamos a diseñar una tarjeta de perfil paso a paso. Primero, abre Figma y crea un nuevo archivo. Selecciona la herramienta Frame (atajo F) y dibuja un rectángulo de 300x400 píxeles; este será el contenedor de tu tarjeta. Luego, añade una imagen de perfil: usa la herramienta Rectangle (atajo R) para crear un círculo de 100x100 píxeles en la parte superior del frame, y aplica un color de fondo o importa una imagen de ejemplo.

Ahora, añade texto: selecciona la herramienta Text (atajo T) y escribe "Juan Pérez" debajo de la imagen, con un tamaño de fuente de 24px y negrita. Añade otro texto para el rol, como "Diseñador de Producto", con 16px. Usa las guías de alineación de Figma para centrar estos elementos horizontalmente dentro del frame. Finalmente, añade iconos o botones simples, como un ícono de correo y otro de teléfono, usando formas básicas o la biblioteca de Figma.

Caso de estudio

Considera una aplicación de networking profesional como LinkedIn. Una tarjeta de perfil típica incluye: una foto, nombre, título profesional, empresa y botones de acción como "Conectar". En Figma, podrías replicar esto con un frame de 350x500 píxeles. Usa datos reales para practicar: por ejemplo, crea una tarjeta para "María García, Senior UX Designer en TechCorp".

Dato importante: según estudios de usabilidad, las tarjetas de perfil con fotos tienen un 40% más de interacción en plataformas digitales.

Organiza los elementos en una tabla mental: la foto ocupa el 20% superior, el nombre y título el 30% central, y los botones el 20% inferior. Esto te ayuda a visualizar la jerarquía y espaciado, clave para un diseño efectivo.

Errores comunes

No usar frames: Algunos principiantes colocan elementos directamente en el canvas, lo que dificulta la organización. Siempre empieza con un frame para definir los límites de tu componente.
Desalineación: Texto o imágenes no centrados pueden hacer que la tarjeta se vea amateur. Usa las herramientas de alineación de Figma (alinear horizontal o verticalmente) para corregir esto.
Espaciado inconsistente: Dejar diferentes distancias entre elementos crea desorden. Establece un espaciado constante, como 20px entre la foto y el nombre, y mantenlo en todo el diseño.
Olvidar la jerarquía visual: Si todos los textos tienen el mismo tamaño, no se destaca la información importante. Usa tamaños de fuente variados (ej., 24px para nombre, 16px para detalles).
Ignorar la reutilizabilidad: No nombrar capas o grupos hace difícil editar o copiar el diseño. Nombra tus layers claramente (ej., "foto-perfil", "nombre-texto").

Checklist de dominio

Crear un frame con dimensiones específicas (ej., 300x400px).
Añadir y centrar una imagen de perfil dentro del frame.
Insertar texto con al menos dos niveles de jerarquía (nombre y rol).
Alinear todos los elementos horizontalmente usando las guías de Figma.
Aplicar espaciado consistente entre elementos (ej., 20px).
Nombrar las capas de forma descriptiva en el panel Layers.
Exportar la tarjeta como PNG para verificar el resultado final.

Diseña una tarjeta de perfil para un diseñador de producto

Sigue estos pasos para crear una tarjeta de perfil funcional en Figma:

Abre Figma y crea un nuevo archivo. Usa la herramienta Frame (F) para dibujar un rectángulo de 300x400 píxeles. Nombra este frame "Tarjeta-Perfil".
Dentro del frame, añade una imagen de perfil: usa la herramienta Rectangle (R) para crear un círculo de 100x100 píxeles en la parte superior. Centra horizontalmente usando la opción "Align horizontal centers". Aplica un color de fondo azul suave (#4A90E2).
Añade texto: selecciona la herramienta Text (T) y escribe "Ana López" debajo de la imagen, con fuente Inter, tamaño 24px, peso bold y color #333333. Centra este texto.
Debajo, añade otro texto: "Product Designer en InnovateCo", con fuente Inter, tamaño 16px, color #666666. Centra y asegúrte de que haya 20px de espacio entre este texto y el nombre.
Incluye dos íconos simples: usa la herramienta Rectangle para crear dos cuadrados de 24x24 píxeles, colócalos en la parte inferior del frame, separados por 40px. Etiquétalos como "ícono-correo" e "ícono-tel".
Revisa la alineación: selecciona todos los elementos y usa "Align horizontal centers" para verificar que estén centrados. Ajusta el espaciado si es necesario.
Exporta tu diseño: selecciona el frame y haz clic en Export en el panel derecho, eligiendo formato PNG. Guarda el archivo como "tarjeta-perfil-practica.png".

Pistas

Si no ves las opciones de alineación, selecciona múltiples elementos manteniendo presionada la tecla Shift.
Para crear un círculo perfecto, mantén presionada la tecla Shift mientras arrastras con la herramienta Rectangle.
Usa el panel Layers para renombrar elementos y mantener tu diseño organizado.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Practica: Diseña una tarjeta de perfil simple