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.21. Normalized Naming Compatibility (Fuzzy Match)Slash (/) vs. Dash (-): Solves naming rule discrepancies between Figma's grouping slash (`/`) and developers' coding dash (`-`). It matches variables normalized in memory to run Smart Updates, preserving your original Figma folder structures.2. Fully Partitioned MD ExportPrimitive & Semantic Separation: Color, Spacing, and Radius variables are now exported into cleanly separated Primitive and Semantic tables to align perfectly with standard design system templates.3. Multi-Mode & Typography Values TrackingLight/Dark Mode Colors: Semantic colors are exported with both Light and Dark mode columns.Dynamic Typography Resolution: Text styles retrieve values directly from their bound variables during export, ensuring any modifications in Figma are immediately captured.━━━━━━━━━━━━━━━━━━━━━━🚀 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.2 핵심 업데이트1. 네이밍 호환성 최적화 (Fuzzy Match)슬래시(/)와 하이픈(-) 호환: 피그마의 그룹핑용 슬래시(`/`)와 개발 코드용 하이픈 (`-`) 기호 차이를 매칭 시 메모리 내에서 정규화하여 대조합니다. 기존에 피그마 내에 설정된 원래 이름과 폴더 구조를 해치지 않고 값만 안전하게 업데이트합니다.2. 카테고리 분리 수출 (MD Export)Primitive & Semantic 완벽 분리: 컬러, 간격(Spacing), 둥글기(Radius) 배리어블을 마크다운의 Primitive와 Semantic 테이블로 각각 완벽히 나누어 수출하도록 개선하여 템플릿 표준 규격을 충족합니다.3. 다중 모드 및 타이포그래피 추적다중 모드 색상: 세맨틱 컬러의 Light 모드와 Dark 모드 값을 동시에 추출하여 양방향 테이블 형태로 내보냅니다.타이포그래피 동적 변수값 추적: 텍스트 스타일 추출 시 스타일에 바인딩된 배리어블에서 최신 값을 직접 추적하여 내보내므로, 피그마 상에서 수정한 변수 최신 상태가 즉시 반영됩니다.━━━━━━━━━━━━━━━━━━━━━━🚀 생성되는 항목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 프롬프트 가이드가 포함되어 있습니다.)