Glossário
Aquela palavra que o dev soltou na daily e você anotou pra pesquisar depois. Cada verbete tem uma definição em uma frase e, quando existe, o equivalente no Figma.
28 termos
Acessibilidade
HTMLFazer a interface funcionar pra quem usa teclado, leitor de tela, zoom ou tem pouca visão.
No mundo do Design: Plugin de contraste
API
JavaScriptO endereço de onde a interface busca dados. É a fonte que preenche o que no Figma é texto de mentira.
Array
JavaScriptUma lista ordenada de valores. É de onde vem toda lista, tabela e galeria da sua interface.
Assíncrono
JavaScriptCódigo que não acontece na hora. É o motivo de existir estado de carregamento na sua tela.
Box model
CSSTodo elemento é uma caixa com conteúdo, padding, borda e margem, nessa ordem, de dentro pra fora.
No mundo do Design: Padding e stroke do frame
Componente
ReactUm pedaço de interface reutilizável, com aparência e comportamento próprios. É o component do Figma.
No mundo do Design: Component
Deploy
FerramentasColocar o site no ar, num endereço que qualquer pessoa acessa.
No mundo do Design: Publicar protótipo
div
HTMLUma caixa sem significado nenhum. Serve pra agrupar e estilizar, e mais nada.
No mundo do Design: Frame ou group sem função
DOM
HTMLA árvore de elementos que o navegador monta a partir do HTML. É o painel de camadas da página.
No mundo do Design: Painel de camadas
Especificidade
CSSA regra de desempate do CSS quando duas regras querem estilizar o mesmo elemento.
No mundo do Design: Ordem das camadas
Estado
ReactA informação que muda enquanto a pessoa usa a tela, e que faz a interface se redesenhar.
No mundo do Design: Variants e protótipo
Evento
JavaScriptAlgo que acontece na página, tipo um clique, e o código que responde a isso.
No mundo do Design: Interação do protótipo
Flexbox
CSSO jeito de empilhar coisas em uma linha ou em uma coluna e distribuir o espaço entre elas.
No mundo do Design: Auto layout
Framework
FerramentasUm conjunto de decisões já tomadas, pra você não precisar montar tudo do zero.
No mundo do Design: Template de arquivo
Função
JavaScriptUm bloco de código com nome, que recebe valores, faz alguma coisa e devolve um resultado.
No mundo do Design: Ação do protótipo
Git
FerramentasO histórico de versões do código. É o histórico do Figma, só que você decide quando salvar um ponto.
No mundo do Design: Histórico de versões
Grid
CSSLayout em duas dimensões, com colunas e linhas definidas antes de saber o que vai dentro.
No mundo do Design: Layout grid
Hook
ReactFunção do React que dá superpoder a um componente, tipo guardar estado ou reagir a mudanças.
HTML semântico
HTMLUsar a tag que descreve o que a coisa é, em vez de enfiar tudo em div.
No mundo do Design: Nome da camada
JSON
JavaScriptO formato de texto em que os dados viajam pela web. Parece uma lista de propriedades do Figma.
JSX
ReactA sintaxe que deixa escrever algo parecido com HTML dentro do JavaScript.
Media query
CSSUm bloco de CSS que só vale quando a tela cumpre uma condição, tipo ter menos de 768px de largura.
No mundo do Design: Breakpoints do protótipo
npm
FerramentasO gerenciador de pacotes do JavaScript. É a loja de plugins do projeto.
No mundo do Design: Plugins da comunidade
Props
ReactOs valores que você passa pra um componente por fora. São as propriedades do component no Figma.
No mundo do Design: Component properties e variants
Pseudo-classe
CSSUm estilo que só vale quando o elemento está em determinado estado, tipo hover ou foco.
No mundo do Design: While hovering
rem, px e em
CSSAs três unidades de medida que você vai usar. px é fixo, rem escala com a preferência do usuário.
No mundo do Design: Tamanho de fonte
Responsivo
CSSLayout que se adapta a qualquer largura, e não só às três telas que você desenhou.
No mundo do Design: Constraints e resizing
Variável CSS
CSSUm valor guardado com nome, reutilizado em todo lugar. É o token do design system, no código.
No mundo do Design: Variables