Curso de Figma para Angular para Equipos de Desarrollo Web

Standalone components y organización por dominios de features

Control de flujo moderno (@if, @for) y su impacto en estados/variantes

Angular Signals y diseño de estados visuales (loading, error, disabled)

Deferrable views y skeletons; placeholders y content loaders

Theming en Angular Material y tokens de color tipados

Tipografía, escala y spacing como variables/tokens

Breakpoints y grids: mapeo a contenedores y layouts CSS

Accesibilidad WCAG 2.2: foco visible, contraste, tamaños táctiles

Interacciones estándar (hover, pressed, focus, selected) y variantes

Documentación de patrones de UI para reuso en componentes

Variables de color, tipografía, spacing, radii, sombras y z-index

Colecciones y modos (light/dark/brand) y su estrategia de herencia

Alias y jerarquías de tokens para minimizar duplicidades

Tokens de componente: tamaños, densidades y estados

Naming convention escalable según plataforma y tema

Sincronización con Tokens Studio: sets, modos y referencias

Versionado y revisión de cambios de tokens

Exportación de tokens a JSON compatibles con Style Dictionary

Mapeo tokens→CSS variables→Angular Material palettes

Estrategias para evitar drift entre Figma y el código

Anatomía de un componente escalable: slots y subcomponentes

Variants vs properties; boolean, instance swap y text

Auto Layout como contrato de flex/grid en Angular

Estados: default, hover, focus, error, disabled y tamaños

Componentes compuestos (select, table, datepicker, stepper)

Librerías por dominio y por fundación (foundations vs UI kits)

Documentación embebida: usage, dos/don’ts, tokens vinculados

Versionado de componentes y control de cambios

Mapeo 1:1 a componentes standalone y entradas/salidas

Estrategias para compatibility con Angular Material

Inspección de propiedades, variables y estilos calculados

Extracción de medidas, espaciados, tipografías y sombras

Exportación y optimización de SVG para iconos y logos

Generación de specs y snippets como referencia, no código fuente

Enlaces a componentes y documentación desde Dev Mode

Checklists de handoff: completitud, estados, responsive y accesibilidad

Gestión de feedback entre diseño y desarrollo en el archivo

Vinculación de tickets y PRs desde Figma a tu tracker

Validación de paridad diseño-código en staging

Métricas de calidad del handoff y tiempo de ciclo

Estructura de carpetas y fuentes de tokens JSON

Transformaciones, formatos y plataformas objetivo

Emisión a CSS variables, SCSS maps y TypeScript typings

Integración con Angular: theming global y per-component

Generación de paletas Angular Material desde tokens

Compatibilidad con dark mode y high contrast

Pipeline CI: validación, build, pruebas visuales

Control de cambios: PRs con diffs de tokens

Estrategias de fallback y tokens obsoletos

Ejemplo de repo de tokens versionado

Escalas tipográficas y roles de texto en Angular

Construcción de paletas, roles semánticos y estados

Densidades y alturas de fila para data-heavy UIs

Elevaciones y sombras: mapas de profundidad coherentes

Gradientes, opacidades y superposiciones accesibles

Iconografía y tamaño táctil mínimo en componentes

Modo oscuro y contraste reforzado: lineamientos

Reglas de iconos SVG y sprites Angular

Visualización de errores y validaciones en formularios

Documentación visual de temas y catálogos de estilos

Grids de columna y layout baselines en Figma

Auto Layout avanzado y equivalencias en CSS modern

Patrones de layout: sidebar, master-detail, dashboards

Breakpoints y contenedores: estrategias modernas

Alturas y scroll; barras pegajosas y cabeceras

Reflow, reorden y prioridades de contenido

Composición con content projection y slots Angular

Fragmentación de layout en componentes reutilizables

Medición y pruebas de layout en Storybook/Playwright

Catálogo de layouts versionado y probado

Inputs, selects, textareas, radios, checkboxes y toggles

Estados y mensajes: focus, error, helper, success

Validaciones y máscaras; accesibilidad en etiquetas

Diseño de formularios complejos y multistep

Densidad y ergonomía para alta productividad

Ayudas contextuales, tooltips y contenido inline

Parsers, formatters y visualización de errores

Paridad con Angular Reactive Forms y AsyncValidators

Componentes de formulario en Angular Material

Checklist visual-funcional para QA de formularios

Patrones de tablas: compacta, densa y con virtual scroll

Selección, ordenación, filtros y paginación

Listas con metadatos, badges y acciones rápidas

Vacíos, placeholders y estados de carga

Acciones bulk y contextual menus

Diseño accesible de celdas y cabeceras

Mapear a MatTable/CDK y cdk-virtual-scroll-viewport

Tokens de espaciado, tipografía y densidad en data-UIs

Pruebas visuales de tablas responsivas

Documentación de rendimiento y límites

Exportación de SVG optimizados desde Figma

Reglas de trazo, relleno y escalabilidad

Estrategia de carga: inline SVG, sprites y asset pipeline

Theming de iconos con CSS variables

Conjunto de ilustraciones y licencias

Fallbacks y testing visual de iconografía

Integración con Angular Material Icons y mat-icon registry

Automatización con svgo y validación CI

Versionado de paquetes de iconos

Guía de uso y restricciones

Chequeo de contraste y tamaños de toque

Navegación por teclado y foco visible

Estados y feedback claros en componentes

Errores, avisos y confirmaciones comprensibles

Copy y micro-copy inclusivos en prototipos

Etiquetado y roles para lector de pantalla

Mapeo a ARIA en Angular

Test de color-blind friendly y modo alto contraste

Auditoría de accesibilidad por pantallas

Evidencias de cumplimiento y remediación

Guías de uso, anatomía y ejemplos por componente

Enlaces de tokens, variantes y specs

Páginas de guidelines dentro del archivo

Catálogo navegable de componentes y layouts

Changelogs y notas de versión visibles

Políticas de deprecación y migración

Vinculación con Storybook y docs del repo

Convenciones para capturas y gifs en docs

Métricas de adopción y calidad

Mantenimiento y ownership claros

Pull requests con validación de tokens y SVG

Screenshots comparativos visuales en CI

Linting de estilos y convenciones tipográficas

Verificación de contraste automatizada

Generación de docs a partir de fuentes de tokens

Sincronización programada Figma→repo

Alertas ante cambios críticos de diseño

Plantillas de issues para gaps de paridad

Etiquetado semántico de versiones (semver)

Reportes periódicos de drift y deuda visual

Definición y creación de variables y design tokens en Figma

Exportación y build con Style Dictionary hacia CSS variables y typings

Construcción de un set de componentes standalone en Angular mapeados a Figma

Implementación de theming claro/oscuro y marca alternativa

Ensamblado de layouts y formularios con paridad diseño-código

Integración de iconografía SVG y tablas de datos

Pruebas visuales y de accesibilidad automatizadas

Documentación viva en Figma y Storybook enlazados

Pipeline CI para validar tokens, SVG y capturas

Entrega de la librería y guía de adopción en productos