// GUIA VISUAL — v1.1.0 · Design → After Effects ao vivo · Illustrator · Photoshop · Figma
Um plugin que leva sua arte do Illustrator, Photoshop e Figma direto pro After Effects — como camadas editáveis, no clique de um botão. Sem exportar arquivo, sem gradiente perdido.
// LEIA DE CIMA PRA BAIXO — É UM FLUXO
// no After Effects abre em Window → Extensions → OverNotion
O que o OverNotion faz
Levar arte de design pro After Effects sempre foi chato: exportar .ai/.psd, importar, achatar, e ver gradientes e efeitos "sumirem" no caminho. Cada mudança recomeça o ciclo.
O OverNotion abre uma ponte ao vivo entre os apps de design e o AE. Você seleciona a arte, clica Push, e ela aparece no After Effects como camadas de verdade — shapes bézier, texto editável, gradientes nativos, efeitos — prontas pra animar. Nada de salvar arquivo. E o Illustrator recebe de volta (Pull).
// O PROBLEMA
Exportar e reimportar a cada ajuste, camadas achatadas em PNG, texto que vira contorno, e — o clássico — o gradiente que chega preto-e-branco ou simplesmente desaparece.
// A SOLUÇÃO
Um Push instantâneo, com gradientes nativos e exatos (fill e contorno), texto editável com estilo por trecho, efeitos mapeados pro AE, e opções globais de conversão.
Ferramenta independente. O OverNotion tem estética própria (terminal escuro / verde neon) e liga os apps de design ao After Effects sem precisar exportar arquivo.
O que mudou na versão 1.1.0
A atualização 1.1 aprofunda o fluxo do Photoshop para o After Effects: mais elementos chegam nativos, continuam editáveis e podem ser atualizados sem duplicar o trabalho.
// LAYER STYLES NATIVOS
Drop/Inner Shadow, Outer/Inner Glow, Color/Gradient Overlay, Stroke, Bevel & Emboss e Satin são recriados como Layer Styles do AE, com parâmetros editáveis e animáveis.
// GRADIENT OVERLAY EXATO
Stops de cor e transparência, midpoints, tipo, ângulo, escala, reversão e blend chegam no Gradient Overlay nativo por preset .ffx.
// GRUPOS → PRECOMPS
Grupos do Photoshop preservam a hierarquia em precomps, inclusive aninhadas. Estilos do grupo são aplicados no layer da precomp; casos sem réplica fiel viram PNG.
// RE-PUSH DE VERDADE
Camadas já enviadas são identificadas por uma tag interna e atualizadas. Animações e efeitos adicionados manualmente no AE são preservados.
Fluxo recomendado: deixe Estilos e filtros = Editáveis no AE, Grupos → precomps e Re-push atualiza ligados. Use Auto quando a prioridade for fidelidade visual absoluta.
Como as conexões funcionam
O painel do After Effects é o hub — abra-o primeiro. O Illustrator e o Photoshop têm painéis próprios; o Figma tem um plugin. Todos se conectam ao hub e mandam a arte pra lá, ao vivo.
// push é instantâneo — sem salvar arquivos, sem importar .ai / .psd
Regra de ouro: abra sempre o painel do After Effects primeiro — ele é o servidor. Os outros apps são clientes e conectam nele. O indicador de cada app acende em verde quando a ponte sobe.
O fluxo em 4 passos
Da arte parada à comp animável. O passo 3 é onde você trabalha; 1, 2 e 4 são abrir, conectar e clicar.
// Pull faz o caminho de volta: AE → Illustrator, com os vetores reconstruídos
Anatomia do painel do AE
É o centro de comando. Mostra as conexões, define como tudo é importado (opções globais) e traz as ferramentas de organização de camadas. O log embaixo registra tudo ao vivo.
PUSH SELECAO — objetos selecionados → comp ativa do AE.
ARTBOARD ATIVO → COMP — comp nova com o conteúdo do artboard.
TODOS OS ARTBOARDS → COMPS — uma comp por artboard.
PUSH SWATCHES — cria no AE um null "OverNotion Swatches" com um Color Control por cor (útil pra expressões e reuso).
Opções do painel
Raster mesh/freeform — malhas e gradientes freeform viram PNG.
Efeitos → PNG fiel — itens com efeito ao vivo chegam com a aparência exata (veja § EFEITOS).
Incluir guias · Texto em contornos · Incluir ocultos.
EXPORTAR ARTBOARDS PNG — salva cada artboard como PNG numa pasta escolhida, sem passar pelo After Effects.
O que é transferido: paths e compound paths (com buracos), grupos com hierarquia, fills sólidos, contornos completos (espessura, ponta, junção, tracejado), gradientes lineares/radiais com stops, midpoints e opacidade exatos e editáveis — no fill e no contorno — retângulos/elipses paramétricos, texto editável com estilo por trecho, swatches e guias. CMYK/Grayscale/Spot viram RGB automaticamente.
02 // PHOTOSHOP → AE
Na versão 1.1.0, envia o documento inteiro ou só as camadas selecionadas, preservando pilha, máscaras, grupos, Layer Styles, filtros inteligentes e camadas de ajuste — com atualização por Re-push.
PUSH DOCUMENTO — documento inteiro → comp nova, preservando a pilha de camadas.
PUSH CAMADAS SELECIONADAS — só as camadas marcadas.
Opções
Destino — escolha entre uma comp nova ou a comp ativa.
Estilos e filtros — Editáveis no AE (padrão), Auto (nativo só quando for 100% fiel) ou Rasterizados no PNG.
Texto editável — camadas de texto viram texto editável no AE (senão, PNG).
Achatar clipping — clipping masks achatadas num único PNG.
Camadas de ajuste — viram adjustment layers do AE com o efeito equivalente.
Grupos → precomps — mantém a hierarquia e permite aplicar estilos do grupo na camada da precomp.
Incluir ocultas — inclui layers invisíveis no envio.
Re-push atualiza — reutiliza a comp e atualiza as camadas identificadas, sem duplicar o conteúdo.
Layer Styles nativos: Drop/Inner Shadow, Outer/Inner Glow, Color/Gradient Overlay, Stroke, Bevel & Emboss e Satin são recriados no AE com blend, cor, opacidade, ângulo/luz global, distância, spread, tamanho e noise editáveis. O Gradient Overlay preserva os stops exatos de cor e transparência. Gaussian Blur, Motion Blur e Unsharp Mask viram efeitos nativos.
Como o Re-push protege seu trabalho: posição, escala e opacidade só são atualizadas quando não têm keyframes; a fonte do PNG/texto e os estilos vindos do Photoshop são renovados. Efeitos do plugin usam o prefixo ON · e são reaplicados; efeitos que você adicionou manualmente permanecem. Em Push documento, layers removidos no Photoshop também saem da comp; em Push seleção, nada é apagado.
Ajustes mapeados: Levels, Curves, Hue/Sat, Brilho/Contraste, Exposure, Photo Filter, Invert, Posterize, Threshold, Vibrance, Color Balance, B&W e Gradient Map viram adjustment layers do AE. Máscaras são aplicadas no alpha do PNG.
Limites de fidelidade: Pattern Overlay fica incorporado no PNG base enquanto os demais estilos continuam nativos. Texturas de Bevel, contours personalizados e o offset arrastado manualmente do Gradient Overlay não têm escrita equivalente no AE. Em Auto, qualquer aproximação faz a camada cair para PNG fiel.
03 // FIGMA → AE
Plugin de desenvolvimento (Plugins → Development → OverNotion). Frames viram comps; vetores viram shapes bézier; sombra e blur viram efeitos nativos do AE.
// OverNotionnonotion.comFIGMA
// PUSH_PARA_AE
// PUSH FRAME(S)
[ PUSH SELECAO → COMP ATIVA ]
// OPCOES
Densidade@2x
▣ Texto editável▣ Raster grupos▣ Comp. → precomps
PUSH FRAME(S) — cada frame selecionado vira uma comp (nome e tamanho do frame). Selecionou algo dentro de um frame? Ele sobe o frame inteiro.
PUSH SELECAO → COMP ATIVA — envia só a seleção pra comp aberta.
Opções
Densidade do design — desenha em @2x/@3x? Ajuste pra comp sair em 1x correto.
Texto editável · Raster grupos complexos · Componentes → precomps.
O que é transferido: vetores (VECTOR, booleanos, estrela, polígono, linha) como shape layers bézier, retângulos/elipses paramétricos (com corner radius), gradientes lineares/radiais com stops exatos e editáveis, texto editável com estilo por trecho, componentes/instâncias como precomps. Drop shadow e layer blur viram efeitos nativos (Drop Shadow / Gaussian Blur, editáveis).
Rede corporativa: funciona no Figma desktop e web. Se sua rede bloquear a conexão local no navegador, use o app desktop do Figma.
Gradientes — o pulo do gato
Este é o ponto onde a maioria das ferramentas falha: o gradiente "some" ou chega preto-e-branco no After Effects. No OverNotion ele chega nativo, idêntico ao original e editável.
// linear e radial · no preenchimento e no contorno · 100% editável e animável no AE
O resultado
O gradiente chega ao AE como gradiente nativo — idêntico ao original e 100% editável dentro do After Effects, no preenchimento e no contorno. Não é um bitmap achatado.
// NATIVO EXATO (auto)
Padrão e recomendado. Stops exatos no preenchimento e no contorno, linear e radial, com opacidade por stop e midpoints — tudo editável no AE.
// PIXEL-PERFEITO (PNG 2x)
Rasteriza o gradiente em PNG com nitidez 2x (fill e contorno no mesmo PNG; sólidos continuam vetoriais). Use se preferir a aparência congelada em bitmap.
Sem equivalente nativo: gradientes angular/diamond do Figma e mesh/freeform do Illustrator não existem no AE e continuam chegando como PNG fiel — nada se perde, mas não ficam editáveis como gradiente.
Efeitos
Sempre que existe um equivalente nativo no AE, o efeito vira efeito editável. Quando não existe — ou não é legível via scripting — vira PNG com a aparência exata.
Origem
Efeito
No After Effects
Figma
Drop shadow
→ Drop Shadow nativo (editável)
Figma
Layer blur
→ Gaussian Blur nativo (editável)
Figma
Inner shadow · background blur
→ PNG fiel (sem equivalente direto)
Photoshop
Camadas de ajuste
→ adjustment layer equivalente
Photoshop
Sombras, glows, overlays, stroke, bevel, satin
→ Layer Styles nativos (editáveis/animáveis)
Photoshop
Gaussian/Motion Blur · Unsharp Mask
→ efeitos nativos equivalentes
Photoshop
Pattern Overlay
→ incorporado no PNG base; os outros Layer Styles continuam nativos
Photoshop
Filtros sem equivalente
→ PNG fiel ou aviso, conforme o modo de fidelidade
Illustrator
Efeitos ao vivo (sombra, blur, distorção)
→ PNG fiel da aparência
Efeitos do Illustrator: efeitos ao vivo (sombra, blur, distorção) chegam como PNG fiel da aparência exata. Mantenha a opção Efeitos → PNG fiel ligada.
Ferramentas no painel do AE
Quatro utilitários pra organizar as camadas depois do push.
Ferramenta
O que faz
Precompor
Precompõe as camadas selecionadas numa nova comp.
Descompor
O inverso: traz as camadas de um precomp de volta, preservando o transform.
Centralizar âncoras
Centraliza a âncora das camadas selecionadas sem mover o conteúdo.
Testar export
Valida a exportação da seleção.
Pull — AE de volta ao Illustrator
O caminho inverso. No painel do Illustrator, PULL DA SELECAO DO AE pega os shape/text layers selecionados no After Effects e os recria como vetores no Illustrator.
Limite conhecido: no Pull, a geometria do gradiente (tipo, início e fim) vem correta, mas as cores dos stops precisam de ajuste manual no Illustrator.
Limites conhecidos da versão 1.1.0
O plugin preserva a aparência sempre que possível, mas alguns recursos dos apps de origem não têm leitura ou equivalente direto no After Effects.
// LAYER STYLES
O AE aceita uma instância por tipo de Layer Style. Instâncias extras ficam registradas em marker. Gradientes em Glow/Stroke podem virar cor sólida; texturas de Bevel e contours customizados não são transferidos.
// RE-PUSH
Layers novos entram no topo da comp e a ordem dos layers já existentes não é reorganizada. Alterações de transform com keyframes são preservadas e, por isso, não recebem o novo valor do Photoshop.
// AJUSTES DO PHOTOSHOP
O tipo do adjustment layer sempre é mapeado. Valores completos são transferidos para Brilho/Contraste e Hue/Saturation; os demais efeitos podem exigir ajuste fino manual.
// TEXTO E PULL
Estilo por caractere requer AE 24.3+. No Pull, a geometria do gradiente volta ao Illustrator, mas as cores usam stops padrão e podem precisar de ajuste.
Dicas e solução de problemas
// INDICADOR NÃO FICA VERDE
O painel do AE não está aberto, ou a porta está diferente entre apps. Abra o AE primeiro; confira a Porta nos dois lados.
// "HUB NÃO CONECTADO"
Mesma causa: o hub (painel do AE) precisa estar aberto e na mesma porta que o cliente.
// FONTE TROCADA NO AE
A fonte usada no design precisa estar instalada na máquina onde roda o After Effects.
// NADA ACONTECE NO FIGMA
Confirme que importou pelo manifest.json deste projeto; em rede corporativa, use o app desktop.
// EXTENSÃO NÃO APARECE
Depois de instalar, reinicie o app Adobe — a extensão só carrega no próximo start.
// GRADIENTE AINDA "SUMIU"
Confirme que Gradientes = Nativo exato no painel do AE, e que a arte usa gradiente linear/radial (angular/diamond/mesh viram PNG).
// ESTILO DO PS VIROU PNG
Confira Estilos e filtros. No modo Auto, qualquer detalhe sem réplica exata rasteriza a camada; use Editáveis no AE para manter o máximo nativo.
// RE-PUSH DUPLICOU
Use o mesmo documento e mantenha Re-push atualiza ligado. Com destino Comp nova, a comp é reutilizada pelo nome; renomeá-la quebra essa correspondência.
Instalar & abrir
Versão 1.1.0. After Effects 2019+, Illustrator 2019+ e Photoshop 2019+; texto com estilo por caractere requer AE 24.3+. Instalação por usuário — sem administrador.
// INSTALAR
Duplo clique em INSTALAR.cmd — copia os plugins e ativa o modo de extensões. DESINSTALAR.cmd remove tudo. Reinicie os apps Adobe depois.
// ABRIR
Em cada app: Window → Extensions → OverNotion. No Figma: Plugins → Development → Import plugin from manifest… → figma/manifest.json. Abra o painel do AE primeiro.
Duplo clique em INSTALAR.cmd.
Reinicie After Effects, Illustrator e Photoshop.
Em cada app: Window → Extensions → OverNotion.
No Figma, importe pelo figma/manifest.json.
Dica: o caso mais comum de "não abriu" é esquecer de reiniciar o app depois de instalar.
nonotion