1
resposta

[SOLUÇÃO] Inspenção de cores - caso gradiente!

Olá pessoal! Vi esta dúvida aqui no fórum e também lá no Figma por meio dos comentários dos alunos. Pois vim trazer a solução bem fácil aqui para vocês!

Ao selecionar no protótipo um elemento que contenha cor, no caso do exemplo, a palavra no menu "Programação", a aba "Properties" irá abrir ao lado esquerdo.

IImagem do FigmaAo rolar a barra da aba "Properties" até chegar em "Colors", por padrão o formato estará em HEX.

Ao rolar a barra da aba Properties até chegar em Colors, por padrão o formato estará em HEX

Mude este valor para "CSS". Assim, você poderá copiar já o código CSS deste gradiente.

Ao clicar em "Copy" no Figma ao lado de "CSS", o seu CTRL+V (no Windows, em caso de Mac será CMD + V) estará com o seguinte conteúdo: background: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);

Agora é possível realizar o procedimento proposto na aula: criar uma variável de cor gradiente dentro do ":root".

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeLembre-se que o Figma insere a palavra "background", no caso, não é necessário (exemplo acima).

Espero que este tutorial ajude você que esteja com dúvida!

1 resposta

Olá Mateus, tudo bem com você?

É muito bom ler postagens como a sua. A clareza e detalhamento do seu passo a passo são excelentes e sem dúvida, serão de grande auxílio para estudantes que enfrentam questões semelhantes. Obrigado por dispor do seu tempo para contribuir com a comunidade Alura.

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software