Markdown to Figma

About this plugin

Markdown → Figma — by Sedra RABEMANANTSOATurn any Markdown document into a clean, GitHub-styled Figma frame. Paste from a README, a UX spec, a design-system doc, or drag-and-drop a .md file — get production-ready auto-layout, instantly.Built on top of GitHub Flavored Markdown with a complete renderer designed by a UX/UI designer. Free, no account, no telemetry.What it doesPaste or drop your Markdown on the left, preview the render live on the right, then import a clean Figma frame on your canvas — with proper hierarchy, spacing, typography, and real images.GFM coverage (everything you'd expect)Headings H1 → H6 with underline rules on H1 / H2 (GitHub style)Inline bold, italic, bold italic, strikethrough, inline code, links + GFM autolinks, hard line breaksLists unordered, ordered, nested (3+ levels), and task lists (- [ ] / - [x]) with real checkbox vectorsTables with column alignment (:---, :---:, ---:), zebra rows, bold header, inline rich-text in cellsBlockquotes with the iconic left vertical bar, multi-line, nested childrenCode blocks fenced with language label header (bash, ts, json, …)Images real raster images (PNG / JPG / GIF / WEBP) via figma.createImageAsync, plus SVG support via prefetch → vector nodes in FigmaHorizontal rulesInline HTML stripped to safe textOutput you can shipLight or Dark theme (toggle in Options) — both palettes match GitHub's design language pixel-for-pixelBody font picker with 12 curated Google Fonts (default TikTok Sans, plus Inter, Roboto, Poppins, DM Sans, Plus Jakarta Sans, Manrope, Onest, Space Grotesk, Geist, Nunito, Noto Sans). Auto-fallback chain: chosen → Inter → Roboto → Arial.Frame width presets (560 / 760 / 960 / 1200) for narrow specs or wide design-system pagesReal auto-layout vertical flow, predictable padding, no collapsing columnsFrame name auto-derived from the first H1 / H2 of the documentClickable hyperlinks preserved as real Figma URL hyperlinksOptional designer signature with LinkedIn hyperlinkPlugin UISide-by-side live preview with debounced re-renderDrag-and-drop any .md, .markdown, or .txt file10 languages — English, Français, Español, Deutsch, Italiano, Português, Nederlands, Polski, 日本語, 中文 (auto-detected from browser)Word / line counter, block counter, status feedbackCurated lime-green primary CTA, adaptive light / dark Figma chromePerfect forDesign systems · Color palettes & brand guidelines · UX / UI documentation · Developer handoff · Engineering specs · Product requirements · Onboarding docs · Release notes · Technical writing workflowsExamplePaste:# Color System## Primary Palette| Name | Hex | Usage || :-------- | :-------- | :----------------- || EGS Main | `#14392F` | Depth, anchor || EGS Pear | `#BEE9B2` | Buttons, accents |The plugin instantly generates a clean Figma frame: typography, table with alignment, the SVG logo as a real vector, and proper auto-layout — light or dark, your typography.PrivacyNo telemetry. No account. No remote calls except image downloads when your Markdown references them (required to render ).Changelogv2.0.0 — Major rebuildNew rendering engine (GFM parser via marked)Light + Dark themes (GitHub palette)Google Fonts picker with TikTok Sans defaultReal image support — raster + SVG (vector)Nested lists, task lists, table alignment, hard breaksSide-by-side live preview, drag-and-drop, 10-language UIInter / Roboto / Arial font fallback chainv1.0.0 — Initial releaseGFM subset import (headings, paragraphs, lists, blockquotes, code, tables)Hex color detection with swatches in tablesAuto-layout frame outputKeywordsmarkdown figma gfm documentation readme import converter design system developer handoff technical writing color palette hex color table auto layout code block UX writing dark mode google fonts specs task list imageCreditsMade by Sedra RABEMANANTSOA — UX/UI Designer · LinkedInFree plugin. Available for Dev / UX-UI projects