Faça você mesmo: To-Do List no Figma
Vou te ensinar hoje a fazer o design de um pequeno protótipo de uma To-Do List usando o Figma.
Texto escrito por Stéfany Coura Coimbra
Em um mundo movido pela produtividade, organizar suas tarefas diárias é essencial. Neste tutorial, vamos aprender como criar uma To-Do List interativa usando o Figma, uma poderosa ferramenta de design.
Passo 1: Criando um Novo Projeto no Figma
1.1 — Acesse o Figma em figma.com.
1.2 — Crie uma conta gratuita ou faça login se já tiver uma.
1.3 — Clique em +Design File para começar um novo arquivo.
Passo 2: Design Básico da To-Do List
2.1 — Se quiser testar seu protótipo depois em uma tela de um dispositivo com tamanho pré-definido, o Figma possui alguns. Para isso, você pode criar um Frame (tela), ir em “Prototype” e escolher um dispositivo. Nesse tutorial estou considerando um IPhone 13 mini. Depois que escolher, clique no nome do Frame (por exemplo Frame 14 como abaixo) e mude o tamanho de acordo com as especificações que viu ao escolher o dispositivo.
2.2 — Você pode criar as telas da sua To-Do List do zero ou usar templates já prontos que pessoas disponibilizam de graça nas comunidades do Figma.
Por exemplo, a tela do começo do app eu criei pelo Canva e depois só baixei a imagem e coloquei no meu projeto do Figma. Para colocar uma imagem no seu projeto:
2.3 — Para criar as caixas de seleção ao lado de cada tarefa, você pode criar um componente com as variações (por exemplo, selecionado ou não) e usar ele na sua tela de forma a ficar interativa ao testar:
Crie um retângulo:
Faça ele virar um componente:
Depois, ainda com ele selecionado, clique no ícone como abaixo para criar variações dentro de um mesmo componente:
Você então pode colorir o segundo retângulo com uma cor diferente e até acrescentar emojis ou textos se quiser dentro dele. Ficará algo assim:
Beleza! Agora, você vai clicar no retângulo cinza, ir na aba “Prototype” e setar uma interação. Quando o usuário clicar nele, ele mudará para a segunda variação. Faça isso também com a segunda para voltar à primeira.
Agora copie o retângulo para sua tela e teste para você ver! Para testar, clique no playzinho no canto superior direito da tela.
Passo 3: Adicionando interatividade
3.1 — Selecione a opção “Prototype” no canto superior direito do Figma.
3.2 — Crie interações clicáveis: conecte cada caixa de seleção à página inicial para simular a marcação de uma tarefa como concluída.
3.3 — Adicione animações para melhorar a experiência do usuário. Por exemplo, você pode usar botões no seu design e criar uma interação que, ao clicar, vai para a próxima tela da sua aplicação.
Passo 4: Cores e Estilos
4.1 — Escolha uma paleta de cores agradável para sua To-Do List.
4.2 — Experimente diferentes tipos de fontes para os textos. Para testar cores de fundo, contorno e para texto, clique no objeto e mude as cores na aba que aparecer:
Para textos, ao selecionar, também consegue mudar a fonte e tamanho da letra.
Passo 5: Compartilhando e Testando sua To-Do List
5.1 — Clique em “Share” (Compartilhar) no canto superior direito e escolha a opção de compartilhamento público ou privado, dependendo de suas preferências.
5.2 — Se tiver criado um template que queira que qualquer pessoa tenha acesso, você pode também publicar.
5.2 — Teste sua To-Do List interativa clicando nas caixas de seleção e verificando se as interações estão funcionando conforme o esperado.
O resultado final deve ficar algo parecido com:
Parabéns! Você agora tem uma To-Do List interativa e visualmente atraente criada usando o Figma. Este tutorial proporcionou uma introdução básica à criação de interações e design de interfaces. Continue explorando o Figma para aprimorar suas habilidades e criar projetos ainda mais incríveis!
Se quiser copiar algum elemento ou partir de um template pronto, acesse: Add a little magic to your files (figma.com). Lá pode procurar por projetos específicos e usar algum componente que outra pessoa já fez incorporando ele em seu design.
Caso queira ter acesso ao que eu fiz para esse tutorial, aqui vai o link: Simple To-do List — Figma.
Espero que este tutorial tenha sido útil para você começar a criar seus próprios protótipos no Figma! E deixe nos comentários se tem alguma outra funcionalidade que queira aprender!
Stéfany é Editora do Blog BiT. Para saber mais sobre ela, acesse:
LinkedIn: https://www.linkedin.com/in/stefany-coimbra/
Instagram: @ster.coimbra
GitHub: https://github.com/stefanycoimbra
Linktree: https://linktr.ee/stefanycoimbra
Stéfany é apaixonada por tecnologia e também redatora do Blog BiT! É uma dev mineira, adora pão de queijo, pizza e de participar de Hackathons.
Estudante de Engenharia de Computação na Unifei — Universidade Federal de Itajubá, tem muito interesse em tópicos de Inteligência Artificial e Segurança da Informação. Já foi integrante da Equipe Uai!rrior de Robótica por quase 3 anos, maratonista de programação e, no ano de 2023, foi parar do outro lado do mundo na Coreia do Sul, fruto de um intercâmbio na KNU — Kyungpook National University, Daegu.
