リサーチ
Figma-to-Codeベンチマーク2026
視覚的な再現度、セマンティックHTML、アクセシビリティ、CSSの品質など、10の独立した観点からFigma-to-codeツールを評価する、オープンで再現可能な方法論です。結果が存在する前から、公開の場で構築してきました。
ステータス：方法論は公開済み、結果はまだ測定されていません
スコアリングスクリプトは構築済みで、合成フィクスチャに対する単体テストも完了しています。ベンチマークデータセットにはまだデザインが1件も作成されていないため、MarkupGen自身を含め、実際のツールはまだ採点されていません。実際の結果が得られ次第、本ページを更新し、noindex設定を解除します。
以下の詳細な方法論は現在英語版のみでご提供しています。実際のベンチマーク結果が公開され次第、翻訳いたします。
Why this exists
Most "Figma-to-code tool comparison" content online is a single reviewer's subjective take, not a repeatable methodology. This benchmark is our attempt at the opposite: independent, automated where automation is honest, and published with its own limitations attached — including the limitation that no result exists yet.
If a dimension hasn't been measured, this page says so. Nothing here is a placeholder number — every score you'd expect to see is either a real, reproducible measurement or the words "Not yet measured."
Ten independent dimensions
No dimension is collapsed into a single overall score — a tool that's strong on visual fidelity but weak on accessibility should show as two different numbers, not one blended one that hides which is which.
| Dimension | Method | Status |
|---|---|---|
| Visual fidelity | Automated (pixel diff, Figma export vs. rendered HTML) | Tooling built & tested — not yet run |
| Responsive fidelity | Automated + manual, 3 fixed viewports | Not yet measured |
| Semantic HTML quality | Automated (landmark, heading, label rubric) | Tooling built & tested — not yet run |
| Accessibility | Hybrid (axe-core + manual checklist) | Tooling built & tested — not yet run |
| CSS quality | Automated (specificity, duplication, custom properties) | Tooling built & tested — not yet run |
| DOM complexity | Automated (node count, depth, wrapper heuristic) | Tooling built & tested — not yet run |
| Code editability | Manual (standardized modification tasks) | Not yet measured |
| Maintainability | Manual reviewer judgment | Not yet measured |
| Performance | Automated (size) + conditional Lighthouse | Not yet measured |
| Production readiness | Manual checklist | Not yet measured |
"Tooling built & tested" means the measurement script exists, is unit-tested against synthetic fixtures, and is verified to correctly tell good markup from bad markup — but has not yet been run against a real Figma design or a real tool's output, because the dataset below doesn't exist yet.
Dataset: 10 categories, all planned
| Category | Stresses |
|---|---|
| Marketing landing page | Baseline conversion quality |
| SaaS dashboard | Dense data UI, component semantics |
| Pricing page | Repeated component variants |
| Ecommerce product page | Image handling, variant controls |
| Blog/article page | Heading hierarchy, prose semantics |
| Responsive marketing page | Explicit multi-breakpoint frames |
| Component-heavy UI | Figma component/variant consistency |
| Complex Auto Layout | Nested/mixed Auto Layout (adversarial) |
| Form-heavy interface | Labeling, grouping, validation semantics |
| Microsite | Non-grid layout patterns |
Every design will be created specifically for this benchmark — not scraped, not a real customer file, not a paid template — and published under CC BY 4.0 once built, so the dataset itself is inspectable and reproducible by anyone, not just our own scoring of it.
What "not yet measured" actually means here
It means exactly that, and nothing more optimistic: the scoring scripts exist and are proven correct against hand-built test fixtures (a deliberately semantic HTML sample and a deliberately div-soup one — the tools score them 10/10 and 3.5/10 respectively, and 0 vs. 4 accessibility violations), but they have not been pointed at a real Figma design or a real competitor's output. We would rather ship this page half-finished and honest than fabricate a table of numbers that looks complete.
Reproducibility
Every measurement will record its tool version, browser version, OS, and the exact fixed viewport dimensions used (mobile 390×844, tablet 834×1194, desktop 1440×900, all at 1x device pixel ratio). Competitor tools are only included where they can be tested under equivalent conditions — same source design, same scripts, same day — and any tool that can't be tested fairly is marked as such, never silently dropped or scored as a failure.
Limitations we're already committing to disclosing
Pixel-diff visual fidelity isn't the same as perceptual similarity — a 1px shift over a flat color area can register as a larger diff than a human would perceive. Automated accessibility checks (axe-core) catch an estimated 30-50% of real WCAG issues, not all of them. CSS and DOM complexity metrics have no universal "good" threshold — they're only meaningful compared against another tool's output for the same design. Every script in this project ships its own limitations alongside its output, not as a separate disclaimer bolted on afterward.