skills.rest
ChunkyTortoise
ChunkyTortoiseCOMMUNITY
Explore all skills by this author →
GitHub

Figma to Streamlit Component

Convert Figma frames into reusable Streamlit components with type-safe props.

Updated Aug 23, 2026
Search Tags:#accessibility#figma#component#streamlit#design-tokens#visual-testing
One-click install
npx skills add https://github.com/ChunkyTortoise/EnterpriseHub --skill figma-to-streamlit-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Figma to Streamlit Component
Source: https://github.com/ChunkyTortoise/EnterpriseHub/tree/main/.claude/skills/design/figma-to-component
Command: npx skills add https://github.com/ChunkyTortoise/EnterpriseHub --skill figma-to-streamlit-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines converting Figma designs into production-ready Streamlit components, ensuring design fidelity and faster UI delivery.

Core Features & Use Cases

  • Figma-to-Streamlit conversion: Generate type-safe, cached components directly from design frames.
  • Design system integration: Map Figma tokens to existing design tokens to maintain visual consistency.
  • Automated testing scaffolding: Create visual regression tests and accessibility checks for generated components.
  • Use Case: A design team provides a Figma frame URL; Claude generates a ready-to-integrate Streamlit component with props and tests.

Quick Start

Use the Figma-to-Streamlit Component skill to convert a Figma frame into a Streamlit component by providing the Figma URL and optional token-mapping.

Frequently Asked Questions about Figma to Streamlit Component

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

FAQPage Schema
How do I convert Figma designs to Streamlit components automatically?▼

To convert Figma designs to Streamlit components, provide a Figma frame URL to generate type-safe, cached, production-ready components with automated visual regression tests and accessibility checks.

Do I need Figma MCP access to generate Streamlit UI from design frames?▼

Yes, Figma MCP access is required to translate Figma frames into reusable Streamlit components, ensuring accurate design token mapping and direct integration with your component library.

Can I map Figma design tokens to an existing Streamlit component library?▼

Yes, you can map Figma design tokens to existing design tokens within your Streamlit component library to maintain visual consistency across generated dashboard components.

What is the best way to scaffold accessibility checks for Streamlit components?▼

The best way to scaffold accessibility checks for Streamlit components is by generating them directly from Figma frames, which automatically creates visual regression tests and accessibility validations.

Does the Figma to Streamlit conversion support type-safe props?▼

Yes, the Figma to Streamlit conversion supports type-safe props, ensuring that the generated UI components are robust, cached, and ready for production use within your dashboards.

When should I use an automated Figma to Streamlit workflow for dashboards?▼

You should use an automated Figma to Streamlit workflow when you need to streamline design-to-code delivery, ensuring high design fidelity and faster UI generation for dashboards and component libraries.

Related Skills

Explore More Design & Creative Skills→
ChatAndBuildChatAndBuild
1

figma

Translate Figma design elements into production code from URLs and node IDs.

Official
Advanced
legoutlegout
3

building-streamlit-dashboards

Build responsive Streamlit dashboards with layout primitives and UI components.

Community
Intermediate
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced
jasonkneenjasonkneen
471

frontend-design

Construct frontend UIs with HTML, CSS, and JavaScript for responsive layouts.

Community
Intermediate