Create a CHECKBOX [1 option] with Variables in @Figma (Variants, prototype, checklist, list).

Опубликовано: 18 Июль 2023
на канале: Flamb Design
650
42

English subtitle
_______USO E RECOMENDO: 🔥🔥🔥_______
🖱️ Mouse [ Ergonomia muito boa!] https://amzn.to/3nEz6ji
✍️ Mesa digitalizadora [Barata e boa!] Melhor preço: https://s.click.aliexpress.com/e/_99nxGj
OU https://amzn.to/2ZewfnS

👨‍🎨 GOSTARIA DE MELHORAR SUAS TÉCNICAS NO PHOTOSHOP?
CURSO Ilustração realista com foco no marketing do produto.
https://flambdesign.com/curso/

📚Sugestão de LIVROS PARA MEHLORAR SEU DESEMPENHO PROFISSIONAL📚:
📕 https://amzn.to/3HJwPLK Leitura fácil, boa narrativa e dá uma "chacoalhada" na sua procastinação mental. Um dos melhores livros que li.
📙https://amzn.to/3nESPzr Melhore a defesa de seus projetos e até sua apresentação pessoal/profissional.

FREE download 🤩🎁⬇️ (mockup e protótipos):
https://www.figma.com/@flambdesign

Apoie nosso canal 😊 👍
_______
💻 https://www.FLAMBdesign.com
💼 Linkedin:   / cordeiroflavio  
📷 Instagram:  / flambdesign  
🕹Artstation: https://www.artstation.com/flambdesign
👨‍🎨Behance: https://www.behance.net/flaviocordeiro
--------------------
⬇️ ⏱️ #figma #uiux #designer
00:00 Intro Variables Checkbox
00:58 Criando variants
01:52 Properties True/False
03:00 Adicionando Variables
04:54 Prototype com Variables
07:40 Availando interações
_____________
Faça um CHECKBOX [1 opção] com Variables no @Figma (Variants, protótipo,checklist, lista)

E aí, já precisou criar um checkbox que permite apenas uma seleção na sua interface? Meu nome é Flávio Cordeiro e vou ensinar como fazer isso usando variantes e variações do Figma. Para a nossa interação, a lógica será a seguinte: vamos criar as variantes do botão, ativado e não ativado, e em seguida faremos a variante para cada botão. Cada variante terá o valor falso ou verdadeiro para ativar/desativar o checkbox.

Vamos começar criando os elementos necessários para as variantes do botão, um texto simples e um botão de checkbox. Agora vamos criar a variante para cada botão, atribuindo o valor falso para desativado e verdadeiro para ativado. É importante deixar claro para o Figma o que cada coisa representa. Agora vamos adicionar as variantes aos elementos correspondentes.

Em seguida, vamos duplicar os elementos para cada item e fazer as devidas configurações para cada um deles. Agora precisamos criar o protótipo e ajustar as informações para ficar claro. Faremos a interação de cada botão, ativando e desativando os demais. Vamos copiar as interações já feitas para facilitar o processo.


Seguindo a lógica, ajustamos cada item e testamos o protótipo. Ao clicar em um item, os demais serão desativados, permitindo apenas uma seleção.

Essa lógica pode ser aplicada em diversos contextos. Você consegue pensar em outras possibilidades para utilizar essa mesma técnica? O resultado é incrível, utilizando variantes para criar uma experiência de aplicativo fiel e facilitar a compreensão dos projetos. Espero que tenha gostado! Fique ligado para mais vídeos sobre variantes. Até a próxima!

Quer sugerir um tema sobre o Figma? É só deixar nos comentários.
A ideia do canal é fortalecer a comunidade de criativos, seja: designer, UI/UX designer, Product designer, deisgner gráfico, publicitários, etc.

_____

Quem sou eu:
Flavio Cordeiro, designer entusiasta com mais de 9 anos de experiência profissional.
Já trabalhei em agências de publicidade, escritórios de design e departamentos de marketing. Fui líder de equipe de designers numa empresa global americana. Já trabalhei e fiz projetos para fora do país.
Tive a oportunidade de trabalhar em vários ramos do design. Photoshop é minha ferramenta favorita.
Atualmente estou migrando para o UI/UX design, mas também estudo sobre o mundo 3D. No final eu tento juntar tudo e criar uma solução.

Objetivo do canal:

Ao longo da minha jornada como designer, passei por várias fases e desafios criativos em diferentes ambientes: agências de publicidade, escritórios de design, departamento de marketing e startup.
Cada um desses ambientes criativos tem suas particularidades, prioridades e necessidades. Para isso, tive que estudar muitas ferramentas: Photoshop, Illustrator, After Effects, Abobe XD, Figma, Blender 3D, Zbrush, Substance Painter e muito mais.

Depois de vários “ cara, como você faz isso?” achei que eu poderia ser útil para iniciantes na área de design, publicidade, social media, design de interface e todos do mundo criativo. Aqueles que procuram tutoriais e dicas para melhorar o fluxo de trabalho, editar imagens de forma profissional, trazer edições com elementos em 3D, etc.

Esta experiência profissional me fez criar maneiras efetivas de resolver problemas criativos. A FLAMB design nasceu de tudo aquilo que aprendi.Essas que gostaria de compartilhar com você.

Espero que minhas soluções criativas sejam úteis para sua vida profissional, ou para ajudar na sua criatividade.

____


Смотрите видео Create a CHECKBOX [1 option] with Variables in @Figma (Variants, prototype, checklist, list). онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Flamb Design 18 Июль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 65 раз и оно понравилось 4 людям.