WEB DESIGN UI UX

Basics Web Experience, Interface & Prototype

AULA 2
Figma
O Figma é uma ferramenta de design de interfaces, que permite projetar e
prototipar de forma colaborativa, diretamente do navegador ou app desktop.

Crie sua conta em figma.com

PRINCIPAIS
ATALHOS
Essenciais
Atalho Windows Mac

Mostrar/ Ocultar UI Ctrl \ ⌘ \

Ações rápidas Ctrl P ⌘ P

Desfazer alterações Ctrl Z ⌘ Z

Refazer alterações Shift Ctrl Z Shift ⌘ Z

Copiar Ctrl C ⌘ C

Colar Ctrl V ⌘ V

Duplicar Ctrl D ⌘ D
Ferramentas
Atalho Windows Mac

Mover V V

Frame F F

Caneta P P

Lápis Shift P Shift P

Texto T T

Retângulo R R

Elipse O O
Ferramentas
Atalho Windows Mac

Linha L L

Seta Shift L Shift L

Comentário C C

Conta-gotas I I

Fatiar S S
Visualização
Atalho Windows Mac

Mostrar/ Ocultar cursores multiplayer Alt Ctrl \ Alt Ctrl \

Mostrar/ Ocultar réguas Shift R Shift R

Visualizar apenas linhas de contorno Ctrl Y ⌘ Y

Abrir o painel Layers Alt 1 Alt 1

Abrir o painel Assets Alt 2 Alt 2

Visualização
Atalho Windows Mac

Abrir o painel Design Alt 8 Alt 8

Abrir o painel Prototype Alt 9 Alt 9

Abrir o painel Inspect Alt 0 Alt 0

Zoom
Atalho Windows Mac

Movimento de Pan Espaço [Clicar/Arrastar] Espaço [Clicar/Arrastar]

Aproximar ampliação da tela + +

Afastar ampliação da tela - -

Ampliação para 100% Shift 0 Shift 0

Ampliar e ajustar na tela Shift 1 Shift 1

Ampliar na seleção Shift 2 Shift 2

Zoom
Atalho Windows Mac

Ampliar no Frame anterior Shift N Shift N

Ampliar no próximo Frame N N

Ir para página anterior Page Up Page Up

Ir para próxima página Page Down Page Down

Formas
Atalho Windows Mac

Balde de tinta B B

Bend tool Ctrl ⌘

Trocar as cores de preenchimento e traço Shift X Shift X

Converter traços em preenchimento Shift Ctrl O Shift Ctrl O

Achatar seleção Ctrl E ⌘E

Juntar seleção Ctrl J ⌘J

Seleção
Atalho Windows Mac

Selecionar tudo Ctrl A ⌘ A

Inverter a seleção Shift Ctrl A Shift ⌘ A

Desfazer a seleção Esc Esc

Agrupar elementos na seleção Ctrl G ⌘ G

Desagrupar elementos na seleção Shift Ctrl G Shift ⌘ G

Mostrar/ Esconder seleção Shift Ctrl H Shift ⌘ H

Travar/ Destravar seleção Shift Ctrl L Shift ⌘ L

Cursor
Atalho Windows Mac

Medidas da seleção Alt [Clique/Arrastar] Alt [Clique/Arrastar]

Duplicar seleção Alt [Clique/Arrastar/Soltar] Alt [Clique/Arrastar/Soltar]

Menu de seleção de layer Crtl [Clique Direito] ⌘ [Clique Direito]

Redimensionar a partir do centro Alt Alt

Redimensionar proporcionalmente Shift Shift

Editar
Atalho Windows Mac

Exportar Shift Ctrl E Shift ⌘ E

Copiar propiedades Alt Ctrl C Alt ⌘ C

Colar propiedades Alt Ctrl V Alt ⌘ V

Transformar
Atalho Windows Mac

Virar na horizontal Shift H Shift H

Virar na vertical Shift V Shift V

Editar forma ou imagem Enter Enter

Importar imagem Shift Ctrl K Shift ⌘ K

Cortar imagem Alt [Clique duplo] Alt [Clique duplo]

Arranjo
Atalho Windows Mac

Subir um layer acima Ctrl ] ⌘ ]

Descer um layer abaixo Ctrl [ ⌘ [

Trazer para frente Alt Ctrl ] Alt ⌘ ]

Enviar para baixo Alt Ctrl [ Alt ⌘ [

Arranjo
Atalho Windows Mac

Alinhar a esquerda Alt A Alt A

Alinhar a direita Alt D Alt D

Alinhar no topo Alt W Alt W

Alinhar na parte inferior Alt S Alt S

Alinhar no centro Alt V Alt H Alt V Alt H

THANK YOU!

Designed by Raul Reis

Gravação da aula
Aula 2 - Introdução ao Figma/ Briefing
https://www.youtube.com/watch?v=NWrnLxaQpGo