Figma: Criação de componentes

Componentes - Apresentação

Apresentando os instrutores e o curso

Olá! Boas-vindas ao segundo curso da formação de Figma aqui na Alura. Caso ainda não nos conheça, isso significa que não participou do primeiro curso da formação, pois estamos lá ministrando aquele curso. Para nos apresentarmos, meu nome é Matheus Vilain. Sou professor, product designer (designer de produto), especialista em design system (sistema de design) e autor do livro "Design System Além do Layout" pela Casa do Código.

Audiodescrição: Matheus é um homem de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. Seu cabelo é bem curto, diferente da barba, que é longa, cobrindo praticamente todo o pescoço. Ele usa óculos de cor amadeirada, uma camiseta de manga longa preta, gola alta, e uma corrente de prata. À sua frente, há um microfone sustentado por um braço articulado. Atrás dele, há uma estante com alguns livros e bonecos. Atrás da estante, há uma grade com crachás pendurados e uma costela-de-adão ao lado.

Recomendando o curso introdutório

Como mencionado, este é o segundo curso da formação de Figma na Alura, o que significa que há um primeiro curso. Caso ainda não tenha participado dele e não conheça o Figma, recomendamos que pause este vídeo, retorne ao primeiro curso, entenda e assista para conhecer as ferramentas fundamentais e os primeiros recursos do Figma. Aprenda a trabalhar com Auto Layout (layout automático), pois tudo isso é mencionado lá.

Explorando o conteúdo do curso intermediário

Neste curso, já vamos embarcar em um nível mais intermediário e avançado. Vamos abordar recursos mais utilizados dentro do Figma, aqueles que são mais importantes e que utilizaremos muito na prática. Dizemos isso porque também os utilizamos frequentemente na prática, inclusive na empresa em que trabalhamos, a LocalWeb.

Ao longo das cinco aulas deste segundo curso, discutiremos sobre componentes, como trabalhamos com eles, como os construímos e utilizamos na prática. Exploraremos bibliotecas de componentes para compartilhar componentes, estilos e variáveis com outros arquivos, o que nos leva à parte de Design System (Sistema de Design) e Guia de Estilo. Abordaremos também esses temas ao longo do curso.

Aprofundando em variáveis e novos recursos

Vamos aprofundar ainda mais o assunto de variáveis, iniciado no curso anterior, avançando para variáveis com múltiplos valores. Isso nos permitirá trabalhar com modos claro e escuro, ou com multimarcas dentro de uma empresa ou de várias empresas.

Discutiremos um dos recursos amplamente utilizados no Figma, o DevMode, para realizar o handoff (transferência) e especificação do projeto. Além disso, abordaremos um dos recursos mais recentes, o Figma Draw, que oferece uma série de funcionalidades interessantes para trabalhar com interface e visual.

Integrando inteligência artificial e prática no projeto

No decorrer do curso, falaremos sobre alguns recursos de inteligência artificial que o Figma possui. É importante ressaltar que, neste curso, no curso anterior e ao longo de toda a formação, estamos desenvolvendo um projeto completo, que ajudará a entender como aplicamos isso na prática dentro de uma empresa, utilizando o Figma para gerar um portfólio. Também será uma oportunidade para conhecer como designers, incluindo nós e outros Product Designers, utilizam essa ferramenta na prática.

Concluindo e preparando para o próximo vídeo

Esperamos que aproveitem cada aula. Nos vemos no próximo vídeo, onde começaremos a explorar o projeto e discutir sobre componentes. Não vamos nos atrasar. Até lá!

Componentes - O que são componentes

Introduzindo os componentes no Figma

Vamos discutir sobre o que são os componentes no Figma, um dos recursos mais importantes da plataforma. Nesta primeira aula, é essencial prestar atenção, pois conhecer cada detalhe dos componentes é fundamental. Antes de abordarmos como construir e utilizar os componentes, vamos entender para que eles servem.

No projeto que temos aqui, finalizado no primeiro curso, criamos várias interfaces, como blocos de postagem, campos de texto e barras de navegação lateral. Todos esses elementos soltos podem ser transformados em componentes. Os componentes funcionam de maneira semelhante às variáveis que criamos, como variáveis de cor, texto e numéricas. Quando alteramos uma variável em um local, ela muda automaticamente em todos os lugares onde é utilizada. Por exemplo, ao alterar uma variável de cor, todos os elementos que a utilizam são atualizados simultaneamente.

Explicando a funcionalidade dos componentes

Os componentes são estruturas mais robustas em comparação com variáveis e estilos, que são elementos mais simples e únicos. Por exemplo, um botão pode ser identificado como componente no Figma pela cor roxa, diferenciando-o dos elementos naturais, que possuem bordas azuis. Um componente pode incluir um frame com cor de fundo e texto com pré-definições de estilo, e pode ser transformado em componente.

Ao transformar um elemento em componente, podemos acessá-lo no menu Assets, no painel à esquerda, onde encontramos todas as bibliotecas criadas no arquivo. Podemos arrastar o componente várias vezes e editá-lo dentro do projeto. A vantagem é que, ao modificar o componente principal, todas as suas instâncias são atualizadas automaticamente. Por exemplo, ao alterar o texto ou a cor de fundo do componente principal, todas as instâncias refletem essas mudanças. Da mesma forma, ao alterar a cor do texto, todas as instâncias são atualizadas automaticamente.

Diferenciando componentes principais e filhos

Isso é muito valioso para nós. Ele segue o mesmo recurso, podemos utilizá-lo à vontade. Deixo aqui um adendo: nunca utilizemos esta versão. Esta é o que chamamos de versão principal. Note que, quando arrastamos nosso componente para utilizá-lo, nessas versões, eles não têm o título no topo, que é o nome do nosso componente, que aparece na camada. Inclusive, o próprio componente tem uma indicação diferente; o ícone dele são losangos preenchidos. Diferente desses componentes que podemos chamar de componentes filhos, eles têm um losango único que é apenas sublinhado. Este é o principal, e nunca o utilizamos dentro do nosso projeto. Ele fica separado no espaço para, caso precisemos modificar, podermos fazer essa alteração.

Antes de seguirmos para a próxima aula, quero discutir algo sobre os componentes, antes de aprendermos a construí-los de fato. Fizemos uma modificação, e note que todos eles estão iguais. Se mudarmos o texto, ele muda; se mudarmos a cor de fundo, ele muda. Mas, se fizermos uma modificação especificamente em um componente filho, por exemplo, alterando a cor de fundo do terceiro, e no segundo alterarmos o texto, e no outro colocarmos um negrito, algo interessante acontece. Se alterarmos agora a cor do fundo do nosso botão principal para, por exemplo, laranja, ele altera em todos, exceto naquele em que mudamos a cor de fundo para azul. Por quê? Porque ele já tem uma modificação específica do componente filho e não respeitará mais as modificações do componente principal. Da mesma forma, se mudarmos o texto, ele não mudará mais no segundo, pois fizemos uma alteração no texto dele também. Ele para de respeitar todas as mudanças que fazemos no componente principal.

Resolvendo conflitos de instâncias de componentes

Devemos sempre estar atentos a isso. Se modificarmos o componente filho, quando voltarmos para fazer alterações no componente principal, aquele filho que foi alterado não aplicará mais as mudanças. Para resolver isso, podemos clicar no componente filho, ir ao painel de design, localizar nosso componente no topo, clicar nos três pontinhos e selecionar "Reset Instance" ou "Reset Fill". Como apenas mudamos o preenchimento, o Figma nos dá essa indicação. Podemos resetar somente o preenchimento, mas se modificamos muitas coisas ou queremos voltar ao padrão, basta selecionar "Reset Instance", e ele retorna à versão principal.

Isso é o componente. Nas próximas aulas, falaremos sobre a construção e, claro, criaremos nossos componentes do projeto. Nos vemos lá!

Componentes - Propriedades

Discutindo as propriedades do botão

Vamos começar discutindo as propriedades do botão. No caso, são quatro, mas nesta aula abordaremos três delas. Primeiramente, ao clicar no botão, no painel de design, encontramos a área do nosso componente. Haverá uma linha chamada properties (propriedades). Ao clicar no botão de mais, serão exibidas as quatro propriedades. Falaremos sobre text, boolean e instance swap (texto, booleano e troca de instância). No próximo vídeo, abordaremos a variante, que possui algumas peculiaridades adicionais.

Comecemos pela propriedade de texto. Se quisermos editar o texto do botão, o fluxo natural seria clicar várias vezes: uma para selecionar o botão, outra para identificar a seleção do texto, mais uma para selecionar o texto e, finalmente, para abrir a edição do texto. Esse processo é desnecessariamente complexo. A propriedade text existe justamente para simplificar isso.

Utilizando a propriedade de texto

Para utilizá-la, clicamos em text, damos um nome, como "texto do botão", e definimos o valor padrão que aparecerá no componente principal, que será arrastado para os componentes filhos. Podemos, por exemplo, definir "Digite aqui" como texto padrão. Ao criar a propriedade, um ícone e um aviso indicam que a propriedade ainda não está sendo utilizada no componente.

Para utilizá-la, selecionamos o texto, voltamos à posição do componente, onde será exibida uma área de text, com um campo de texto para alterar o texto do botão. O ícone que usaremos para aplicar uma variável é este aqui. Ao clicar nele, a propriedade de texto aparece, e podemos alterar o valor padrão. Quando arrastarmos um botão, não precisaremos mais clicar várias vezes para editar o texto. Ainda é possível fazer isso, mas agora podemos clicar no campo de texto e mudar o texto à vontade, tornando o processo muito mais prático.

Essa simplificação é especialmente útil para componentes mais robustos, onde a seleção pode ser mais complexa. Isso facilita todo o nosso trabalho.

Explorando a propriedade booleana

A próxima propriedade é a booleana, que já conhecemos: true é para exibir e false é para ocultar. Podemos usar isso para exibir e ocultar alguma informação dentro do nosso componente. Neste caso, estamos com um botão de exemplo. Muitas vezes, um botão terá um ícone, algumas vezes na parte esquerda. Vamos colorir este círculo apenas para ilustrar. Muitas vezes, haverá um ícone, outras vezes não, e para não precisarmos criar dois componentes diferentes, ou seja, dois botões separados, usamos essa propriedade. Podemos criar uma propriedade chamada ícone e deixar o valor como true para que seja exibida por padrão. Criamos a propriedade, e aparece um aviso dizendo que não está sendo utilizada. Clicamos no círculo e, na área da aparência, ao lado do ícone do olho, que usamos para ocultar e exibir, está o ícone de propriedade. Clicamos nele, selecionamos a propriedade ícone, e agora podemos arrastar o componente. Há um switch que oculta e exibe. Como estamos usando o auto layout, ele sempre respeitará os espaçamentos que colocamos, tornando tudo automático e mais fácil de controlar.

Uma característica importante é que só conseguimos criar e editar propriedades no componente principal. No componente filho, só podemos utilizar as propriedades, mas não conseguimos adicionar, remover ou configurar.

Implementando a troca de instância

A última propriedade é o instance swap (troca de instância), que funciona de maneira simples. Muitas vezes, teremos uma informação dentro de um componente que não está estabelecida e pode mudar, como é o caso de ícones. Por exemplo, temos um botão chamado "novo", e o ícone pode ser um sinal de mais; um botão chamado "fechar", e o ícone pode ser um X; um ícone de salvar pode ser um disquete. Não precisamos criar um botão para cada ícone, pois isso seria um trabalho infinito. O instance swap serve para inserir uma informação dentro de um componente e permitir que a troquemos por outra à vontade. Para isso, o Figma pede que insiramos um componente dentro de outro componente, o que é algo natural.

Vamos excluir o círculo e, para este exemplo, criamos alguns ícones transformados em componentes: um quadrado, um triângulo e um círculo. Vamos arrastar o círculo para dentro do botão. Como excluímos o outro círculo, o ícone está dando problema novamente. Vamos adicionar a propriedade novamente, e já está funcionando. Agora, vamos criar a propriedade instance swap. Vamos usá-la para trocar entre o círculo, o triângulo e o quadrado, e vice-versa. Podemos chamá-la de trocar ícone. No valor, ele pergunta qual será o valor padrão da troca de instância. Nesse caso, o valor padrão é qual componente, ícone ou informação aparecerá por padrão no componente.

Configurando a troca de ícones

Quando abrimos a seleção, ele mostra todos os componentes do arquivo. No caso, temos o botão e uma pasta com três componentes, pois está dentro de uma section. Não podemos selecionar o próprio botão, pois não podemos colocar um botão dentro de outro. Vamos selecionar o ícone, clicar no círculo, e ele aparece. Podemos criar a propriedade e adicioná-la dentro do círculo. Clicamos nele, e no topo aparece o círculo, indicando que é um componente dentro do arquivo. Podemos clicar nele, e ele nos leva ao componente. Essa é uma forma interessante de localizar informações. Para adicionar, vemos o ícone e a propriedade trocar ícone. Selecionamos, duplicamos o componente, e podemos mudar o texto, habilitar e desabilitar o ícone.

Antes de entrar na parte de trocar ícone, ao desabilitar, o ícone tem duas propriedades: ícone, na parte da aparência, e trocar ícone, na parte de troca de instância. Quando desabilitamos, ele não permite visualizar a propriedade de trocar ícone, pois o ícone está oculto. Isso é uma inteligência muito boa. Adicionamos o ícone de volta, clicamos para trocar o círculo, e podemos selecionar o quadrado ou o triângulo. Podemos puxar uma biblioteca de ícones para o arquivo, desde que todos sejam componentes. Podemos colocar qualquer coisa, mas ele só mostrará se for um componente. Criamos um retângulo 3, inserimos, e ele aparece como um quadrado, pois não fizemos os ajustes necessários de auto layout. Sendo um componente, podemos fazer todas as adaptações e fica mais fácil controlar.

Essas são três propriedades da parte de componentização. No próximo vídeo, falaremos sobre variantes. Até lá!

Sobre o curso Figma: Criação de componentes

O curso Figma: Criação de componentes possui 145 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

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

• capitulo