リソース
Figma-to-code リソース
Figma のデザインを実際のコードに変換するための実践的なガイドとオープンなベンチマーク — MarkupGen ユーザーに限らず、Figma-to-code ワークフローを検討しているすべての人のために。
Figma → HTML
Figma のフレームをクリーンでセマンティックな HTML と CSS に変換する。
Figma → CSS
Figma の値をフレームワークに依存しない素の CSS スタイルシートにマッピングする。
Figma レスポンシブ変換
ブレークポイント、流動的なレイアウト、複数デバイス向けフレームの扱い方。
セマンティック HTML
ランドマーク、見出しの順序、そして div の羅列ではなく本来のインタラクティブ要素。
アクセシビリティ
Figma から生成したコードをキーボード、スクリーンリーダー、実際のコントラストで使えるようにする。
デザイントークン
Figma のカラー、タイポグラフィ、スペーシングのトークンを本番用 CSS に反映する。
Figma-to-code 評価
公開前に AI 生成 HTML をどう判断するか。
Figma-to-code ベンチマーク
ツール間で Figma-to-code の品質を測定するためのオープンで再現可能な方法論。
結果はまだ公開されていません — ベンチマークのデータセットは現在準備中です。上記のページで方法論の全体を解説しています。
Figma → Code フレームワーク
プレーンなCSS以外でMarkupGenが対応するすべての出力形式 — React、Vue、その他のCSSフレームワーク。
MarkupGenと他のツールとの比較
MarkupGenが他のFigma-to-codeやデザインハンドオフツールとどう違うか。
このハブは、サイト内で実際に役立つページだけにリンクしています — サイト全体の索引ではありません。記事の全リストはブログをご覧ください。