Aula 4.

INTERFACES
DE SISTEMAS
COMPUTACIONAIS
Prof. Dr. Alfredo BOENTE

alfredo.boente@uva.br
Semana 04
Introdução à ferramentas de XD
e UI Design
Introdução à Ferramentas
Conhecendo o Figma
Editor Gráfico de Vetor e Prototipagem
O Figma é um software de edição gráfica de vetor e prototipagem. Tem como base principal o
navegador web, possui ferramentas offline que podem ser instalados no desktop para
GNU/Linux, macOS e Windows.
Figma é muito utilizado na criação de interfaces gráficas que visam entender a forma com que
o usuário interage com as mídias digitais (websites, mobile apps, desktop systems etc.),
entrando em questões de UI/UX (user interface experience ou experiência da interface com o
usuário).
Figma permite a criação de protótipos, sejam desenvolvidos de modo colaborativo, com outros
usuários interagindo remotamente e simultâneo, ou de forma individual.
Conhecendo o Figma
Vantagens do Figma:
1. Gratuito e online: Por ser sem custo, ajuda a democratizar a criação, colaboração e
prototipagem de inúmeros projetos diariamente, sem a necessidade de instalar nada. A versão
paga apresenta outras funcionalidades, entretanto, mesmo com a versão free é possível fazer
muita coisa. Os designs são salvos na nuvem e podem ser compartilhados via link, para
edição em tempo real ou visualização.
Conhecendo o Figma
Vantagens do Figma:
2. Biblioteca de plugins: Embora não seja uma exclusividade do Figma, os plugins disponíveis
tornam qualquer projeto muito mais elaborado. Esses conectores que estão prontos para
serem utilizados, atribuem ao seu design outros layouts, organiza as informações ou
elementos ou importa dados em outros formatos. Utiliza-se o Figma, para a construção de
wireframes e protótipos.
Conhecendo o Figma
Vantagens do Figma:
3. Opção de autolayout: Um dos desafios de quem cria um novo design, é manter a coerência entre
tamanhos, proporções, escalas ou espaçamentos de cada ou entre elementos. Portanto, a função
autolayout faz esse ajuste para evitar as diferenças e desalinhamentos que são, muitas vezes, bem
perceptíveis, prejudicando assim o padrão estético.
4. Permite criar componentes: Componentes podem ser entendidos como um conjunto de

elementos. Quando um projeto tem muitos elementos, alterar um a um se torna ineficiente. No
entanto, com os componentes, qualquer mudança aplicada no componente master é replicada a
todo o conjunto. Isso se aplica, por exemplo, ao redimensionamento, alteração de fontes e
espaçamentos.
Conhecendo o Figma
Vantagens do Figma:
5. Disponibiliza diversas integrações: Os projetos criados podem ser integrados a outras

ferramentas como: Confluence, Slack, Axure sem muita burocracia. Os desenvolvedores
podem consultar a documentação específica sobre a API do Figma, para avaliar outras
opções. Aliás, isso confere ainda mais autonomia para as equipes envolvidas nos projetos.
6. Dá acesso a comunidade global: Os usuários passam a integrar uma rede mundial de

profissionais e entusiastas de design, a chamada Design Community. A comunidade, que
cresce organicamente ano a ano, é a chance de trocar experiências com outras pessoas,
obter novas ideias e fazer collabs.
Instalação e Acesso ao Figma
Para usar o Figma basta acessar: www.figma.com. Existe a opção de usar o aplicativo online
ou fazer o download gratuito, embora existam versões pagas.
Os iniciantes devem primeiro criar a sua conta na plataforma. Todo processo é concluído em 4
passos. O acesso é confirmado e liberado instantaneamente. Para criar a nova conta basta
entrar no site e clicar em “Sign Up”, escolher o método preferido de cadastro e preencher as
demais informações básicas.
Você deve nomear um time na sequência. A intenção é distinguir times, membros e projetos
para simplificar a gestão.
Os membros do seu time podem ser convidados via link ou e-mail.

Depois, indique o plano de sua preferência entre o plano “Starter” ou “Professional”. Você
também pode escolher o melhor plano posteriormente, inclusive após usar a ferramenta.
Indique o tipo de projeto que quer iniciar: novo design do Figma ou novo quadro branco do
FigJam. Vamos trabalhar com Design with Figma.
Um novo projeto pode ser criado do zero ou a partir de um dos modelos disponíveis. Alguns
templates são de autoria dos próprios membros da comunidade que é multidisciplinar.
Os novos usuários podem explorar também o “Figma tutorial”, que é um tour virtual pelas
principais configurações, que serve como uma jornada autoguiada de aprendizado.
Então, a partir de agora, vamos conhecer melhor o Figma para iniciarmos as nossas criações
de projetos com Figma.
Trabalhando com o Figma
Figma WebSite / Desktop System
Figma WebSite / Desktop System
https://www.figma.com/proto/zFyZS3HG3upxd9uY3X9A56/WebSite?node-id=9%3A127&starting-point-node-id=9%3A127
Figma Mobile App
Figma Mobile App
https://www.figma.com/proto/iOunjVIfqrVbWLjqw4Qkx3/Mobile-App?node-id=2%3A4&starting-point-node-id=2%3A4
Protótipo Figma Desktop System
Protótipo Figma Desktop System
https://www.figma.com/proto/krJZp5fFlBFvWCE7pAcOT2/Aloca%C3%A7%C3%A3o?scaling=scale-down&page-id=0%3A1&starting-point-node-id=12%3A4&node-id=12%3A4
Protótipo Figma WebSite
Protótipo Figma WebSite
https://www.figma.com/proto/qWNOLcD09DRcDnQ5wUxTmq/Biblioteca?node-id=2%3A2&starting-point-node-id=2%3A2
Protótipo Figma Mobile App
Protótipo Figma Mobile App
https://www.figma.com/proto/FR4wTJkJzHKn38QXjD2zkB/MobileGpTools?node-id=1%3A4&starting-point-node-id=1%3A4
Protótipos Figma
ATIVIDADE ASSISTIDA
Elabore no Figma, seu protótipo de interface como usuário, baseado em UX e UI, para
um WebSite ou WebSystem, responsivo, Mobile App, navegável.

Aula 4.

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 4.

Enviado por

Direitos autorais:

Formatos disponíveis

INTERFACES

Prof. Dr. Alfredo BOENTE

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

4. Permite criar componentes: Componentes podem ser entendidos como um conjunto de

Editor Gráfico de Vetor e Prototipagem

5. Disponibiliza diversas integrações: Os projetos criados podem ser integrados a outras

6. Dá acesso a comunidade global: Os usuários passam a integrar uma rede mundial de

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Os membros do seu time podem ser convidados via link ou e-mail.

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Editor Gráfico de Vetor e Prototipagem

Você também pode gostar