Prototipação no

Figma
Por que o Figma é uma ferramenta tão poderosa?
Uma passagem breve pela sua estrutura, e os
conceitos necessários para criar e entregar um
protótipo de alta qualidade.
Vamos começar?
Oi, eu sou o Nick!
Eu ajudo times a criar ferramentas e processos para entregas com mais

eficiência, agilidade, consistência e escala.

2015 - Designer (web e os termos UX e UI)

No turismo, construía apresentações e entregava também parte da

experiência digital nas viagens, com sites e apps para grupos de incentivo.

Nessa época conheci UX e atuei no redesign do ecommerce da empresa.

2016 - Designer (mais UX e um pouco de tudo)

Fui parar em um grande ecommerce e ajudava na estratégia e design do seu

departamento de moda. Remodelamos a forma de construir Landing Pages na

companhia naquela época.

2018 - Designer (UX, UI e um pouco de pesquisa)

Um ano bom para interfaces. Aprendi que o dribble é uma ilusão e interfaces

vão além de beleza.

2019 - Designer (UX, UI e Ops)

Consultoria e muitos aprendizados, muitos clientes, design, tecnologia,

desenvolvimento e estratégia.

2020 / Atualmente - Sigo Ops

Agora eu uso meus conhecimentos para otimizar o trabalho de outras pessoas,

trabalho na construção do design system e da operação escalável de design e

desenvolvimento na Vindi.
Próxima
Alguns acordos!
Temos pouco tempo, e muito a aprender, vamos manter as coisas ágeis e
engajadas com alguns acordos básicos.

Foque nos resultados que você quer.

Como qualquer outro produto digital, o figma vai se atualizar e mudar para atender
novas necessidades... Foque no que você precisa HOJE.

As interfaces é que serão julgadas

Se o resultado final é visual, ele precisa ser bem construído e apresentado, apesar
de qualquer intenção dos usuários, ela é quem vai receber interações e os famosos
“pitacos”. Portanto, seja consistente.

Fundamentos e acessibilidade sempre

Existe certo e errado para interfaces, a prova disso é que há coisas que são fáceis
de usar e outras não. UX sustenta a experiência e UI o comportamento na hora de
iterar; Prototipe para todos sempre.

Frontend é nosso maior aliado

Não adianta construir interfaces mirabolantes que são difíceis de construir e não
performam bem. Desenvolver protótipos com atenção ao seu desenvolvimento
economiza tempo e dinheiro. Se alie o quanto antes a pessoa que vai desenvolver.

O arquivo fica pra vocês!

Não se preocupe em ler cada palavra, ou ficar anotando o que está escrito, o
material fica disponível para cópia no final, vamos focar em curiar e questionar
sobre o que precisam aprender. Próxima
 Designs poderosos

“O figma permite trabalhar com svgs e vetores, capacitando níveis altíssimos de

personalização numa única ferramenta.”

Gestão de estilos

“Seja um style guide simples, ou um design system, a ferramenta possui um

Sobre o Figma controle absoluto sobre estilos básicos, e evolui constantemente para possibilitar

mais. Além disso, há plugins que oferecem uma variedade enorme de opções.”

O figma é uma ferramenta colaborativa de

design e prototipação, capacita colaborar em
Responsividade facilitada
tempo real, compartilhar, distribuição
“Com o auto layout fica mais fácil ser pixel perfect, você pode criar componentes e

através de bibliotecas e muitas outras telas que usam propriedades de margem e padding para se organizar.”

possibilidades.

Próxima Protótipos altamente navegáveis

“A prototipação no figma é simples e intuitiva, você conecta os pontos e determina

as interações para ver resultados similares ao desenvolvimento.”

Colaboração

“No figma todos podem colaborar independente de onde estiver. Convide pessoas

para editar, visualizar e consumir, tudo através de um único link.”

Ferramentas para
prototipação
Há muitos produtos no mercado que facilitam nossa vida em diferentes níveis na
hora de prototipar, entender as suas necessidades de design ajuda a escolhar a
melhor ferramenta para um processo mais fluído.

ferramentas populares

O bom e velho Figma;

Adobe XD;

InvisionApp;

Marvel;

Sketch;

Axure;

Balsamiq.

Link massa:

https://uxtools.co/tools/prototyping
Próxima
AComo Estrutura do figma
começar no figma? Sua interface é amigável e apresenta tudo o
Estrutura de organização do figma
que precisamos logo de cara. Vamos ir da criação de um projeto ao seu
handoff aqui.
Prototipar
A dashboard
Bem intuitiva, ela mostra os arquivos com as útlimas modificações realizadas ,
sempre em formato de grid ou lista. Apresenta uma barra de ferramentas no páginas
topo para funcionalidades de perfil.
Projetos Arquivos
Os projetos te ajudam a se organizar e agrupar seus arquivos de forma
coerente, essa ornigazação é pessoal, e deve levar em consideração o tipo de
trabalho que você vai realizar na ferramenta. Projetos
Times
Bem intuitiva, ela mostra os arquivos com as útlimas modificações realizadas ,
sempre em formato de grid ou lista. Apresenta uma barra de ferramentas no
Dashboard
topo para funcionalidades de perfil.

Próxima
Criando projetos
Design System

Cores Componentes
Main File Main File
Crie projetos para agrupar seus arquivos de acordo com seu objetivo, produto, Responsável

Nick
STATUS

In Progress
Responsável

Nick
STATUS

In Progress

biblioteca ou outro tema que faça sentido para você. ★ 6 files, updated 18 hours ago

Tipos de projetos Marketing

Guia Visual Posts

No mercado, é comum se deparar diferentes organizações para os projetos de Main File Main File
design no figma, é importante que você tenha em mente o crescimento em Responsável

Nick
STATUS

In Progress
Responsável

Nick
STATUS

In Progress

escala, e como torná-los fáceis de encontrar e entender. ★ 6 files, updated 18 hours ago

Populares
Site Labcodes

[Library Name] Arquitetura Landing Pges

Main File Main File
Estilos globais compartilhados entre os times. Responsável

Nick
STATUS

In Progress
Responsável

Nick
STATUS

In Progress

★ 6 files, updated 18 hours ago

‍[Team Name]
Grupo de arquivos que pertencem a um time. Processes
Entrevista c/
Refatoração
[Product Name] Usuário
Main File
Main File Responsável STATUS

Arquivos que pertecem ao mesmo produto. Responsável STATUS Nick In Progress

Nick In Progress

★ 6 files, updated 18 hours ago

Processos
Archive
Processos compartilhados entre as pessoas. Métodos de
Playground
Design
Main File
Balaio Responsável STATUS
Main File
Nick In Progress Responsável STATUS

Nick In Progress

Todo mundo gosta de encontrar o que não foi para frente. ★ 6 files, updated 18 hours ago

Próxima
Arquivos
Documentos internos dos projetos.
Tipos de arquivos Design System
Como o figma é uma ferramenta que capacita construir muito mais que
protótipos, é interessante criar arquivos separados para os diferentes Cores Tipografias Logos
artefatos que vão te ajudar a construir uma solução. Main File Main File Main File
populares
Responsável STATUS Responsável STATUS Responsável STATUS
Nick In Progress Nick In Progress Nick In Progress

[Library Name] Components (MAIN)

Edited 1 minute ago
Color & Type System (MAIN)
Edited 1 minute ago
Tag component (WIP)
Edited 1 minute ago
Centralização de um grupo de assets pertecentes a uma biblioteca, como cores,
tipografias, componentes e etc...

Bibliotecas precisam ser ativadas nos ar quivos para serem consumidas. Figma
[Produto / Jorn d aa ]
P roduto ou um fragmento que faz parte de um projeto específico. Site Landing Pages Componentes
Main File Main File Main File
[Pesquisa & Processos ]
Responsável
Nick
STATUS
In Progress
Responsável
Nick
STATUS
In Progress
Responsável
Nick
STATUS
In Progress

Consolidação de pesquisas e processos de um projeto específico. Site (MAIN)

Edited 1 minute ago
Scroll behavior (WIP)
Edited 1 minute ago
Events (WIP)
Edited 1 minute ago
[Balaios ]
A grupamento de itens despriorizados mas importantes.
[Pl ayground ]
É comum criarmos playgrounds para colaborar nos projetos. Próxima
 Layers Assets Cover

Páginas
Pages

Capa
Layers Assets Cover
V2 [Atual]
Organização interna dos arquivos, ajuda a separar as diferentes partes do
--- Versões Anteriores --- Pages
artefato. É comum utilizarmos páginas para organizar nosso workflow, ou etapas
do processo de trabalho. V1 Capa

Changelog --- Fundamentos --- Layers Assets Cover

Páginas comuns Tipografias

Pages
Cores
Capa --- Tipos ---
Capa

--- Fluxo ---

Mobile
Workflow Cover New order
Tablet
Shopping cart
Protótipo navegável Desktop
--- Navegáveis ---

Cover New order

Handoff
Shopping cart

Balaios
Sidebar behavior

Cover
Changelog
Páginas organizadas
Não existe um padrão de páginas e não é obrigatório que você crie páginas para trabalhar;
a complexidade do arquivo vai de encontro com a sua necessidade de organização. Use as páginas para separar

É comum utilizarmos páginas em branco para separar outras páginas. seus arquivos quando necessário.

Crie uma visão clara de como

Próxima
seu arquivo funciona.
Capas Select Layer

Todo arquivo cria automaticamente uma thumb para ser exibida na sua Bring Forward ⌘]
dashboard, é muito recomendável que você crie thumbs que orientem as Bring to Front ⌥⌘]

pessoas sobre o estado do arquivo, poupando o tempo para abrir e Send Backward ⌘[

descobrir. Send to Back ⌥⌘[

Group Selection ⌘G
Títulos Frame Selection ⌥ ⌘G
Flatten ⌘E
Os títulos geralmente possuem Data / Nome do Arquivo / Descrição curta /
Outline Stroke ⇧⌘O
Status Título Use as Mask ⌃⌘M
Uma descrição breve;
Set as Thumbnail
Descrição Maxímo de duas linhas.
Add Auto Layout ⇧A
A descrição na thumb pode orientar sobre o que aqueles artefatos vão
Create Component ⌥⌘ K
abordar. Responsável STATUS
Plugins
Nick In Progress
Responsável Show/Hide ⇧⌘H
Lock/Unlock ⇧ ⌘L
Indicado para times grandes, mostra quem cuida do arquivo.
Flip Horizontal ⇧H
Status
Defina capas
Flip Vertical ⇧V

Usado para indicar o momento atual do arquivo. Copy/Paste

Na primeira página, clique

Copy Properties ⌥⌘ C
Paste Properties ⌥⌘ V
com o botão direito, e defina a

Próxima
sua capa como “thumbnail”;
Entendendo as camadas
Na hora de organizar suas layers, tenha sempre em mente a hierarquia proposta

na página para que seja possível seguir uma linha lógica entre a listagem de

layers, e o que está sendo visto em página.

Hierarquia na página

A construção dessa hierarquia também nos ajuda a compreender como deve

funcionar uma navegação acessível, onde cada item está organizado de forma
Segura aí.
que o usuário possa navegar em cada componente seguindo uma linha lógica
na jornada proposta. Vamos fazer um
Agrupamentos exercício rápido
Existe uma regra presente no figma na hora de organizar grupos, que sempre já já para
posiciona camadas da frente para o fundo, isso nos ajuda a padronizar o
posicionamento de nossas camadas e até mesmo ter maior controle sobre cada entender melhor.
item na hora de aplicar navegação nas interfaces.

Auto layout

O autolayout organiza automaticamente seus conteúdos, sempre de CIMA

para BAIXO, ou seja, a segunda linha exibida em tela, sempre será a primera
linha do agrupamento do auto layout.
Painel de Personalização
Do lado direito do nosso canvas, fica o painel responsável por toda a
personalização que faremos no nosso protótipo. Atenção, o painel pode mudar
de acordo com o item selecionado.

Bora testar?
Principais grupos

Abas - Design, Prototype e Inspect;

Frame e Resizing; Vamos criar uma

Autolayout; interface, separei
Grid; alguns exemplos
Layer, Fill, Stroke; para nós;
Text; Atividade

Effects;

Export.

Não existe um padrão de páginas e não é obrigatório que você crie páginas para trabalhar;
a complexidade do arquivo vai de encontro com a sua necessidade de organização.
Prototipando suas criações
Após criar qualquer interface, você pode facilmente dar vida a ela pelo painel de
prototipação, que consiste em direcionar o usuário do ponto A para o ponto B,

Bora testar?
de acordo com as configurações determinadas.

Informações importantes

Você pode definir o tipo de interação que vai acionar a ação. Vamos animar algo
É possível definir como a animação vai acontecer. na interface que
As configurações podem exibir todas as interações em tela. criamos?
Todos os dias pessoas rompem os limites de prototipação no figma.

Aqui estão alguns feitos com a prototipação do Figma nos ultimos tempos:
Hora do Handoff
Depois de criar seus protótipos, é muito importante que você se comunique
propriamente com a parte responsável por desenvolver as telas, entenda as
necessidades de quem vai ler seu arquivo para criar um canal de comunicação
que funcione entre vocês.

Informações importantes

Organize o protótipo;
Bora

Nomeie layers e camadas de forma orientativa.

conferir?
Certifique-se de que a pessoa desenvolvedora conhece o figma e sabe
como manusear um protótipo em handoff. Hora de ler nossos
Use o Ctrl + Click para selecionar itens específicos para inspecionar; protótipos;
Se necessário, faça anotações ao longo do
protótipo para orientar sobre as suas decisões.

Há diversas operações de desenvolvimento no mercado, e cada uma pode funcionar de

uma maneira bem peculiar, é preciso entender a fundo as necessidades das pessoas para
entregar o trabalho corretamente.
Versionamento
O figma possui um versionamento nativo que possibilita
navegar entre as diferentes versões do seu arquivo, e
resgatá-las se necessário.

Informações importantes

O histórico de versão do figma é automático;

É recomendável versionar diferentes estágios dos protótipo;

Procure pelo padrão de versionamento utilizado na sua equipe para

definir como fazer;

Mudanças de fluxo ou de grande impacto geralmente possuem uma

motivação clara, use uma página de changelog para documentar
decisões.

Se necessário, faça anotações ao longo do

protótipo para orientar sobre as suas decisões.

Há diversas operações de desenvolvimento no mercado, e cada uma pode funcionar de

uma maneira bem peculiar, é preciso entender a fundo as necessidades das pessoas para
entregar o trabalho corretamente.

Próxima
Extras - Dicas
Muito para assimilar né? Vou deixar algumas dicas e conteúdos que vão

auxiliar na evolução dos seus protótipos.

Nem tudo precisa ser do zero

Há muito tempo designer pecam em ter uma comunidade que divide artefatos
além de seus conhecimentos, no figma isso se tornou possível de forma
organizada e simples. Use o Figma Community;

Plugins para mais agilidade Algumas

Assim como em outras ferramentas, o figma permite a adição de diferentes
plugins para potencializar a sua experiência de trabalho. Há plugins para
imagens, ícones, tipografias, gráficos, organização, acessibilidade e muitos dicas
outros;

Dribble é bonito, mas a experiência do usuário é mais Aprendizados da

importante.
minha jornada.
É natural sair buscando referências maravilhosas para validar nossas ideias e
nortear o resultado que buscamos alcançar, mas lembre-se que a experiência do
seu usuário depende de um contexto e fragmentos tirados de vários lugares
diferentes podem causar inconsistência;

Consulte documentações de design

Hoje em dia, há muita coisa bem definida no universo das interfaces, muitos sites
e design systems popularização práticas e soluções que fazem parte do dia a dia Próxima
dos nossos usuários, e também das pessoas desenvolvedoras.
Extras - Plugins
Como plugins são caras bem legais, vou separar uma lista dos que me

ajudam a ser mais produtivo e acertivo!

Contrast, Able

Valide a acessibilidade nas cores;

Chart Para
Crie tabelas de forma automática

Timer otimizar o
Transforme caixas de texto em timers.

Rename It

Nomeie qualquer conteúdo.

trabalho de
Lorem Ipsum

Crie textos de forma automática.

vocês!
Auto Flow

Desenhe fluxos de forma simples.

Unsplash

Busque fotos de forma ágil para seus protótipos.

Próxima
Extras - Leituras
Como plugins são caras bem legais, vou separar uma lista dos que me

ajudam a ser mais produtivo e acertivo!

Sistemas de Design para Interfaces

Muito conteúdo sobe design e interfaces.

Heurísticas de Nielsen
Isso é tudo
10 Regras essenciais na hora de projetar.

Recomendações de Livros NN Group (EN) pessoal!

Uma seção com várias recomendações sobre UI

Projetando para acessibilidade Um prazer

Um tema importantíssimo para projetar de forma inclusiva.
inenarrável
Tudo sobre e para Design (EN)
chegar aqui com
Uma fonte de inspirações para design.

vocês.

Design + Frontend

Um pouco sobre como podemos aprender com Frontend. Temos dúvidas?

Medindo a usabilidade de Interfaces

Interfaces podem ser medidas. Aprenda a mostrar dados.

Um handbook para componentes

Esse site lista diversos componentes e suas varições.