Prototipagem para Aplicativo

Conteudista: Prof. Me. Ivan Ordonha Cechinel

Revisão Textual: Vinicius Oliviera

Objetivos da Unidade:

Acrescentar conhecimento em relação à ferramenta profissional

Figma (bastante utilizada no mercado de desenvolvimento de aplicativos);

Proporcionar vivência prática por meio de um leque de recursos para a

construção de um protótipo navegável de aplicativo com foco em parâmetros de
design;

Orientar a utilização de elementos gráficos (tipografia, imagens, ícones, cores,

entre outros) com mais eficácia.

ʪ Material Teórico

ʪ Material Complementar

ʪ Referências
1 /3

ʪ Material Teórico

Iniciando o Trabalho com a Ferramenta Figma

Para os designers uma das ferramentas mais utilizadas hoje no mercado é o Figma. Trata-se de
uma ferramenta on-line e, até o momento, gratuita. Com essa ferramenta é possível construir
interfaces digitais em forma de protótipo. Cabe lembrar que a etapa de desenvolvimento das
interfaces vem depois de uma trajetória de pesquisas e levantamentos que caracterizam o UX
design. O desenvolvimento de interfaces corresponde ao UI design.

Importante!
Nesta Unidade compreenderemos as principais características dessa
ferramenta. O Figma pode ser considerado um webware, uma vez que se
assemelha conceitualmente a um software, porém fica hospedado em
um site. As ferramentas do Figma não serão apenas descritas aqui, e sim
analisadas com base em seu conceito e função.
 Figura 1 – Ao acessarmos o site figma.com, apresenta-se a
tela inicial e basta logar para começar a usar a ferramenta
Fonte: Reprodução

Após efetuar o login (que pode ser feito com uma conta Google), podemos escolher entre iniciar
um projeto em branco ou abrir um já existente.
 Figura 2 – Tela de abertura de projeto já existente no Figma
Fonte: Reprodução

A imagem acima mostra um projeto já existente. Na tela principal, está a “área de trabalho”,
onde construímos as interfaces. Há um menu superior, que dispõe as ferramentas de
desenvolvimento. No menu à esquerda há uma lista com todos os itens adicionados na área de
trabalho. No lado direito fica o menu de propriedades, cujas opções variam dependendo do que
está selecionado na tela.

Saiba Mais
Podemos observar que o Figma traz conceitos semelhantes aos de
outros softwares gráficos consagrados e bastante utilizados, como os
da família Adobe, Corel, em especial os voltados para desenho vetorial,
como o Adobe Illustrator e o Corel Draw, ou o Inkscape, principalmente
em relação às ferramentas de desenho e opções de ajuste no menu de
propriedades.

Porém, o Figma possui uma gama de recursos específicos para a construção de interfaces, por
isso é mais enxuto na quantidade de ferramentas e mais intuitivo, requerendo um período
menor de aprendizado para sua utilização (em comparação com outros softwares gráficos.
Podemos observar que sua interface faz jus à sua função, pois, uma vez que utilizamos o Figma
para desenvolver protótipo de interfaces intuitivas que gerem experiência positiva ao(à)
usuário(a), não seria coerente o Figma ter uma interface complicada, pouco intuitiva.

Figura 3 – Barra de ferramentas do menu superior

Fonte: Reprodução

O “menu de contexto” está disponível na primeira opção da barra de ferramentas. (contém as

opções básicas de gerenciamento do projeto), como podemos observar na imagem abaixo:

Figura 4 – Menu de contexto

Fonte: Reprodução
A opção Place Image (inserida no menu de contexto) é usada para a inclusão de imagens em
formato JPEG ou PNG. Podemos acionar essa opção também por meio do teclado (Ctrl+Shift+K).
Vale destacar também o recurso Export Frames to PDF. Essa ferramenta permite gerar os
frames (telas) da área de trabalho em formato PDF e com isso há a possibilidade de utilizar as
imagens do projeto para outros fins; por exemplo, para montar um mockup e incluir no portfólio
de trabalhos.

Importante!
É importante ressaltar que, apesar de haver a possibilidade de gerar
PDF no Figma, para apresentarmos o projeto ao(à) cliente o ideal é
compartilhar o link do protótipo navegável (existe a possibilidade de
definir se quem acessar o link irá editar ou somente visualizar o
protótipo). Veremos adiante, nesta Unidade, detalhes sobre essa
funcionalidade.
 Figura 5 – Exportando o projeto
Fonte: Reprodução

Figura 6 – Ferramenta Move

Fonte: Reprodução

A ferramenta Move é uma das mais requisitadas, pois permite selecionar os elementos gráficos,
desde shapes (formas geométricas) até botões, boxes, imagens, entre outros, inclusive os frames
que contém a interface. Localiza-se na segunda posição do menu superior (como mostra a
imagem acima). É possível acioná-la também pela letra “V” do teclado.
 Figura 7 – Ferramenta Scale
Fonte: Reprodução

A ferramenta Move possui uma sub opção chamada Scale que permite redimensionar os
elementos gráficos. Contudo, é mais fácil redimensionar qualquer elemento selecionando-o e
após surgir uma linha azul ao redor do objeto (com os pontos de ancoragem – pequenos
quadrados que surgem aos cantos de cada elemento) basta clicar e arrastar para redimensionar.
Também há a possibilidade de escalonar o objeto numericamente por meio do painel de
propriedades ao lado direito.

Gerenciamento de Frames
Para inserir frames, acesse a ferramenta localizada na terceira posição do menu superior. Cada
frame é constituído de um retângulo em branco e representa uma tela do aplicativo. Com essa
ferramenta acionada, obtemos no painel lateral direito ajustes de dimensão do frame (há opções
já prontas de padrões de tamanho de tela de diversos modelos de smartphones e também para
site e postagens para as principais redes sociais).

Figura 8 – Ferramenta Frame

Fonte: Reprodução
Importante!
Podemos utilizar medidas padrão de telas de smartphones em relação à
largura, porém a altura depende da quantidade de conteúdo que será
inserido na tela.

Figura 9 – Lista dos principais padrões de tamanhos de

tela de smartphones localizado no menu de propriedades
(lado direito da tela)
Fonte: Reprodução

Há a possibilidade de criarmos um frame com tamanho personalizado (basta clicar na área de

trabalho e arrastar), sendo possível redimensioná-lo depois, manualmente ou com o auxílio do
painel de propriedades, na lateral direita.

Figura 10 – Criando um frame

Fonte: Reprodução

Quem já utilizou outros softwares gráficos, como o Adobe Photoshop ou o Adobe Illustrator, por
exemplo, deve ter reparado que eles possuem o painel Layers (camadas) para organização do
projeto, entre outras funcionalidades. No Figma há recurso semelhante ao painel Layers (no
menu lateral esquerdo). Nesse espaço, o Figma dispõe uma lista com todos os frames (telas) que
foram criados e seus respectivos elementos, dando uma visão geral do projeto com a
possibilidade de renomearmos ou excluirmos qualquer item, entre outras opções.
 Figura 11 – Menu lateral esquerdo com lista de todos os
frames (telas) criados no projeto
Fonte: Reprodução

Inserção e Ajustes de Tipografia e Shapes

Disponível no menu superior há também a ferramenta para construção de shapes (formas
geométricas básicas) e o Place Image (inserção de imagens) como subferramenta. Esse
agrupamento de recursos conceitualmente se assemelha às ferramentas de desenho dos
softwares gráficos como o Adobe Illustrator, o Corel Draw ou o Inkscape.
 Figura 12 – Shapes (formas geométricas)
Fonte: Reprodução

E assim como nos demais softwares gráficos, no Figma também contamos com a ferramenta
Pen, que nos possibilita fazer linhas curvas editáveis.

Podemos ter também a liberdade de fazer desenhos à mão livre com a subferramenta Pencil.

Figura 13 – Ferramenta Pen

Fonte: Reprodução

No menu superior está ainda a ferramenta de texto, um recurso também recorrente em outros
softwares gráficos e de edição de texto. Com esse recurso acionado, basta clicar e arrastar sobre
qualquer área do frame (na área de trabalho) para iniciar a digitação ou inserir conteúdo
copiando e colando via Ctrl C + Ctrl V.

Figura 14 – Inserindo texto

Fonte: Reprodução
Com a ferramenta de texto acionada, surgem opções no menu de propriedades para editar e
configurar o texto, desde a opções básicas, como escolha de cor e fonte do texto, até a
entrelinha e o espaçamento entre as letras.

Figura 15 – Propriedades de texto

Fonte: Reprodução

A ferramenta Hand faz a movimentação da área de desenho. O recurso pode ser acionado
também pela barra de espaço do teclado ou pressionando a tecla “H”.

Figura 16 – Ferramenta Hand

Fonte: Reprodução
Reflita
Pelo fato de o Figma disponibilizar algumas ferramentas
conceitualmente semelhantes às de outros softwares gráficos,
especialmente os de desenho vetorial, surgem as seguintes questões:
por que é mais adequado utilizar uma ferramenta como o Figma para
desenvolver protótipos? Por que não utilizar o Adobe Illustrator ou o
Corel, por exemplo? O Figma é mais adequado porque traz recursos
específicos de interatividade entre membros da equipe (mais de um
designer pode trabalhar no projeto em tempo real); além disso, contém
outras funcionalidades que favorecem o trabalho em equipe, por
exemplo a adição de comentários, acionada pela ferramenta mostrada
abaixo:

Figura 17 – Ferramenta Add/show comments

Fonte: Reprodução

Basta acionar a ferramenta e clicar em qualquer parte da área de projeto para adicionar um
comentário para orientar e informar outra pessoa da equipe.
 Figura 18 – Inserção de comentário
Fonte: Reprodução

O nome do projeto fica também na barra superior, ao centro, e junto ao nome está uma
“setinha” que abre o menu cascata com recursos importantes que permitem, por exemplo,
duplicar ou renomear o projeto.
 Figura 19 – Barra superior com menu cascata
Fonte: Reprodução

Atribuição de Conteúdo
No menu lateral direito temos 3 abas: Design, Prototype e Inspect. Dentro da aba Design estão as
propriedades e alteram-se as opções dependendo do elemento que foi clicado na área de projeto.

Figura 20 – Abas Design, Prototype e Inspect

Fonte: Reprodução
Por exemplo, abaixo está selecionada a barra superior do menu e ao lado direito estão as
propriedades de edição desse elemento.

Figura 21 – Aba Design

Fonte: Reprodução

Navegabilidade e Fluxo de Informação

Após desenhar as telas do aplicativo, é hora de atribuir navegabilidade ao protótipo na aba
Prototype. Para tanto, basta selecionar qualquer elemento na área de trabalho (botões, imagens,
ícones) e ligá-lo à tela de destino.
 Figura 22 – Linhas e setas em azul indicarão o fluxo de
navegação que está sendo estabelecido
Fonte: Reprodução

Ao selecionar qualquer elemento na área de trabalho (que se pretende atribuir navegação),

surgirá um círculo azul – basta clicar e arrastar. Surgirá uma linha com uma seta na
extremidade, a qual ligará o botão à tela correspondente.
 Figura 23 – Navegabilidade sendo estabelecida
Fonte: Reprodução

Dentro da aba Inspect, o Figma fornece o código CSS referente ao elemento selecionado para
utilização pelos desenvolvedores.

Figura 24 – Aba Inspect

Fonte: Reprodução

É importante lembrar que podemos fixar elementos (que não devem se mover junto com a
rolagem da página), marcando a opção Fix Position When Scrolling no menu lateral direito (painel
de propriedades). Primeiramente certifique-se de que está na aba Design.
 Figura 25 – Opção Fix Position When Scrolling na aba Design
Fonte: Reprodução

Ao lado direito da barra superior há o ícone de acesso aos dados do perfil que está logado no
momento.

Figura 26 – Ícone de acesso aos dados do perfil logado

Fonte: Acervo do Conteudista
 Figura 27 – Ao clicar em Share surge a tela para gerar o
link de compartilhamento e inserir novos participantes no
projeto (que poderão editar em tempo real o trabalho)
Fonte: Reprodução

Há a possibilidade de definir que outras pessoas apenas visualizem o projeto, dependendo da

opção marcada, como mostra a Figura a seguir.

Figura 28 – Definindo as pessoas que podem visualizar o

projeto
Fonte: Reprodução
Com a opção Anyone with link marcada qualquer pessoa com o link poderá visualizar ou editar o
trabalho. Já opção Only people invited this file determina que apenas pessoas que foram
convidadas através do e-mail poderão visualizar ou editar. E para determinar a ação a ser
desempenhada (visualizar ou editar) utilize a opção ao lado direito can view para permitir apenas
visualização ou mude para can edit para permitir edição.

Abaixo tela para visualização do protótipo. Aqui demonstrado em desktop. Também pode ser
visualizado direto no smartphone:

Figura 29 – Visualização de protótipo

Fonte: Reprodução

Estando dentro da área de trabalho é possível “rodar” o protótipo através do botão

Present disponível no canto superior direito (ao lado do botão Share), como mostra a imagem
abaixo:
 Figura 30 – Botão Present
Fonte: Reprodução

Ao visualizar o protótipo temos acesso também ao botão de compartilhamento (Share prototype

em azul no canto superior direito).

Figura 31 – Botão Share Prototype

Fonte: Reprodução

Através do botão Share Prototype podemos compartilhar somente o protótipo e não a área de
trabalho do projeto.
Nesse ambiente temos também as opções para ajustar a visualização do protótipo.

Figura 32 – Opções de ajuste de visualização

Fonte: Reprodução

A seguir temos as principais telas do protótipo de alta fidelidade do nosso aplicativo, com o
conteúdo real (cores, imagens, texto e demais elementos gráficos).
Figura 33 – Principais telas do protótipo
Fonte: Reprodução
2/3

ʪ Material Complementar

Indicações para saber mais sobre os assuntos abordados nesta Unidade:

Sites

Instagram – UI/UX/Webdesign Inspiration

Importante perfil no Instagram com referências de interface digital criadas por diversos
designers.

Clique no botão ao lado para conferir o conteúdo.

ACESSE

Figma
Site oficial da ferramenta Figma.

Clique no botão ao lado para conferir o conteúdo.

ACESSE
 Leitura

Prototipagem de Alta Fidelidade: O que é, quando, por que e

Como Usar?

Clique no botão ao lado para conferir o conteúdo.

ACESSE

Novos Fundamentos do Design Aplicados em Sites e

Aplicativos

Clique no botão ao lado para conferir o conteúdo.

ACESSE
3/3

ʪ Referências

FERREIRA, A. R. Comunicação e Aprendizagem: Mecanismos, Ferramentas e Comunidades

Digitais. São Paulo: Erica, 2014. (e-book)

LOWDERMILK, T. Design Centrado no Usuário. Novatec: São Paulo, 2019.

MOREIRA, B. R. Guia Prático do Design Thinking: Aprenda 50 Ferramentas para Criar Produtos e
Serviços Inovadores. [s. l.]: [s. n.], 2018. (e-book)