Practicando Figma: Handoff

Praticando Handoff - Apresentação

Boas-vindas, estudante! Meu nome é Maria Silveira, sou monitora e instrutora na Escola de UX & Design da Alura, e irei acompanhar você durante este curso prático de handoff no Figma.

Audiodescrição: Maria se descreve como uma mulher de pele parda, com cabelo cacheado de comprimento médio castanho-escuro, amarrado em um rabo de cavalo, sobrancelhas castanho-escuras, e olhos castanho-escuros. Ela veste uma camisa branca e está sentada em frente a um microfone preto, com uma parede clara ao fundo iluminada em gradiente lilás e uma estante triangular de madeira à esquerda da instrutora, contendo livros e enfeites variados.

O que vamos aprender?

Você já sentiu dificuldade em passar o design, a interface, o produto ou até a documentação para o time de desenvolvimento? Se sim, essa prática é para você!

Neste curso, abordaremos três práticas de como documentar o handoff para o time de desenvolvimento, ou seja, como transmitir tudo o que foi feito.

Organizando e documentando componentes

Na primeira prática, vamos organizar todos os componentes que temos, criando seções e documentando todos os design tokens criados anteriormente.

Por exemplo: podemos documentar design tokens de cores, tipografia, e até mesmo de espaçamento a serem utilizados em determinado projeto.

Além de criar seções no documento, é possível criar um novo documento em sua própria conta e utilizá-lo da maneira que julgar ideal, principalmente para a documentação do handoff.

Detalhando componentes com plugin

Na segunda prática, traremos informações mais específicas sobre determinada tela ou componente. Para isso, utilizaremos um plugin. Como exemplo, vamos trazer o menu de navegação.

Usaremos o plugin Specs para obter informações detalhadas sobre esse componente para o time. Essas informações incluem anatomia e algumas propriedades do componente.

Observação: faremos o mesmo para a tela da board de tarefas.

Após utilizar o plugin, teremos informações sobre anatomia, tamanho, largura, background do componente, espaçamentos utilizados, entre outras características.

Essas informações serão trazidas para a tela utilizando o plugin.

Importante! Caso ocorra algum problema, separamos um handoff kit para detalhamento e documentação. Há componentes separados no projeto em questão, como área, espaçamento e setas, para serem utilizados na documentação. Temos também um exemplo de como utilizar esses componentes para detalhar informações para o time.

Criando checklist e design system

A terceira prática é utilizar um checklist, onde marcamos o que foi feito ou não. Se necessário, podemos adicionar novas tarefas ao design system, caso algo não tenha sido abordado no checklist.

Conclusão

Esperamos que, a partir desses exercícios, você consiga documentar de forma mais eficaz a tela que será passada para o time de desenvolvimento. Nos encontramos em outros conteúdos na Alura!

Sobre o curso Practicando Figma: Handoff

O curso Practicando Figma: Handoff possui 5 minutos de vídeos, em um total de 7 atividades. Gostou? Conheça nossos outros cursos de UX 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:

• Praticando Handoff