Resolução: Aula 16 - Design e Figma 🎨
🟢 Básicos (Fixação)
1. Papel do Designer (Handoff) No estágio solto prototipado final (Handoff) ele anseia observar uma abstração exata matemática da interface alta-fidelidade; não apenas imagens soltas (JPG's despadronizadas), contudo um mapa digital metódico englobando medidas CSS restritas de "Padding / Margins", palhetas hexadecimais estritas dos Brand Cores "Primary/Danger" na guia nativa lateral, Fontes importáveis tipográficas de Google Fonts interativas no dev-mode, além de links e guias da Design System vetoriais em "Export Assets".
2. SVG vs PNG em Multitelas
Os famigerados ícones .png (Bitmaps rastreios baseados num oceano matricial fixo de pequenos pixels fotográficos). Se você redimencionar/escalar (Scale UP) um PNG nativo de 24x24 px na imensa retina 4K bruta e nítida monstruosa do display iPad moderno ele rasgará contornos esmagadoramente ficando "serrilhado/pixelado" feio e turvo aos usuários finos.
Em contrapartida de vetor (.SVG) lida com amarras lineares de metadados em códigos escaláveis; ao aplicar escalabilidade para "Infinito", a GPU de navegadores repinta a matemática do software estritamente perfeitamente lisa na tela final contendo ínfimo e formidável peso (Zero Kb e Zero perdas de detalhe em telões Smart TVs colossais).
🟡 Intermediários (Aplicação)
3. Dev Mode do Figma
O olho nu em testes manuais era o trunfo terrível dos antigos devs de site das velhas eras. Feriam gravemente as diretrizes e regras sagradas traçadas pelos estudiosos em UX quando criavam botões vermelhões fora da marca da logo, usando distanciamentos arbitrários soltos por falta de espelho metrológico. A janela dev mode traduz automaticamente a entidade visual retangular colorida de canvas em propriedades front-end copiáveis estritas (ex: background-color: #f2f2f2, border-radius: 8px). Extrai o "achismo" substituindo perfeitamente com engenharia copiável baseando um espelho pixel-perfect inebriante em precisão garantida no ar.
4. Componentização entre Mundos
A manutenção contínua e a sanidade em refrações diárias. No software Figma se a equipe designada percebe o apelo e altera magicamente o tom laranja base de bordas num "Header Button Component", ele alastrará nos duzentos e dez designs colados de carrinhos de telas espelhos espalhadas automaticamente no cloud; No campo "Dev", reter componentes isolados de biblioteca partilhada (<PrimaryButton /> na pasta components/UI root) significa repassar o update para um só elemento estático de sintaxe no React. Isso gera manutenções em tempo milésimo de reflexão global igual à raiz projetada inicial.
🔴 Desafio (Exploração)
5. Acessibilidade no Design (Contraste visual) A WCAG dita a Lei Magna visual da rede (Acessibility Guidelines for Contrast Rates estaduais ativas no Globo). Ferramentas de UX e devs inspecionam índices contrastantes perante as fontes amareladas em botões textuais acinzentados brancos (onde o checker avisa Rate x3.0 Fail de leitura limitadíssima sob iluminações solares abertas estressadas para daltônicos de envelhecida visão). Essa negligência na transcrição cega por desenvolvedores isola os usuários na aplicação marginalizados de ler botões de pagamento ("checkout"). Podendo gerar litígios custosos de compliance legal a empresas que renegam deficiência digital, os front enders e designers assumem co-responsabilidade de atestar visualmente interfaces humanas saudáveis em leiturabilidade inclusiva ao exportar.