Tarjeta de evento1080 × 1350
Noche de Diseño
Trae un cuaderno. Rediseñaremos juntos un billete de autobús.
Confirmar- 1. Ajusta
- 2. Genera
- 3. Juzga
Esta tarjeta está rota. Arréglala.
Lee el brief y usa el panel de diseño. Cuando las cinco comprobaciones estén en verde, pide versiones a la IA.
Marco
En Figma
Pulsa F para dibujar un marco y elige un tamaño predefinido, como post de Instagram, en el panel derecho. Los marcos son tus mesas de trabajo.
Formato
Imagen
En Figma
Arrastra una imagen sobre una forma para rellenarla con la foto. El radio de esquina está en el panel Design, junto al tamaño.
Mostrar
Capa
Texto
Layout
En Figma
Auto layout (Shift + A) define el relleno y la separación entre elementos, así el espaciado se mantiene uniforme aunque cambie el contenido.
Alinear
Texto
En Figma
Pulsa T para añadir texto. Guarda fuentes y tamaños como estilos de texto para que todas las pantallas del archivo sean coherentes.
Fuente
Color del texto
Relleno
En Figma
El relleno es el color de una capa. Haz clic en la muestra para pegar un código hex. Comprueba el contraste del texto con un plugin como Stark.
Fondo
Botón
- Jerarquía
- Contraste 1.7:1
- El botón destaca
- Aire
- Esquinas anidadas
- Cabe en el marco ok
Primero pon las cinco comprobaciones en verde.
Básicos de Figma que usarás cada día
Los mismos movimientos que acabas de hacer, como atajos reales de Figma. Pruébalos cuando abras Figma en la Unidad 1.
- F
Marco
Dibuja un marco (una mesa de trabajo). Elige un tamaño predefinido en el panel derecho.
- T
Texto
Añade texto. Cambia la fuente, el tamaño y el interlineado en el panel Design.
- RO
Rectángulo y elipse
Dibuja formas básicas. Mantén Shift para que sean cuadradas o redondas.
- ShiftA
Auto layout
Apila elementos con relleno y separaciones que se mantienen uniformes aunque cambie el contenido.
- Ctrl/⌘D
Duplicar
Copia una capa en su sitio y luego muévela. La forma más rápida de crear variaciones.
- Alt
Medir
Selecciona una capa y mantén Alt (Option) para ver la distancia a cualquier cosa sobre la que pases el cursor.
- Ctrl/⌘AltK
Componente
Convierte una capa en un componente reutilizable, como un botón que usas en todas partes.
- Shift1
Ajustar a la pantalla
Ve todo el lienzo de un vistazo. Shift 0 vuelve al 100%.