<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397092/Use%20Case/Screenshot_2025-06-20_at_1.24.47_PM_gjdrl1.png" caption="INFCON 2024 Key Visual & Banners do Inflearn - Lee Byung-ki" />

## INFCON 2024 Key Visual & Banners do Inflearn  
**Lee Byung-ki (Designer de Produto na Inflab)**

Todos os anos, a Inflab realiza a **INFCON**, uma conferência presencial que reúne profissionais de TI. Em 2024, fomos além do nosso público tradicional de desenvolvedores e incluímos designers, PMs e POs, cobrindo todo o ciclo de produto. Também expandimos significativamente o tamanho do evento, planejando receber mais de 2.000 participantes. Nesse contexto, assumi o desafio de criar o key visual do evento e definir a atmosfera da conferência. Nossos temas centrais: **expansão e difusão**.

Para dar vida a esses conceitos abstratos, exploramos metáforas visuais como “o universo infinito”, “buracos negros e de minhoca” e “energia em expansão acelerada”. Logo ficou claro que imagens estáticas não seriam suficientes — precisávamos de um design dinâmico e interativo. O fluxo de trabalho tradicional do After Effects com plugin para Lottie era muito lento e engessado para o ritmo de iteração que precisávamos, então escolhemos o **Phase** pela sua velocidade e flexibilidade para experimentar.

O Phase entregou tudo de forma impecável. Páginas de eventos geralmente têm picos de acesso, mas as animações exportadas em JSON rodaram perfeitamente, exibindo visuais bonitos sem travar. Além disso, os gráficos vetoriais escalaram sem perda de qualidade para os telões de LED gigantes do local.

Na verdade, essa não foi a minha primeira experiência usando o Phase — eu já tinha participado do **Phase Challenge** (link) quando ele foi lançado na Coreia, e isso me convenceu de que a ferramenta estava pronta para uso em produção. Desde então, tenho usado sempre que preciso expressar conceitos abstratos de forma eficaz e ágil nas landing pages do Inflearn.

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397497/Use%20Case/Screenshot_2025-06-20_at_1.31.32_PM_gs06ki.png" caption="App do Inflearn - Onboarding Plant Growing - Park Yuri" />

## App do Inflearn - Onboarding Plant Growing  
**Park Yuri (Designer de Produto na Inflab)**

Implementamos o sistema de **Plant Growing** no app do Inflearn como uma forma de incentivar, de forma natural, o hábito de estudo diário e aumentar a retenção. Os usuários cuidam de suas plantas através das atividades de aprendizado e, no final, colhem frutos como recompensa. Para um recurso tão novo, precisávamos de animações de onboarding que ajudassem o usuário a entender o conceito de forma intuitiva e gerassem entusiasmo para participar.

O objetivo principal era aumentar a instalação do widget, mas Android e iOS gerenciam isso de forma diferente, exigindo fluxos específicos para cada plataforma. Em vez de sobrecarregar o usuário com textos longos, usamos o **Phase** para comunicar tudo de forma clara em apenas 7-8 segundos. O formato .json, super leve, garantiu um carregamento rápido, e as animações rodaram perfeitamente na produção.

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397689/Use%20Case/Screenshot_2025-06-20_at_1.34.42_PM_msnnt7.png" caption="Rallit - Onboarding do recurso My Log - Kim Bo-kyung" />

## Rallit - Onboarding do recurso My Log  
**Kim Bo-kyung (Designer de Produto na Inflab)**

O **Rallit** (link) é uma plataforma de recrutamento focada em carreira, que conecta o crescimento profissional com oportunidades de emprego. Os usuários obtêm insights personalizados sobre a carreira com base em sua experiência, habilidades e dados salariais, enquanto as empresas usam esses dados para encontrar e conectar talentos.

O recurso **My Log** permite que os usuários registrem sua trajetória profissional e visualizem isso por meio de gráficos de evolução salarial, ajudando-os a entender e gerenciar melhor o próprio desenvolvimento de carreira. Infelizmente, o recurso estava escondido na interface e, quem encontrava, era recebido de cara com um modal de login — nada motivador. Por isso, usamos o **Phase** para criar animações de onboarding que apresentassem o recurso da forma certa e incentivassem o usuário a usá-lo de fato.

## ✅ Por que escolhemos o Phase

#### O que nossa equipe mais gosta no Phase:

- **A animação funciona**  
  Para transmitir conceitos abstratos ou guiar o usuário por jornadas específicas, como um onboarding, a animação sempre supera texto e imagens estáticas. Uma sequência fluida conta a história completa.

- **Super intuitivo e poderoso**  
  O sistema de animação por keyframes é muito mais leve e intuitivo do que o After Effects. Qualquer designer que já prototipou no Figma consegue usar o Phase desde o primeiro dia e entregar trabalho pronto para produção. Duplicar arquivos para criar variações é simples — essencial quando é preciso ter versões para modo claro e escuro.

- **Exportação eficiente**  
  Os formatos .json (Lottie), .lottie e .dot viraram padrão para microinterações e animações na web — são extremamente leves. Para designers de produto digital que se preocupam com performance, os arquivos Lottie são a escolha certa.

- **Amigável para usuários coreanos**  
  A equipe do Phase Korea oferece suporte rápido e materiais de aprendizado em coreano, tornando a adoção fácil. Apesar de ser uma ferramenta global, a comunidade coreana criou um ambiente onde os usuários locais se sentem totalmente à vontade.


inflearn_logo.svg

Como a Inflearn usa o Phase para turbinar seu fluxo de trabalho de design e animação

Ao contrário de ferramentas de animação complexas. Phase é altamente intuitivo para um designer UI/UX. É muito fácil começar as criações.

Bowlon Wang

medium_IMG_6650 (1).jpg

small_IMG_6650 (1).jpg

thumbnail_IMG_6650 (1).jpg

IMG_6650 (1).jpg

Animador @ PoMotion

A animação em UX pode ser difícil. Criar animações do zero é demorado e muitas ferramentas são muito complicadas. Mas o Phase é empolgante, com uma interface amigável e um fluxo de trabalho fácil.

Alex KW Chen

thumbnail_Alex Chen Profile Pic.jpeg

Alex Chen Profile Pic.jpeg

Designer UIUX na TSMC

O Phase capacita os designers de interface a criar animações vibrantes com rapidez e facilidade, melhorando o apelo visual geral de seus designs!

Veja quem está usando o Phase

Casos de Estudo

Como a Inflearn usa o Phase para turbinar seu fluxo de trabalho de design e animação

Veja o que os outros estão dizendo

Bowlon Wang

Começar a Prototipar

Produto

Prototipagem

Animação

Colaboração

Exportação de código

Plugin do Figma

Aprender

Tutorial

Estudo de Caso

Recursos

Sobre

Carreiras

Comunidade

Notas de lançamento

FAQ

Legal

Política de privacidade

Termos de serviço