Como criar e adicionar maquetes aos seus designs Figma usando plugins

Se você é um designer que gosta de mostrar seus designs usando maquetes, pode ser fácil criá-los no Figma.

Em vez de salvar seus designs do Figma e passar para outro programa para criar uma maquete, você pode baixar facilmente os plug-ins de maquete no Figma. Existem muitas opções de plugins em vários estilos, mas todas são simples de usar e integrar em designs maiores.

Como encontrar e baixar plugins do Figma

Baixar e instalar um plugin no Figma é o mesmo se você estiver usando o aplicativo ou a versão do navegador. A partir de A página inicial do navegador do Figma, clique Comunidade > Plugins e Widgetse pesquise na lista ou use a barra de pesquisa.

A partir de aplicativo da Figma, a página inicial oferecerá a mesma opção que o navegador para acessar a página da comunidade. Mas se você estiver em uma página de design, clique no logotipo da Figma e, em seguida, Plug-ins. Se você já tem plugins instalados, você os verá listados aqui.

Para encontrar mais, escolha Procure Plugins na Comunidade.

Isso o levará à página da comunidade dentro do aplicativo, onde você pode procurar outros plugins.

Na página da comunidade, você encontrará uma pequena sinopse para cada plug-in, data da última atualização e com que frequência cada plug-in foi baixado. Para obter mais informações sobre cada plug-in, como comentários de usuários e guias de uso, clicar em seu nome o levará à página de informações desse plug-in.

Depois de encontrar um plug-in que você gostaria de baixar, clique no botão azul Instalar botão.

Se você não tem certeza do que procurar, aqui estão nossos cinco principais plugins de maquete favoritos. Existem muitos mais, mas é bom começar por algum lado.

• Maquetes de barro 3D
• Maquetes de ângulo
• MockRocket - Maquetes 3D
• Brincar
• Elementos 3D Vectary

Como usar plugins de maquete no Figma

O processo de instalação de plug-ins é o mesmo, independentemente do tipo de plug-in que você está usando, mas pode haver algumas diferenças em como eles são usados. É por isso que é sempre melhor ler a página da comunidade do plug-in individual para obter detalhes extras.

No Figma, você pode escolher tamanhos de quadros prontos para telas específicas, como o iPhone 13 ou um Android grande ou pequeno. Você deve criar seu design para o tamanho de dispositivo pretendido, em vez de tentar redimensionar os designs mais tarde para ajustar sua maquete, mas algumas maquetes permitirão tamanhos ligeiramente diferentes sem distorção.

Você pode até usar uma captura de tela do seu dispositivo, que será perfeitamente dimensionada para uma maquete do mesmo dispositivo.

Mockups são geralmente para designs de tela estática, embora você possa fazer uma maquete de vídeo no Photoshop. Vamos nos concentrar em maquetes Figma para dispositivos portáteis, mas você pode criar uma maquete do zero no Photoshop para outros dispositivos. Com o design da tela finalizado, você pode seguir para a criação do mockup do produto.

Vamos mostrar como usar três de nossos plugins sugeridos: Clay Mockups 3D, Angle Mockups e Vectory 3D Elements. Vamos pular direto.

Maquetes de barro 3D

Com seu design aberto, selecione o quadro e vá para Plug-ins e escolha Maquetes de barro 3D. Isso abre uma janela onde você pode escolher o dispositivo para a maquete. Seu design deve aparecer na tela da maquete nesta janela.

Você pode alterar o ângulo da maquete, bem como a cor nesta janela. Quando estiver satisfeito com a aparência, clique em Salvar como imagem.

Você pode voltar e alterar a cor ou outros aspectos a qualquer momento clicando Editar maquete debaixo Plugar no menu à direita. Agora você pode adicionar seu plugin a designs maiores, como apresentações ou seu portfólio.

Maquetes de ângulo

Para usar o Angle Mockups, você precisa criar uma conta Angle para baixar a biblioteca de mockups do site deles. Sobre Site do Ângulo, clique Entrar, que abrirá um pop-up onde você pode clicar Inscrever-se e adicione seus dados para fazer uma conta gratuita.

Uma vez conectado, para baixar as maquetes, clique em Maquetes > Baixar amostra. Para um conjunto mais abrangente de maquetes, você pode pagar pelo acesso premium, mas a amostra oferecida com a conta gratuita é boa o suficiente.

Após o download, descompacte o arquivo. Ele contém amostras que você pode usar no Figma, Sketch e Adobe XD, além de alguns papéis de parede gratuitos. Abrir ÂnguloFigma. Você encontrará dois vídeos para ajudar no uso das maquetes, bem como quatro conjuntos de arquivos Figma com várias maquetes.

Para importar os arquivos para sua conta Figma, acesse o navegador Figma e clique no seu perfil. Você pode acessá-lo no aplicativo acessando Arquivo > Abrir navegador de arquivos. Arraste e solte cada arquivo Angle no Figma. Em seguida, abra o arquivo Angle clicando duas vezes nele na página do navegador Figma.

Encontre o ângulo do dispositivo que você deseja usar para sua maquete e copie-o (Cmédico + C para Mac ou Ctrl + C para Windows). Cole (Cmd + V para Mac ou Ctr + V para Windows) na mesma prancheta do seu design principal.

Na paleta de camadas, expanda as camadas da tela de maquete até ver a camada com um ícone de imagem intitulado Coloque a prancheta aqui. Selecione essa camada. Então vá para Plugins > Mockups de ângulo e selecione seu design original na janela pop-up.

Isso deve aparecer na janela de visualização no ângulo do seu modelo, mas não mostrará o dispositivo do modelo. Clique Aplicar e sua tela agora deve estar na maquete do dispositivo no ângulo correto.

Elementos 3D Vectary

O Vectary 3D funciona de maneira semelhante ao Clay Mockups 3D, embora tenha menos opções para maquetes de dispositivos, pois também oferece uma variedade de ativos 3D. Abra seu design, selecione o quadro e vá para Plugins > Elementos 3D Vectary.

Encontre a maquete que você gostaria de usar na biblioteca pop-up e clique em Quadro de carga. Depois que seu design aparecer na tela do dispositivo, clique em Exportar imagem.

Agora você tem uma maquete 3D do seu design no dispositivo que escolher. Você pode adicioná-lo a outro design facilmente.

Uma vez que sua maquete estiver completa, você pode salvá-la como um arquivo PNG para usar facilmente em outro design. Clique Arquivo > Exportar. Selecione a imagem escolhida para exportar e clique em Exportar para o seu PNG final.

Adicione realismo aos seus designs com maquetes Figma

Existem inúmeros usos para criar maquetes para seus projetos. Com vários plugins do Figma, você pode encontrar uma grande variedade de estilos para trabalhar, que você pode adicionar às suas apresentações, portfólio ou criar apenas por diversão para mostrar seu trabalho de design.

Com algumas diferenças na aplicação, os plugins de maquete do Figma são fáceis de acessar e usar, então por que não tentar?

Como criar modelos mestres para apresentações no Figma

Leia a seguir