Primeiras aulas do curso Guia de estilos: Montando páginas com componentes

Guia de estilos: Montando páginas com componentes

Figma e guia de estilos - Introdução

Meu nome é Matheus Roberto e eu vou acompanhar você durante essa jornada do curso de Style Guides CSS.

Nesse curso vamos ver o que são os Style Guides e qual a importância de se ter um style guide ou guia de estilos. Vamos falar também sobre temas e utilizações que se repetem na página, vamos ver sobre cores, as cores que se repetem, a paleta de cores; tipografia usada na página e até formatos de elementos, como, por exemplo, aqueles botões que vão se repetindo durante toda a página, inputs, botões, cartões e até outros conjuntos de informações.

Vamos ver também como vamos fazer para criar componentes que podemos reutilizar durante todo o nosso projeto. E com isso vamos aprender também ferramentas que ajudam no desenvolvimento da página, como EMMET e IntelliSense CSS.

Vou falar também sobre a arquiteturas CSS, de como os nossos componentes devem estar dispostos dentro do nosso projeto, então criar pastas e separar esses arquivos conforme uma arquitetura definida, arquivos base de CSS, componentes e aí as nossas seções.

Nesse curso vamos fazer, além de inpage aqui, a home page da Casa Verde, a parte mobile. Aqui nós vamos montar cada um dos componentes que serão utilizados nessa página, cabeçalhos, rodapés, cartões, botões, inputs e assim por diante. E nós vamos montar cada uma dessas seções com os componentes que vamos criar durante o curso. Então fica comigo e vamos fazer nosso projeto funcionar.

Figma e guia de estilos - Recolhendo recursos

Para começar, vamos importar o projeto dentro do Figma. Vou clicar aqui no canto superior direito do Figma, “Import” e agora vou importar o arquivo “Styleguides.fig”.

Caso você não tenha esse arquivo, você pode pausar esse vídeo, voltar no exercício anterior, onde liberamos o arquivo para download. Então basta clicar em Styleguides agora, “Open” e o Figma vai importar o arquivo.

Depois que o Figma importar arquivo, vamos clicar em “Done” e abrir agora “Styleguides”. Carregou e agora um passo muito importante no desenvolvimento o projeto é analisar todo o layout que nós temos. Temos aqui duas páginas, desktop e mobile, e dentro temos várias páginas, que são a home, várias imagens, olha só a tipografia, ícones, design de produtos, um carrinho. Agora mobile, bastante cores amarelas, tipografias são só aparentemente duas. Legal.

Depois que analisamos toda a página nós vamos recolher todos os recursos necessários para poder montar a página. Nesse curso vamos focar só na versão mobile e nessa primeira página, que é a home, então todas as imagens que nós vamos baixar vão ser só dessa página. Então como vamos fazer isso?

Por exemplo, aqui no cabeçalho, eu clico duas vezes na logo, ele vai selecionar aqui no canto e na barra lateral direita eu clico em “Export logo”, é o último dropdown que tem. E basta clicar aqui. E agora onde vou salvar esse arquivo?

Primeiro precisamos criar uma pasta desse arquivo para poder salvar as imagens, eu já deixei criada uma pasta aqui chamada “casaverde”, dentro dela não tem nada, é só uma pasta vazia, mas nessa pasta vai ser onde vai conter todos os arquivos do projeto. Então vou criar uma pasta aqui agora, dentro de “casaverde”, chamada de “assets”.

Dentro de “assets” vão ficar todas as imagens CSS e também nossos componentes. Vou abrir aqui assets e dentro vou criar outra pasta chamada “img”, que é onde vou guardar as imagens. agora em img, basta clicar aqui e salvar o logo.

Próximo vai ser o ícone do carrinho, então eu clico aqui ou até mesmo na barra lateral esquerda, eu clico em “carrinho”, e eu posso clicar aqui, “Export carrinho”, na barra da direita.

Só que isso é um ícone agora, então para deixar mais separado eu vou criar outra pasta chamada “ícones” e dentro de “ícones” eu vou salvar o carrinho e tudo o que for relacionado a ícones.

Próxima imagem vai ser essa imagem da planta, “Export”, como essa imagem é um pouco mais complexa não vou salvar lá como svg, vou salvar como png. Eu vou mudar até o nome dela, porque esse nome não faz muito sentido, vou colocar “planta-chamada”. Salvei.

Próximo ícone é o de carta, “Export mail”, svg, beleza, “ícones”. Seta, carrinho. E agora as imagens das plantas, vamos uma por uma selecionar todas. Vamos lá, seleciona, export.

Em alguns casos as imagens vão estar com o nome meio estranho, vamos ter que arrumar para cada uma delas. Nesse caso, apagar esse “1” espaço do lado, deixar “produto-01”, e fazer isso com todos os outros produtos.

Agora pegar o ícone da seta, salvar como svg, ele é um ícone, deixar aqui “seta”. O botão de play agora também, export, svg, chamar de “play.svg”.

Essas imagens de vídeos nós não vamos pegar, porque vamos usar outra ferramenta depois para poder substituir essas imagens de fundo. Vamos para o rodapé agora. A logo é a mesma, então “Redes”, “facebook”, “twitter”, “instagram”.

Agora essas imagens de splash no fundo, então clica duas vezes nesse splash e salvar, vamos lá. Como vai ser a imagem do fundo, então eu vou deixar aqui na “img”, na raiz mesmo, e chamar de “splash-rodape”. E agora a do topo também, export, vou chamar de “splash-chamada”.

O que falta agora são só essas linhas e a textura do fundo. Vamos ver, descer tudo, aqui. Perfeito. No canto esquerdo, aqui na barra lateral, elas já estão separadas, a imagem de fundo é só essa aqui, o que podemos fazer é mesclar todas elas, mas não compensa, já que ela já se repete mesmo, não tem por que mesclar. Então clicar aqui, por exemplo, em imagem 1, que é a textura, export como png mesmo, agora colocamos aqui “fundo-textura”.

E agora tem as linhas, e são quatro linhas, então é difícil conseguir recortar essa imagem, as quatro linhas de uma vez só, então vamos pegar as quatro aqui e nós vamos mesclar, cadê? “Flatten”, é aqui a opção. Eu selecionei as quatro, botão direito e “Flatten”.

Agora ele virou como se fosse um elemento só e agora vamos exportar esse elemento. Clicar aqui em “Vector”, export, pode ser svg também, nesse caso não vai fazer muita diferença, clicar em png, “Export Vector” e vamos chamar de “fundo-linhas”.

Já pegamos todas as imagens, mas onde estão as cores? Vamos ter que pegar cada cor, tem esse cinza aqui, que cinza é esse? Eu vou ter que ficar clicando aqui, descobrindo, pegando o valor, 2020. Esse amarelo aqui é outro amarelo, cadê? Qual é o amarelo desse botão? É esse amarelo? Tem algumas cores mais claras aqui. Eu vou ter que ficar olhando elemento por elemento?

Quando a equipe de design faz um projeto como esse, eles criam outra página aqui no Figma, por exemplo, chamada guia de estilos. Tudo o que vamos precisar de ferramenta para poder usar na nossa página vai estar separado aqui. Então clicando na “Guia de estilos” aqui na barra lateral esquerda.

Nós temos todas as cores que são usadas no projeto, aquele preto, o cinza, o branco e o amarelo. Também como, por exemplo, tipografia, os tamanhos das fontes, qual tipografia é essa, quando tem destaque, botões, como funciona o botão. Também temos espaçamentos, espaçamento também do mobile e assim por diante. É uma ferramenta muito importante.

As cores estão aqui mesmo, então toda vez que tivermos dúvida para sabermos que cor vamos usar, nós voltamos aqui e pegamos essa cor.

E agora quais são as fontes que temos que usar? Pela tipografia aqui, nós temos só dois tipos de fontes, vamos ver esse, ele é Elsie Swash Caps, e ele está como black, que é o nível 900.

E agora esse de baixo, que vai ser Montserrat bold e esse aqui, que é o P, vai ser Montserrat regular. Então nós temos que pegar três fontes, a Montserrat regular, que é 400 de peso, a Montserrat bold, que é 700 de peso, e a Elsie blá blá blá, que tem o peso 900.

Onde vamos conseguir essas fontes? Vamos usar uma página que conseguimos pegar fontes gratuitas, que é o Google Fonts. Vou abrir o navegador e digitar “fonts.google”. Agora aqui vamos pegar nossas fontes, deixa eu dar mais um zoom para enxergar melhor.

Aqui na barra de busca eu vou escrever aquela elsie não sei o que lá, Elsie Swash Caps. Cliquei. E quais são as tipografias que você me orienta, aqui só tem duas, a regular 400 e a black 900, que é a que queremos. Eu clico em “Select this style”, selecionar esse estilo e apareceu essa barra lateral.

Vamos clicar na logo do Google Fonts para voltar para a home e agora a “montserrat”. Está aqui, nós criamos os pesos 400 e 700, então desci aqui, regular, queremos essa. E agora bold 700, está aqui, criamos essa também.

Depois que já selecionamos todas as fontes, aqui na barra lateral direita que vai abrir, clicar em “Embed” e ele vai me dar um código html pronto. Só que onde vamos jogar esse html pronto? Primeiro temos que criar nossa página html.

Eu vou abrir o Visual Studio Code, que é o editor de texto que eu vou usar durante todo esse curso, e vou abrir aqui, “File”, “Open Folder” e vou selecionar aquela pasta que nós criamos, a “casaverde”. Cliquei aqui, “Select Folder”, e já aparece toda a estrutura dos nossos arquivos. Botão direito na barra lateral, “New File”, eu vou chamar de “index.html”. Fechei a barra lateral e agora vou colocar toda a estrutura básica de um arquivo html.

Vamos lá, “”, “”, dentro de head vamos ter a tag “”. Temos a tag “

Figma e guia de estilos - Criando um componente

Depois que recolhemos todos os assets, as imagens, a tipografia, agora podemos criar o nosso primeiro componente. Por que vamos criar um componente? O que ajuda a criar um componente? Vamos abrir o Figma.

Componentes ajudam bastante na parte de desenvolvimento, nós ganhamos tempo com o desenvolvimento quando temos muitos elementos que se repetem, como, por exemplo, esse botão dessa newsletter, ele aparece várias vezes em outros lugares de outras páginas, aparece aqui na home, aparece no produto mobile, carrinho overlay, aparece na modal aqui, ele vai se repetindo. Essa parte de produto também, tem a foto do produto, tem o nome do produto, o preço e o botão comprar.

Esse conjunto de informações vai se repetir várias vezes em várias páginas diferentes, ao invés de criarmos uma estilização para cada um desses elementos e ficar repetindo-os com “Ctrl + C”, por exemplo, em várias páginas, nós criamos uma vez só e toda vez que formos criar esse componente só precisamos lembrar da estrutura dele. Depois que soubermos a estrutura é só aplicar as classes e toda a estilização já aparece por conta, só precisamos focar depois em semântica.

Vamos começar, por exemplo, com esse botão aqui em newsletter. Vamos lá. Primeira pergunta é: o que faz esse botão ser um botão? Ele tem o fundo amarelado, ele tem essa cor branca, a tipografia dele é bold e o texto está centralizado.

E além disso, eu não sei se dá para ver, mas ele tem um efeito de sombra aqui. Vamos ver no guia de estilos. Esse botão tem um efeito de sombra, que é um drop shadow, 10 pixels de deslocamento horizontal, 10 pixels de deslocamento vertical, 30 pixels de blur e 30% de opacidade.

Então já sabemos o que faz esse botão ser um botão, agora podemos componentizar isso. Vou abrir o Visual Studio Code, vou criar agora uma pasta CSS, que é onde vão ficar todos os nossos arquivos CSS de componentes. Dentro de “assets”, “New Folder”, “css”, dentro de “css” agora, abrir aqui pasta “componentes” e agora criar um arquivo chamado “botoes.css”.

Fechei a barra lateral e agora vamos de novo, criar a classe “.botao” e dentro de botão vamos criar agora todas as estilizações que fazem esse botão ser um botão, “background-color:”, é aquele amarelado, qual era a cor mesmo? Vou voltar para o Figma, vamos ver, é esse amarelo, o que é esse amarelo? FFCB47. Vamos ver se eu lembro disso, “#FFCB47;”, ok.

Agora elemento do texto, “center;”, ele tem agora a fonte Montserrat, então é “font-family: ‘Montserrat’,” caso não tenha Montserrat vai ser uma “sans-serif;”. O peso da fonte também é diferente, ele tem aquele bold, e a cor também é branca, então “color: #FFFFFF;”.

Agora colocar os espaçamentos, “100%”, colocar um “padding-top:”, que nem é o padding real, mas só para termos alguma ideia de distância, para o texto não ficar muito colado, “padding-bottom:”, depois vamos arrumar isso. “1rem;”.

Agora colocar uma “box-shadow:”, era “10px” de deslocamento horizontal, “10px” de deslocamento vertical, “30px” de blur e agora é a cor amarelada mesmo, então é essa, mais 30%, que dá mais ou menos 3D lá no hexadecimal.

E agora, já que vamos colocar isso numa tag bottom, ela tem uma borda já padrão, nós não queremos essa borda, então “border: none;”. Pronto, criamos nosso componente. Nós temos aqui tudo que forma um botão. Agora vamos testar.

Eu venho no “index.html” e agora temos que importar esse arquivo botoes.css. Criei aqui “. Dentro de “” agora vamos criar nossa tag “

Sobre o curso Guia de estilos: Montando páginas com componentes

O curso Guia de estilos: Montando páginas com componentes possui 153 minutos de vídeos, em um total de 49 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas