Como usar uma fórmula booleana no Figma

Figma é conhecido como um dos melhores programas para designers gráficos do mundo. Seus recursos são abrangentes, ajudando os usuários a criar qualquer coisa, desde logotipos atraentes até páginas de destino exclusivas. Notavelmente, o recurso booleano (também parte da atualização das propriedades do componente em 2002) permite obter formas personalizadas combinando suas camadas por meio de múltiplas fórmulas.

Aqui você aprenderá como usar os recursos booleanos em seu próximo design.

As opções de fórmula booleana para formas personalizadas

Antes de criar sua forma personalizada, você precisará saber como funcionam as fórmulas booleanas e o que elas alcançam. Sempre que você criar um grupo booleano, ele contará como uma única camada de forma com propriedades de preenchimento e traçado.

Você pode encontrar o ícone booleano com dois quadrados sobrepostos na barra superior da sua interface. Você terá quatro opções de fórmula no menu suspenso ao clicar nela.

Essas opções de fórmula incluem:

• Seleção de União – Esta opção transforma suas formas selecionadas em um grupo booleano. Ao usar União, os caminhos da subforma externa formarão o contorno da nova forma personalizada. No entanto, não incluirá nenhum dos segmentos internos sobrepostos.
• Subtrair Seleção – Considerar que esta opção é o oposto da seleção de união é útil. Remove toda a área de uma forma da forma base. Isso deixa apenas a camada inferior visível.
• Seleção de interseção – Com a seleção de interseção, os usuários podem criar uma forma personalizada que consiste apenas em segmentos sobrepostos das formas ou subcamadas originais.
• Excluir seleção – Excluir funções é o oposto da opção de grupo booleano de intersecção. Usá-lo lhe dará uma forma personalizada a partir das partes não sobrepostas das formas originais.

Lembre-se de que você precisará selecionar duas ou mais formas antes de poder usar efetivamente a opção Booleana no menu superior. Isso ocorre porque Boolean combina apenas várias camadas de forma em uma forma personalizada e complexa.

Usando a propriedade Figma Instance Swap

Quando Figma anunciou a atualização das propriedades do componente em 2022, a seleção booleana era apenas um dos vários novos recursos disponíveis. O objetivo da atualização dos componentes é ajudá-lo a criar modelos de variação de maneira eficaz, em vez de procurar opções fora do comum.

Embora Boolean seja uma parte importante disso, os usuários também podem usar a propriedade de troca de instância. Veja como fazer isso:

1. Selecione um elemento do seu design.

   

2. Navegue até o menu de troca de instância no lado direito da interface e clique nele. O ícone tem um diamante com uma seta.

   

3. Dê um nome à propriedade, como “ícone” no menu pop-up, e defina o valor como uma marca de seleção, por exemplo.

   

4. Selecione “Criar propriedade”. Figma irá então marcar a propriedade do componente onde estava originalmente o menu de troca.

   

5. Crie uma cópia do seu design selecionando-o e usando o comando CTRL + C. Em seguida, coloque as instâncias lado a lado.

   

6. Selecione um novo ícone no menu de propriedades do componente marcado clicando nele. Isso alterará automaticamente o elemento na instância.

A função de troca de instância tem tudo a ver com conveniência. Usando a opção de troca de instância, você agilizará o processo de design enquanto alterna rapidamente variações (instâncias) lado a lado.

Usando a opção de propriedade de texto para alterações fáceis de instância

Digamos que você esteja criando um botão de call to action para uma landing page. Você tem duas variações lado a lado e usou a propriedade de troca de instância para visualizar ícones diferentes. No entanto, a redação é outro elemento a ser levado em consideração.

Normalmente, você precisaria percorrer a seção de camadas para concluir o processo. Com a propriedade do componente de texto, você pode visualizar e alterar isso na barra lateral. Veja como você pode usar o recurso de propriedade de texto a seu favor:

1. Selecione o elemento de texto em seu design.

   

2. Dê ao seu elemento um nome como “texto” e o valor “botão” antes de clicar em “Criar propriedade”.
3. Você poderá então alterar o texto e experimentar o texto de sua frase de chamariz.

A propriedade text é conveniente para usar junto com as opções booleanas e de troca de instância.

Como usar propriedades variantes no Figma

Com as novas atualizações de componentes no Figma, você pode criar múltiplas variantes e controlá-las todas na barra lateral direita. Isso ajudará você a alterar o texto e trocar ícones com mais eficiência. Você também pode controlar outros aspectos do design da sua variante. Vamos ver como fazer isso:

1. Selecione seu design e clique em “Adicionar variante” na barra superior. Segure à esquerda, clique no seu design e arraste a variante ao lado dele.

   

2. Você notará como a propriedade da segunda variante aparecerá na barra lateral direita. Rotule novamente a propriedade como “botão” e o valor próximo a ela como “vermelho”.

   

3. Essas propriedades agora rotularão sua variante. Se você selecionar seu design original, notará que o valor voltou para “padrão”.

   

Perguntas frequentes

Posso fazer logotipos usando a opção booleana?

Tecnicamente, a propriedade Boolean permite combinar múltiplas formas usando seus caminhos. Embora esta possa ser uma forma de criar logotipos simples, as opções são limitadas a formas simples, como elipses. Em vez disso, é melhor usar a ferramenta caneta para coisas como criação de logotipo. Você ainda pode usar as outras atualizações de componentes para facilitar o processo de camadas.

Posso alterar a fonte usando a opção de propriedade do componente de texto?

Infelizmente não. A propriedade do componente de texto permite alterar o texto em vez da fonte. No entanto, você ainda pode selecionar o texto e encontrar a fonte apropriada na barra lateral direita.

Quais são algumas instâncias de design em que precisarei usar as propriedades do componente acima?

Você não precisa usar propriedades de componentes para variantes. No entanto, torna o processo de design muito mais fácil e rápido. Exemplos são botões que exigem cores diferentes, principalmente semelhantes com apenas uma alteração de componente, ou pequenas variantes de formato de página de destino. Eles também são úteis para criar dois designs e escolher o melhor.

Simplifique seu processo de design com propriedades de componentes no Figma

Com opções como Boolean, você pode criar novas formas personalizadas a partir de uma combinação das antigas. Isso é feito através da barra lateral superior com quatro opções de fórmulas. Isso inclui união, subtração, interseção e exclusão. Da mesma forma, você pode usar outras opções de propriedades de componentes, como propriedade de texto e troca de instância. Isso facilita a criação de variantes com diferentes componentes. Em última análise, o uso de propriedades de componentes ajuda a agilizar o processo de design.

Que formas complexas você criou usando a opção booleana? Você também achou as opções de propriedades do componente fáceis de usar? Deixe-nos saber na seção de comentários abaixo.