Fase 04

Projetos Gráficos
para Mídias Digitais

Desenvolvimento de Protótipo para Aplicativo
Responsável pelo Conteúdo:

Prof. Me. Ivan Ordonha Cechinel
Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
Desenvolvimento de
Protótipo para Aplicativo
• Interface e Principais Recursos da Ferramenta Figma;

• Inserção de Frames;
• Ferramentas de Texto e Formas Geométricas;
• Construção e Edição de Recursos;
• Atribuição de Navegabilidade.

OBJETIVOS

DE APRENDIZADO
• Propor ao aluno(a) vivenciar na prática a construção de um protótipo navegável de aplicativo;
• Aprender a construir as interfaces (telas) do aplicativo, com foco no layout, utilizando as fer-
ramentas do software Figma (ferramenta on-line e gratuita).
UNIDADE Desenvolvimento de Protótipo para Aplicativo
Interface e Principais Recursos

da Ferramenta Figma
Após a realização da etapa de coleta e análise de dados (UX Design), chegou a hora
de desenvolver o protótipo das interfaces do aplicativo (UI Design). A interface é o meio
pelo qual o usuário percebe o produto ou serviço, interagindo de diversas formas.
O protótipo da interface pode ser construído com algumas ferramentas específicas
utilizadas pelo UI Designer. Aqui, utilizaremos a ferramenta Figma (que até o momento
em que esse material foi desenvolvido, está disponível de maneira on-line e gratuita no
endereço: figma.com).
Importante!
A seguir, analisaremos os principais aspectos dessa ferramenta, uma das mais utilizadas
hoje no Mercado. O intuito é não descrever simplesmente as ferramentas, mas observá-
-las conceitualmente, lembrando-se de que, assim como todo software, no Figma,
adquire-se mais experiência e conhecimento da ferramenta com treino e esforço.
A imagem a seguir nos apresenta a tela inicial do site do Figma, na qual é possível
logar com conta do Google.
Figura 1
Fonte: Acervo do conteudista
Após logar, é possível abrir um novo projeto, ou um já existente como no caso a seguir:
Figura 2
8
A interface do Figma é constituída, principalmente, por um menu superior horizontal
que contém as ferramentas de construção.
Do lado direito, está a lista de frames (telas) e os elementos gráficos que as consti
tuem, e do lado esquerdo, temos o menu de propriedades, que varia opções de acordo
com o elemento gráfico que está selecionado na tela.
Para quem já tem familiaridade com softwares da família Adobe (como o Photoshop e o
Illustrator) ou qualquer outro software gráfico utilizado na Área de design, verá que existem
conceitos semelhantes, especialmente, em relação às ferramentas de desenho e opções de
ajuste no menu de propriedades.
A imagem a seguir nos mostra o menu superior. Podemos perceber, logo de início, que
o Figma é uma ferramenta on-line que traz proposta de praticidade e objetividade e, por
tanto, a curva de aprendizado com o Figma é menor do que a maioria dos outros softwares
gráficos. É intuitivo, possuindo apenas recursos essenciais, sem excesso de ferramentas.
Podemos dizer que sua interface faz jus à sua função, pois, se utilizamos o Figma
para desenvolver protótipo de interfaces intuitivas que gerem experiência positiva ao
usuário(a), não faria sentido o Figma ter uma interface complicada, pouco intuitiva.
Figura 3
Na primeira opção do menu, encontrase o menu de contexto, com as opções básicas

de gerenciamento do Projeto, como mostra a imagem a seguir:
Figura 4
9
9
No menu de contexto, podemos destacar a opção “Place image”, utilizada para

incluirmos imagens (em JPEG ou PNG) em nosso Projeto, recurso acessado, também,
pelo atalho de teclado Ctrl+Shift+K.
Outra opção que é importante destacarmos é a “Export frames to PDF”. Por meio
desse recurso, podemos gerar os frames (telas) em formato PDF e, assim, utilizar em ou
tro material, como, por exemplo, em um Manual de Identidade Visual, no qual é neces
sário demostrar a aplicação da marca da Empresa em seus produtos digitais.
Importante!
Apesar de haver a possibilidade de gerarmos PDF no Figma, na hora de enviarmos o
Projeto para o(a) cliente, por exemplo, o ideal é utilizar o compartilhamento de link do
protótipo, que veremos mais adiante, nesta mesma Unidade.
Figura 5
Figura 6
O segundo ícone do menu corresponde à ferramenta Move, que pode ser acionada
pelo atalho de teclado letra “V”.
Essa ferramenta é uma das mais utilizadas, pois é com ela que selecionamos elemen
tos gráficos (formas geométricas, botões, boxes e imagens, entre outros) e, inclusive,
selecionamos também os frames.
10
Figura 7
E, como sub ferramenta, a Scale, para redimensionar os elementos gráficos. Porém,

para redimensionar qualquer elemento, por exemplo, um retângulo ou uma imagem,
basta selecionar o elemento e surgirá uma linha azulada ao redor, com os pontos de
ancoragem (pequenos quadrados que surgem nos cantos de cada elemento) e, assim,
clicar e arrastar para redimensionar, ou numericamente, por meio do painel de proprie
dades, do lado direito.
Figura 8
Inserção de Frames
O terceiro ícone é sobre a inserção de frames, sendo que cada frame representa uma
tela do aplicativo.
Ao clicarmos na ferramenta frame, no painel lateral direito, surgem padrões de

tamanho de tela para diversos modelos de smartphones e, também, para site e posta
gens em diversas Redes Sociais, nos quais são préestabelecidas medidas de largura das
telas, ainda que a altura dependa do conteúdo que for inserido na tela.
Figura 9
11
11
Se clicarmos e arrastarmos, poderemos estabelecer um frame com dimensões diver

sas e, posteriormente, poderemos ajustar as dimensões pelo painel de propriedades, na
lateral direita.
Figura 10
No menu lateral esquerdo, temos a lista com todos os frames (telas) que foram criados
e seus respectivos elementos.
Nessa lista, temos uma visão global, podendo renomear e excluir, entre outras opções.
Figura 11
12
Ferramentas de Texto
e Formas Geométricas
Junto ao menu, há também a ferramenta de formas geométricas básicas e, como sub
ferramenta, também o “Place Image”, recurso para inserir imagens.
Esse conjunto de ferramentas conceitualmente se assemelha às ferramentas de

desenho dos softwares gráficos, como o Adobe Illustrator, o Corel Draw ou o inkscape.
Figura 12
Inclusive, temos, disponível também, no menu, a ferramenta “Pen”, que é um recurso

clássico em softwares gráficos e, assim como nos outros softwares, a ferramenta “Pen”
também oferece a possibilidade de desenho de curvas editáveis.
Já a sub ferramenta “Pencil” permite o desenho a mão livre.
Figura 13
A seguir, podemos observar o ícone da ferramenta de inserção de texto. Quando

acionamos esse recurso, basta clicar e arrastar sobre qualquer área do frame (tela) para
iniciar a digitação ou inserir conteúdo, copiando e colando via Ctrl C + Ctrl V.
Figura 14
13
13
Com a ferramenta Texto acionada, surgem opções no menu de propriedades, para

editar e configurar o texto, desde opções básicas, como escolha de cor e fonte do texto,
até espaçamento de entrelinha e entre letras:
Figura 15
A ferramenta Hand faz a movimentação da área de desenho. Esse recurso é acionado,

também, pela barra de espaço do teclado ou pela tecla “H”.
Figura 16
Pelo fato de o Figma disponibilizar algumas ferramentas conceitualmente semelhantes a

outros softwares gráficos, especialmente, os de desenho vetorial, surge a seguinte questão:
Por que é mais adequado utilizar uma ferramenta como o Figma para desenvolvermos pro-
tótipos? Por que simplesmente não utilizamos o Adobe Illustrator ou o Corel, por exemplo?
O Figma é mais adequado porque traz recursos específicos de interatividade entre

membros da Equipe (é possível mais de um designer trabalhar no projeto em tempo real).
14
Além disso, existem outras funcionalidades que favorecem o trabalho em Equipe, como,
por exemplo, a adição de comentários, acionada pela ferramenta demonstrada a seguir:
Figura 17
Basta acionar a ferramenta e clicar em qualquer parte da área de Projeto para adicio
nar um comentário para orientar e informar outra pessoa da Equipe:
Figura 18
Na barra superior, temos, também, o nome do Projeto, menu cascata do lado direito,
com opções essenciais que possibilitam, por exemplo, duplicar ou renomear o Projeto:
Figura 19
15
15
Construção e Edição de Recursos

No menu lateral direito, temos 3 abas: Design, Prototype e Inspect. Dentro da aba
Design, estão as propriedades e se alteram opções, dependendo do elemento que foi
clicado na Área de Projeto.
Figura 20
Por exemplo: a seguir, está selecionada a barra superior do menu e, do lado direito,
as propriedades de edição desse elemento:
Figura 21
16
Atribuição de Navegabilidade
Dentro da aba Prototype é o lugar para configurar a navegabilidade do protótipo.
Basta selecionar o botão e ligálo à página que o botão abrirá:
Figura 22
Ao selecionar o elemento (a que se pretende atribuir navegação), surgirá um círculo

azul. Basta clicar e arrastar para uma linha, como uma seta na extremidade, que literal
mente ligará o botão à tela correspondente:
Figura 23
17
17
Dentro da aba Inspect, o Figma fornece o código CSS, referente ao elemento sele
cionado para a utilização pelos desenvolvedores:
Figura 24
Um ponto importante é fixar elementos que não devem se mover junto com a rola
gem da página, por meio do menu lateral direito, na opção Fix Position When Scrolling.
Figura 25
Do lado direito da barra superior, há o ícone de acesso aos dados do perfil que está
logado no momento:
Figura 26
18
Ao clicar em Share, surge a tela a seguir, para gerar o link e inserir novos participantes
do Projeto, que poderão editar o trabalho em tempo real:
Figura 27
Ou poderá configurar para que outras pessoas apenas visualizem o Projeto, depen
dendo da opção que foi marcada, como mostra a imagem a seguir:
Figura 28
“Anyone with link”: com essa opção marcada, qualquer pessoa com o link poderá
visualizar ou editar o trabalho. Já com a opção “Only people invited this file”, apenas
pessoas que foram convidadas por e-mail poderão visualizar ou editar.
E o que determina a ação a ser desempenhada (visualizar ou editar) é a opção ao lado

direito: “can view”, que permite apenas visualização, ou mudar para “can edit”, para
permitir edição. A seguir, tela para visualização do protótipo, aqui demonstrado em
Desktop, mas pode ser visualizado, também, direto no Smartphone:
Figura 29
19
19
Nessa tela que, por padrão, abre em nova aba do navegador, há também o botão de
compartilhamento (“Share prototype”, em azul). Entretanto, por meio desse botão, serão
compartilhadas somente as interfaces do protótipo já navegável, e não a tela do Projeto.
Figura 30
Neste ambiente, temos, também, as opções para ajustar visualização do protótipo:
Figura 31
A seguir, temos as principais telas do prototipo de alta fidelidade do nosso apli-

cativo, com o conteúdo real (cores, imagens, texto).
A tela título do Aplicativo apresenta uma representação do portal, algo marcante na
Arquitetura do bairro da Liberdade.
Ao centro, um botão que indica ao usuário “avançar tela” e, por meio desse recurso,
o usuário navega até a tela do mapa.
Com esse elemento, o intuito é acionar a memória afetiva em relação ao bairro,
criando laços de identificação, não só para os usuários(as), que já o conhecem, mas para
todos que possuem algum repertório de informação em relação à cultura oriental.
O mapa constitui a parte “central” do aplicativo. É de onde o usuário parte e é para
onde volta para iniciar nova busca.
O menu superior (barra horizontal, em vermelho) é fixo no topo (ao fazer a rolagem
da tela, esse elemento permanece no mesmo lugar).
Na parte inferior da tela, há o “Faça parte é grátis”, que apresenta uma configuração
visual que atrai a atenção (preenchimento em vermelho, maiores dimensões em relação aos
demais botões), constituindo hierarquia da informação em relação aos demais elementos.
20
Em relação à arte, observase que há ícones ilustrados (desenho gestual com pintura
digital) sobre o mapa, fazendo alusão a algumas formas de gravura oriental. Essas ilus
trações estão associadas ao conteúdo, que será acessado pelo usuário(a).
Essas associações ampliam os significados, a fim de promover maior conexão e iden

tificação entre interface e usuário(a).
Figura 32
Figura 33
Figura 34
21
21
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
Sites
Design Material
Importante biblioteca de ícones gratuitos.
https://bit.ly/3c5kKmJ
Nina Talks | UX Design e Tech
Perfil no Instagram da UX Designer Nina: @nina_talks.
https://bit.ly/3c9I6HK
UI/UX/Webdesign Inspiration
Importante perfil no Instagram com referências de interface digital criadas por di
versos designers: @interfacely.
https://bit.ly/3qTlQpB
Leandro Rezende, UXMC NN/g
Perfil criado pelo UX Designer Rodrigo Rezende com muitas informações e dicas
sobre o universo UX e UI: @uxunicornio.
https://bit.ly/3a5KQDD
22
Referências
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e comu
nidades 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. Produção independente. 2018. (e-book)
23
23

Fase 04

Enviado por

Dados do documento

Título original

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

Fase 04

Enviado por

Direitos autorais:

Formatos disponíveis

Projetos Gráficos

para Mídias Digitais

Responsável pelo Conteúdo:

• Interface e Principais Recursos da Ferramenta Figma;

Interface e Principais Recursos

Na primeira opção do menu, encontra­se o menu de contexto, com as opções básicas

No menu de contexto, podemos destacar a opção “Place image”, utilizada para

E, como sub ferramenta, a Scale, para redimensionar os elementos gráficos. Porém,

Ao clicarmos na ferramenta frame, no painel lateral direito, surgem padrões de

Se clicarmos e arrastarmos, poderemos estabelecer um frame com dimensões diver­

Esse conjunto de ferramentas conceitualmente se assemelha às ferramentas de

Inclusive, temos, disponível também, no menu, a ferramenta “Pen”, que é um recurso

Já a sub ferramenta “Pencil” permite o desenho a mão livre.

A seguir, podemos observar o ícone da ferramenta de inserção de texto. Quando

Com a ferramenta Texto acionada, surgem opções no menu de propriedades, para

A ferramenta Hand faz a movimentação da área de desenho. Esse recurso é acionado,

Pelo fato de o Figma disponibilizar algumas ferramentas conceitualmente semelhantes a

O Figma é mais adequado porque traz recursos específicos de interatividade entre

Construção e Edição de Recursos

Ao selecionar o elemento (a que se pretende atribuir navegação), surgirá um círculo

E o que determina a ação a ser desempenhada (visualizar ou editar) é a opção ao lado

Neste ambiente, temos, também, as opções para ajustar visualização do protótipo:

A seguir, temos as principais telas do prototipo de alta fidelidade do nosso apli-

Essas associações ampliam os significados, a fim de promover maior conexão e iden­

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

Você também pode gostar

Na primeira opção do menu, encontrase o menu de contexto, com as opções básicas

Se clicarmos e arrastarmos, poderemos estabelecer um frame com dimensões diver

Essas associações ampliam os significados, a fim de promover maior conexão e iden