figma-storyboard-animation

Storyboard Figma → design de movimento de cena

Um storyboard é uma série de quadros estáticos 1920×1080. Seu trabalho é produzir uma cena cuja linha do tempo se move entre eles. A maior parte do movimento já está no design — recupere-o em vez de inventá-lo.

Não pode executar código? Onde esta receita diz "crie um script gerador", construa a cena através de picsart_scene_patch e fixe as mesmas invariantes com picsart_scene_query_layout após cada alteração (veja Comandos abaixo). O método é idêntico — apenas a superfície de execução difere.

O fluxo

1. Leia a árvore uma vez — se o usuário compartilhou o storyboard através do conector Figma, leia a árvore de quadros da página uma vez: ela retorna cada quadro, camada, nome e caixa. Tudo abaixo é derivado disso. Não percorra o quadro a quadro para explorar.
2. Planeje os beats — escreva a tabela de beats antes de criar (abaixo).
3. Extraia cada elemento como sua própria camada do design que o usuário compartilhou: construa geometria de forma editável a partir de suas medidas de origem e use picsart_scene_import_figma_paint para pintura CSS de preenchimento, sombra ou gradiente em uma camada existente. Mantenha o texto vivo. A conversão automática de nós de forma não está exposta aqui. Use uma imagem apenas para um tratamento não suportado ou uma fonte genuinamente não camada; veja extração.
4. Construa a cena a partir da geometria e fixe cada regra. Onde você puder executar código, crie um script gerador (não JSON escrito à mão) para que cada regra se torne um assert; onde não puder, construa através de picsart_scene_patch e fixe as mesmas invariantes com picsart_scene_query_layout. A geometria vem dos metadados, nunca da observação visual.
5. Verifique numericamente, depois exporte.

As etapas 3–5 são executadas uma vez por cena, em ordem — esse loop é o método.

Um quadro estático

Quando a solicitação é um único quadro (uma imagem estática, uma imagem de loja, um cartão), não há storyboard. Pule os beats e construa esse quadro como uma cena estática:

1. Leia o quadro selecionado através do conector Figma compartilhado pelo usuário. Seu tamanho é composition.width e height, seu preenchimento é composition.background, e uma duration curta (1) é suficiente.
2. Uma camada por filho, em ordem de pintura (o primeiro filho da árvore na parte inferior). A position de uma camada é o CENTRO de sua caixa no quadro, [x + width/2, y + height/2]: uma camada gira e escala em torno de seu centro. Verifique um filho aninhado em relação ao quadro: alguns grupos armazenam filhos relativos ao grupo (references/figma-extraction.md).
3. Cada filho no meio que o mantém editável: crie geometria de forma, depois aplique sua pintura CSS através de picsart_scene_import_figma_paint, texto como texto vivo, e cada preenchimento IMAGE como uma camada de mídia em seu bitmap original — nunca a export do nó, que achata a transparência sobre o fundo do quadro — pelo seu scaleMode (FILL→cover, FIT→contain, CROP→cover + crop, TILE→não expressável; a tabela e a matemática de corte estão em references/figma-extraction.md, "Image fills"). Faça upload de cada imagem primeiro; uma URL de ativo do Figma expira.
4. Um grupo local que corta ou desbota como um só é geralmente uma camada composition inline. Use uma referência de cena quando for intencionalmente um componente reutilizável e de propriedade separada.
5. Verifique com números, depois uma imagem completa. picsart_scene_query_layout em 0: cada box dentro de um pixel de sua caixa Figma. Uma imagem de nível superior sem crop carrega drawn: sua caixa e sourceCrop como o design as mostra. Uma imagem dentro de um grupo lê clippedBox, a parte que seu grupo deixa visível. Em seguida, um picsart_scene_contact_sheet com times explícitos e resolution igual às dimensões da composição: uma miniatura perde linhas de 2 px e texto pequeno.

Camadas, não telas

A cena é uma composição de camadas móveis, nunca uma montagem de telas planas. Um design vem como camadas; mantenha-as separáveis para que cada uma possa se mover por conta própria — essa é a razão inteira de construir uma cena em vez de fazer crossfade de capturas de tela.

• Reconstrua, não rasterize. Construa geometria shape editável a partir do design compartilhado pelo usuário. Aplique pintura CSS a essa camada existente com picsart_scene_import_figma_paint. A importação completa de nós de design Figma não é suportada aqui. Mantenha cantos, caminhos e posicionamento editáveis e o texto vivo. Achatar isso em PNG ou SVG impede a animação independente de suas partes.
• Ao obter ativos de um design compartilhado através do conector Figma do usuário, nunca pegue um quadro pai no lugar de seus filhos. Os filhos são o que se move.
• Achatamento em imagem é o fallback apenas — para uma fonte genuinamente não camada (um ativo rasterizado, sem acesso a camadas). Quando você recorrer a isso, diga claramente.
• O hábito de "exportar um nó para aparência fiel" em references/figma-extraction.md é sobre fidelidade de um elemento que você já escolheu trazer inteiro. Não generalize isso para "rasterizar tudo".

Construa cena por cena, em ordem

Isso é mais importante do que qualquer regra individual abaixo. Não crie a linha do tempo inteira e depois a apresente. Não prototipe um beat intermediário impressionante primeiro: o movimento projetado no meio não tem nada a que se juntar, então é descartado.

Comece no primeiro quadro e avance. Por cena:

1. Divida por unidades de movimento semânticas, não apenas camadas editáveis. Um controle, seu rótulo e seu ícone normalmente compartilham um proprietário de posicionamento. Adicione movimento filho-local apenas para uma mudança de estado deliberada. A quietude é hierarquia útil e tempo de leitura, não um defeito. Para agrupamento, crescimento de painel e reflow, use linked-element-motion (busque com picsart_scene_recipe, nome linked-element-motion).
2. Crie seu movimento adicionando ao que já está construído — anexando ao gerador onde você puder executar código, corrigindo a mesma cena onde não puder. Nunca recomece: as constantes e verificações de cada beat anterior permanecem, para que um novo beat não quebre silenciosamente um já estabelecido.
3. Renderize esse beat e mostre-o como vídeo sobre sua própria janela. O movimento não pode ser revisado em uma imagem estática ou em uma folha de contato.
4. Aceite direção e re-renderize. Espere várias passagens em um beat. A direção chega como qualidades, não números — "mais rápido", "desacoplar os tiles", "esse elemento faz barulho, tire-o" — e cada uma mapeia para temporização, espaçamento ou inventário de elementos, não para um novo design.
5. Em seguida, projete a junção para a próxima cena como sua própria etapa explícita. Uma cena não está pronta quando parece correta; está pronta quando sua saída e a entrada da próxima cena são acordadas. A junção é a parte que o storyboard não contém, então é onde a direção é mais específica ("dê zoom out, então a próxima cena chega da câmera, não com zoom") e onde adivinhar mais desperdiça.

Quando a iteração autônoma for autorizada, use estas como portais de verificação internos e mostre marcos significativos em vez de solicitar aprovação para cada beat. Para linhas do tempo grandes, use large-scene-assembly (busque com picsart_scene_recipe, nome large-scene-assembly) para manter componentes independentemente editáveis.

Só então avance. Mantenha a tabela de beats atualizada conforme avança — ela é o registro do que foi acordado, e a linha do tempo é longa antes da construção ser finalizada.

Leia o storyboard

• A ordem x do canvas é a ordem temporal. Os quadros são dispostos da esquerda para a direita; ordene por x, não por nome.
• Os nomes dos quadros mentem; a ordem não. Nomes duplicados são comuns (um designer duplica um quadro e esquece de renumerá-lo). Conte os quadros em relação aos números antes de concluir que um está faltando.
• Quadros com nome duplicado geralmente são poses A→B de um beat. Diferencie seus conjuntos de camadas: mesmos filhos, transformações diferentes significa que o designer codificou o movimento como um delta. Esse movimento é mensurável, não uma decisão de design que você precisa tomar.
• Quando o design chegar através do conector Figma do usuário, capture os quadros um de cada vez: um quadro inteiro capturado de uma vez é muito mais largo do que alto e encolhe para uma lasca.

O que é genuinamente seu para projetar: permanência, suavização e as junções entre quadros não pareados.

Para cada junção não pareada, use motion-scene-continuity (busque com picsart_scene_recipe, nome motion-scene-continuity) para nomear a relação semântica e escolher camada persistente, transição de catálogo, corte brusco, crossfade ou transição personalizada antes de escrever a mecânica. Este fluxo de trabalho de storyboard ainda possui a recuperação do movimento implícito por quadros de design pareados; continuidade possui apenas a relação e a representação em seus limites.

Resolva transformações, não as escolha

Uma escala uniforme s em torno de um pivô desconhecido C mapeia p → C + s(p − C). Portanto, um par de coordenadas correspondentes fixa o pivô:

C = (p2 − s·p1) / (1 − s)

Pegue s da razão de tamanho de qualquer elemento entre os dois quadros, resolva C, depois verifique-o contra um segundo elemento independente. Concordância até uma fração de pixel significa que você tem a transformação real do designer; discordância significa que o elemento se moveu por conta própria e precisa de seu próprio tratamento.

Escreva a tabela de beats — deltas medidos, o pivô resolvido, a alocação de tempo. Nove beats de coreografia com números não sobreviverão à rolagem, e você vai querer compará-los com as renderizações.

Regras de movimento

Detalhes completos e números trabalhados: references/motion-rules.md. As regras que decidem se um beat é lido corretamente:

• Rígido vs independente. Espalhe posição/escala apenas para objetos genuinamente independentes (tiles de grade, adesivos). Um cartão, um conjunto ou qualquer objeto com partes deve compartilhar um relógio de geometria, ou suas partes se desalinharão durante o voo. Coloque o espaçamento no fade.
• Um fade deve ser co-terminal com seu movimento para ser lido como um gesto. Se o fade terminar antes do movimento, o olho vê dois eventos. Combine as curvas de suavização também.
• Em uma renderização de quadro plano, um zoom-in é seguro; uma translação não é. Aumentar a escala nunca expõe uma borda; transladar expõe a borda traseira da própria imagem.
• Viagem de entrada com tamanho para que a parte inicial comece pouco antes do canvas — viagem ≥ canvas − x_mais_esquerda. Pouco demais e ele começa na tela; muito demais é tempo morto.
• Saídas aceleram (ease_in). Dê a dois objetos spans diferentes para aceleração diferencial.
• Cromos de seleção são exclusivos — nunca duas marquises ao mesmo tempo, e não deve sobreviver ao seu beat. Se as etapas do elemento sobrepuserem seus spans, um elemento perde sua seleção no meio da manipulação.

Fatos de renderização que mudam a criação

• Opacidade compõe em luz linear. Não escala o valor sRGB codificado. Para atingir um brilho medido, converta através de gamma: opacidade = linear(alvo) / linear(origem).
• Opacidade é apenas um controle de escurecimento sobre um fundo preto. Sobre um fundo claro, torna um sujeito escuro mais claro à medida que o fundo transparece. Um escurecimento real precisa de um scrim escuro por cima, não de opacidade no sujeito.
• anchor fornece um pivô não central (pixels locais da camada a partir do canto superior esquerdo). Use-o para escala com pivô no canto — por exemplo, escalar em torno do canto superior esquerdo de uma caixa de seleção para que pareça arrastar a alça inferior direita. Não finja pivôs com keyframes de posição.
• Animação de texto por caractere é nativa. O content.animations[] de uma camada de texto é um animador After Effects + seletor de intervalo: basedOn: "character", mais randomizeOrder/randomizeSeed para oscilação. Empilhe entradas em diferentes sementes para que não batam em sincronia. O span ativo é [start + offset, end + offset]: uma janela estreita estaciona sua borda distante no final do texto em offset: 1 − end, ou limpa todo glifo em offset: 1 − start (1 − w / 1 apenas quando start é 0 — não use caso contrário). Uma janela FULL (start:0,end:1) com forma de rampa é, em vez disso, uma rampa exatamente tão larga quanto o texto: varra offset -1 → 1 e cada glifo suaviza sobre metade da varredura, espaçado por posição em vez de alternar todos de uma vez — veja textAnimationAuthoring.rawSelector em picsart_scene_capabilities para os números trabalhados.
• SVG inline deve ser codificado em URL com # percent-encoded. Um # bruto inicia um fragmento de URI e trunca o SVG em seu primeiro código de cor hexadecimal.
• Meça a suavização, não confie em nomes predefinidos. Amostre o valor em 25%/75% de uma janela de keyframe e confirme que a curva é a que você pretendia.

Verifique numericamente

Observar visualmente uma folha de contato reduzida produzirá falsos alarmes — ela relata consistentemente erros de posição que a medição desmente. Compare quadros em resolução total, ou meça.

• picsart_scene_validate verifica apenas estrutura. Ele passa em uma cena cujas camadas não renderizam nada.
• picsart_scene_query_layout resolve caixas sem renderizar — use-o para confirmar a geometria em relação aos números do Figma antes de gastar uma renderização. É apenas geometria: uma caixa resolvida não diz nada sobre se o conteúdo decodifica.
• Para encontrar lacunas onde nada está no canvas, olhe nos tempos suspeitos com picsart_scene_contact_sheet com times: [t1, t2, …] e resolution definido como composition.width e composition.height da cena. Um quadro contendo apenas um logotipo pequeno pode parecer vazio à primeira vista — verifique antes de chamá-lo de lacuna.
• Onde você puder executar código, coloque as invariantes no gerador como asserts (pivôs resolvidos concordando, viagem longa o suficiente, uma seleção por vez, limites razoáveis). Eles capturam regressões que um quadro estático esconde.

Comandos

Onde você puder executar código, mantenha o mesmo gerador e auto-verificações. Caso contrário, use edições picsart_scene_patch limitadas. Valide com picsart_scene_validate, consulte geometria de eventos com picsart_scene_query_layout e inspecione imagens estáticas em resolução total usando picsart_scene_contact_sheet com times: [t1, t2] (no máximo 8 tempos por chamada) e resolution definido como composition.width e composition.height da cena. Inspecione vídeo exportado contínuo para alegações de movimento.

Sem o gerador" # Note: The original text was truncated, so the translation ends here. The final line was 'Without the generator...' which is incomplete. I maintain fidelity by stopping at the same point. If more context is available, continue from the original directly. }```

Final markdown note: I preserved code spans, URLs, references, and all structural elements exactly as specified. The skillMarkdown ends with the same truncation as the original, and I omitted the YAML frontmatter.