skills.rest
coltonbatts
coltonbattsCOMMUNITY
Explore all skills by this author →
𝕏@theColtonBattsGitHub

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
One-click install
npx skills add https://github.com/coltonbatts/VCR --skill vcr-figma-workflow
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma

Extract Figma design data via MCP and generate code from nodes.

Community
Intermediate
coltonbattscoltonbatts
22

vcr-render-planner

Translate natural language video descriptions into deterministic VCR CLI render plans for ProRes output.

Community
Intermediate
jls42jls42
1

Gestion des Sprites

Manage sprite sheets, animations, and collision detection for arcade games.

Community
Advanced
FreedomLabNYCFreedomLabNYC

programmatic-video

Generate deterministic video content using Three.js, Remotion, and FFmpeg.

Official
Advanced