MD to Figma

About this plugin

📦 MD to FigmaThe Complete Bidirectional Design System Engine — Variables, Styles, and Data Extraction at Once!!Figma plugin that synchronizes your entire design system between Markdown and Figma.Create Variables & Styles from MD, or export your existing Figma system back to MD — with smart bindings and zero configuration.💡 Why Use MD to Figma?1. AI Workflow Optimization: Instantly import AI-generated DESIGN.md files into Figma for free. Build large-scale design systems without wasting AI tokens (MCP).2. True Bidirectional Sync: Precisely export complex Variables and Styles built in Figma back into clean, organized Markdown documentation.3. Semantic Design Preservation: Even if custom fonts are missing from your system, your original 'design intent' is permanently preserved in Variables, while screens safely render using fallback fonts.[AI / Figma MCP / Documentation] ⇄ DESIGN.md ⇄ [MD to Figma(Free, Instant, and Bidirectional!)] ⇄ [Figma Variables & Styles]━━━━━━━━━━━━━━━━━━━━━━✨ What's New in v2.0.01. The Bidirectional Engine (Export & Generate)MD → Figma: Paste your MD to automatically generate beautifully bound Variables and Styles.Figma → MD: Export your existing Figma setup back to a structured Markdown document. We even auto-recover broken variable references!2. Semantic Typography ArchitectureIntent vs. Implementation: We permanently preserve your 'Design Intent' (e.g., your custom font) in primary variables. Even if the font is missing, the UI renders safely using the 'Inter' fallback in secondary variables.Smart LineHeight: The engine automatically distinguishes between '%' and 'px', smartly deciding when to bind to variables or apply exact values to preserve sub-pixel precision.3. Professional QA ReportingA brand-new Agentic QA Reporting modal separates execution summaries from actionable error logs. With one click, copy a perfectly formatted "AI Briefing" to troubleshoot with your AI assistant.━━━━━━━━━━━━━━━━━━━━━━🚀 What Gets GeneratedVariables (4 Collections)Colors: Primitive palette + Semantic aliases (Light/Dark mode). Strict alias-binding enforced.Spacing & Radius: Primitive scales + Semantic aliases.Typography: fontSize, lineHeight, letterSpacing grouped intuitively (Display, Body, etc.).Styles (100% Bound to Variables)Color Styles → bound to Semantic Color VariablesText Styles → bound to Typography VariablesEffect Styles → drop shadows bound to Spacing VariablesGrid Styles → columns, rows bound to Spacing VariablesPartial Sync & Selective GenerationAlready have Variables? Generate Styles only — the plugin auto-links them without recreating anything. Use the checkboxes to update only what you need.━━━━━━━━━━━━━━━━━━━━━━📖 How It Works1. Collect your design system data — from a Figma file, brand guidelines, website, or any source.2. Download the `DESIGN-TEMPLATE.md` from the plugin.3. Hand both to any AI (Claude, ChatGPT, etc.) — the AI uses the template as a pattern reference to organize your data.4. Paste the AI-generated DESIGN.md into the plugin.5. Select which Variables and Styles to generate.6. Click Generate — done. (Use **Export** to extract it back later!)(Includes: DESIGN.md Template & AI Prompt Guide inside the plugin)=================================[한국어 버전]📦 MD to Figma디자인 시스템의 완전한 양방향 동기화 엔진 — Variables, Styles 생성부터 데이터 추출(Export)까지 한 번에!!MD to Figma는 단순한 생성기를 넘어선 완벽한 동기화 엔진입니다. 마크다운 파일 하나로 방대한 Figma 토큰 시스템을 구축하거나, 반대로 이미 복잡하게 얽힌 Figma 시스템을 깔끔한 마크다운 문서로 추출하는 작업까지 설정 없이 자동화합니다.💡 MD to Figma를 쓰는 이유1. AI 워크플로우 최적화: AI가 생성한 `DESIGN.md`를 피그마에 즉시 무료로 이식합니다. MCP의 토큰 낭비 없이 대규모 시스템을 구축하세요.2. 양방향 동기화 (Bidirectional): 피그마에 구축된 복잡한 변수와 스타일을 다시 마크다운 문서로 정밀하게 추출(Export)할 수 있습니다.3. 시멘틱 디자인 보존: 폰트가 시스템에 없더라도 사용자의 원래 '디자인 의도'는 배리어블에 영구 보존하고, 화면은 안전한 폴백 폰트로 렌더링합니다.[AI / Figma MCP / Documentation] ⇄ DESIGN.md ⇄ [MD to Figma(무료, 즉시, 양방향 동기화!)] ⇄ [Figma Variables & Styles]━━━━━━━━━━━━━━━━━━━━━━✨ v2.0.0 핵심 업데이트1. 완벽한 양방향 엔진 (Figma ⇄ Markdown)MD → Figma (생성): 마크다운을 붙여넣어 계층화된 변수와 스타일을 자동 생성합니다.Figma → MD (추출): 피그마에 구축된 변수와 스타일을 100% 정규화된 마크다운으로 추출합니다. 디자이너의 수정 사항을 실시간으로 추적하여 추출하며, 참조가 끊긴 데이터는 자동 복구합니다.2. 시멘틱 타이포그래피 아키텍처의도 보존 시스템: `fontFamily/primary`(디자인 의도)와 `secondary`(실제 폴백)를 분리하여 폰트 부재 시에도 시스템을 보호합니다.스마트 매핑: `fontWeight/400`과 같은 수치 네이밍과 `Regular`라는 피그마 스타일값을 시멘틱 토큰으로 완벽하게 연결했습니다.지능형 바인딩: 단위(`px`, `%`)를 스스로 판단하여 피그마 UI가 깨지지 않는 최적의 방식으로 자동 바인딩합니다.3. 전문가용 QA 리포팅에러/QA 분리: 단순 로그가 아닌, AI에게 전달할 수 있는 전문적인 시스템 분석 리포트를 제공합니다.안정성: 모든 수치를 소수점 둘째 자리에서 정규화하고, 런타임 크래시를 방지하는 강력한 ES6 표준 방어 로직을 탑재했습니다.━━━━━━━━━━━━━━━━━━━━━━🚀 생성되는 항목Variables (4개 컬렉션)Colors: Primitive 팔레트 + Light/Dark 모드 Semantic Alias (HEX 직접 입력 차단, 참조 강제)Spacing & Radius: Primitive 스케일 + Semantic AliasTypography: 폰트 사이즈, 행간, 자간 등 (Display, Body 등 섹션별 자동 그룹핑)Styles (Variables 완벽 연동)Color Styles → Semantic Color Variables 연동Text Styles → Typography Variables 연동Effect Styles → dropshdow 숫자 값 Spacing Variables 연동Grid Styles → gutter/margin 숫자 값 Spacing Variables 연동선택적 생성 및 부분 등록 (Partial Sync)이미 Variables가 있다면 Styles만 생성할 수 있습니다. 기존 변수를 덮어쓰지 않고 지능적으로 연결합니다. 체크 박스로 원하는 항목만 업데이트하세요.━━━━━━━━━━━━━━━━━━━━━━📖 사용 방법1. 디자인 시스템 데이터를 수집합니다. Figma 파일, 브랜드 가이드라인, 웹사이트 또는 모든 출처에서 수집하세요.2. 플러그인에서 'DESIGN-TEMPLATE.md '을 다운로드합니다.3. 여러분들의 AI(클로드, ChatGPT 등)에게 두 가지를 모두 건네주세요. AI는 템플릿을 패턴 참조로 사용하여 데이터를 정리합니다.4. AI가 템플릿화하여 정리한 DESIGN.md 를 플러그인에 붙여넣기.5. 생성할 변수와 스타일을 선택합니다.6. 생성! ( 내보내기를 사용하여 나중에 DS추출 가능 )(플러그인 내에 템플릿과 즉시 사용 가능한 AI 프롬프트 가이드가 포함되어 있습니다.)