vcr-figma-workflow

Convert Figma designs and prompts into VCR-compatible scene manifests.

22|Updated Feb 10, 2026

Search Tags:#workflow #figma #animation #vcr #design to video #deterministic rendering

Ready to run

npx skills add https://github.com/coltonbatts/VCR --skill vcr-figma-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vcr-figma-workflow
Source: https://github.com/coltonbatts/VCR/tree/main/.skills/vcr-figma-workflow
Command: npx skills add https://github.com/coltonbatts/VCR --skill vcr-figma-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the translation of design elements and prompts from Figma into deterministic VCR scene manifests, streamlining the animation production pipeline.

Core Features & Use Cases

Design-to-Animation Translation: Converts Figma designs and associated prompts into VCR-compatible YAML.
Deterministic Output: Ensures consistent video renders by leveraging VCR's core rendering engine.
Use Case: A designer creates a UI animation in Figma. This Skill converts the design into a VCR scene, allowing for programmatic rendering and integration into a video production workflow without manual scene creation.

Quick Start

Use the vcr-figma-workflow skill to convert the Figma design and prompt into a VCR scene.

Frequently Asked Questions about vcr-figma-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Figma designs into video animations?▼

You can convert Figma designs into video animations by translating design elements and prompts into deterministic VCR scene manifests. This automated conversion enables programmatic rendering for rapid prototyping pipelines without manual scene creation.

What is a VCR scene manifest and when do I need it?▼

A VCR scene manifest is a YAML file that defines deterministic video renders. You need it when integrating Figma UI animations into a video production workflow, ensuring consistent rendering outputs through the VCR core engine.

Do I need specific binaries to render Figma designs with VCR?▼

Yes, you need the `figma-vcr-workflow` binary to convert Figma designs into VCR-compatible YAML. Additionally, the VCR CLI is required to validate and render the generated scene manifests into video.

How do I automate UI animation generation from a Figma design system?▼

Automate UI animation generation by converting Figma design elements and prompt context into VCR scene manifests using the workflow binary. This streamlines the animation production pipeline for design systems through programmatic rendering.

Can I use this Figma to VCR workflow for rapid prototyping pipelines?▼

Yes, this workflow is designed for rapid prototyping pipelines. It translates Figma designs into deterministic VCR-compatible YAML scenes, allowing automated animation generation and programmatic video rendering within your pipeline.