← Voltar para todos os desafios

Dia 24: Mockups profissionais com plugins

Tire seus designs da tela plana! Aprenda a usar plugins do Figma para apresentar seu projeto em contextos realistas e impressionar.

Por que usar mockups?

Mockups transformam seus designs estáticos em imagens que contam uma história. Eles ajudam clientes e recrutadores a visualizarem seu trabalho como um produto real, em uso no mundo real, o que aumenta drasticamente a percepção de valor e profissionalismo. Apresentar seu layout dentro de um celular ou de um laptop é muito mais impactante do que mostrá-lo em um frame chapado.

Dois estilos de apresentação matadores

Existem duas abordagens principais para criar mockups no Figma, cada uma com um propósito diferente:

Mockups realistas (device mockups)

Este estilo coloca seu design em fotos de dispositivos reais (iPhones, MacBooks, etc.). É perfeito para mostrar o projeto em um contexto de uso familiar e criar uma conexão emocional. Para isso, os plugins que você sugeriu são perfeitos:

Mockuuups Studio (Excelente para cenas realistas com pessoas)
Mockup plugin (Ótima variedade de dispositivos)
Artboard Studio Mockups (Mockups de alta qualidade e editáveis)

Mockups isométricos

Uma representação 3D estilizada do seu design em um ângulo. É um estilo muito popular para criar composições visuais dinâmicas, mostrar múltiplos fluxos de tela de forma elegante e para um visual mais técnico, estilo "tech startup". Os plugins que você citou são ideais:

Isometric (Busque na comunidade Figma, existem várias opções com esse nome)
Skewdat (Permite inclinar seus designs para criar a perspectiva)

Comparação entre um mockup de celular realista e uma composição isométrica de telas

Seu desafio de hoje: o diretor de fotografia

Sua missão é se tornar o diretor de fotografia do seu próprio projeto, criando duas apresentações visuais impactantes com mockups. Estas imagens serão a base do seu case de portfólio!

Checklist do desafio:

Escolha a sua tela principal da Landing Page (versão desktop e mobile) que você finalizou na Semana 3.
Usando um dos plugins sugeridos (como o Mockuuups Studio), crie um mockup realista de alta qualidade, apresentando sua tela mobile em um celular e a desktop em um laptop.
Agora, pegue 3 telas importantes do seu projeto (ex: Home, Sobre, Artigo) e use um plugin como o Isometric ou Skewdat para criar uma composição isométrica elegante.
Salve essas duas imagens geradas. Elas serão os principais recursos visuais para o seu case que começaremos a montar nos próximos dias!