Parallax in Figma: Learn to Create a Professional Effect for Your Prototype.(interaction, prototype)

Опубликовано: 17 Август 2023
на канале: Flamb Design
328
29

English subtitle
_______USO E RECOMENDO: 🔥🔥🔥_______
🖱️ Mouse [ Ergonomia muito boa!] https://amzn.to/3nEz6ji
✍️ Mesa digitalizadora [Barata e boa!] Melhor preço: https://s.click.aliexpress.com/e/_99nxGj
OU https://amzn.to/2ZewfnS

👨‍🎨 GOSTARIA DE MELHORAR SUAS TÉCNICAS NO PHOTOSHOP?
CURSO Ilustração realista com foco no marketing do produto.
https://flambdesign.com/curso/

📚Sugestão de LIVROS PARA MEHLORAR SEU DESEMPENHO PROFISSIONAL📚:
📕 https://amzn.to/3HJwPLK Leitura fácil, boa narrativa e dá uma "chacoalhada" na sua procastinação mental. Um dos melhores livros que li.
📙https://amzn.to/3nESPzr Melhore a defesa de seus projetos e até sua apresentação pessoal/profissional.

FREE download 🤩🎁⬇️ (mockup e protótipos):
https://www.figma.com/@flambdesign

Apoie nosso canal 😊 👍
--------------------
⬇️ ⏱️ #figma #uiux #designer
00:00 Parallax PRO
00:17 Lógica do protótipo
01:15 Aplicando na prática
04:55 Evoluindo a interação (2 etapa)
08:09 Revelando informações(3 etapa)
_____________
Parallax de Alto Nível no Figma: Aprenda a Criar uma Interatividade Profissional

"Como Criar Efeito Paralaxe e Interação UI/UX | Tutorial com Flávio Cordeiro

E aí, pessoal! Neste tutorial, vou te mostrar como criar o incrível efeito paralaxe e interações UI/UX de forma descomplicada. Eu sou o Flávio Cordeiro e vamos usar elementos simples para construir uma experiência impressionante.

Para começar, criei uma home simulando um site de viagens com uma imagem de fundo. Dividi essa imagem em três partes: primeiro plano, montanhas e horizonte. Assim, podemos criar a ilusão de profundidade.

Vamos aos passos! Primeiro, pegue sua imagem e defina para preencher a tela. Agora, separe as três partes da imagem e ajuste seus tamanhos para criar o efeito de paralaxe. A parte mais próxima se moverá mais rápido, enquanto a do horizonte será mais lenta.

Agora, criaremos a interação de scroll. Para isso, simularemos como se o usuário estivesse descendo a página. Mova as imagens para cima, como se estivessem subindo, para dar a sensação de movimento.

Vamos adicionar um efeito para os elementos aparecerem gradualmente. Crie uma barra que represente o topo da página e faça-a descer conforme a página é rolada. Isso simulará o conteúdo aparecendo à medida que você rola a página.

Agora, vamos dar um toque final. Quando a página for rolada mais uma vez, faremos os elementos finais aparecerem. Você pode simular como se fosse uma página de informações. Adicione o mesmo efeito de movimento e paralaxe a esses elementos.

Agora é só testar! Com os elementos ajustados, veja como a interação está fluindo. Lembre-se de usar a interação de clique para facilitar o tutorial, mas você pode configurar para funcionar com o scroll.

Pronto! Agora você sabe como criar o efeito paralaxe e interações UI/UX de forma simples e cativante. Gostou das dicas? Deixa um like, comenta suas sugestões e compartilha para que outros também possam aproveitar esse conhecimento. Até a próxima, pessoal! 😉🎨🖱️"

Quer sugerir um tema sobre o Figma? É só deixar nos comentários.
A ideia do canal é fortalecer a comunidade de criativos, seja: designer, UI/UX designer, Product designer, deisgner gráfico, publicitários, etc.
_______
💻 https://www.FLAMBdesign.com
💼 Linkedin:   / cordeiroflavio  
📷 Instagram:  / flambdesign  
🕹Artstation: https://www.artstation.com/flambdesign
👨‍🎨Behance: https://www.behance.net/flaviocordeiro
_____

Quem sou eu:
Flavio Cordeiro, designer entusiasta com mais de 9 anos de experiência profissional.
Já trabalhei em agências de publicidade, escritórios de design e departamentos de marketing. Fui líder de equipe de designers numa empresa global americana. Já trabalhei e fiz projetos para fora do país.
Tive a oportunidade de trabalhar em vários ramos do design. Photoshop é minha ferramenta favorita.
Atualmente estou migrando para o UI/UX design, mas também estudo sobre o mundo 3D. No final eu tento juntar tudo e criar uma solução.


Espero que minhas soluções criativas sejam úteis para sua vida profissional, ou para ajudar na sua criatividade.

____


Смотрите видео Parallax in Figma: Learn to Create a Professional Effect for Your Prototype.(interaction, prototype) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Flamb Design 17 Август 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 32 раз и оно понравилось 2 людям.