ブログ
HTML to Figma、Auto Layout、デザインシステム、AIからデザインへのワークフローに関するガイド。
CSS to Figma Auto Layout：FlexboxとGridの対応ガイド
FlexboxとFigmaのAuto Layoutは似ていますが、同じモデルではありません。この技術ガイドでは、CSSプロパティとAuto Layoutの設定の対応、検証が重要な理由、そしてきれいにインポートされるCSSの書き方を紹介します。
2026年10月22日 · 10 分で読めます
Localhost to Figma：Chrome拡張機能でどんなページもFigmaへ
URLインポートでは届かないページがあります。localhostのビルド、ログインが必要なダッシュボード、今まさに開いているメニューなどです。無料のHTML to Frames Chrome拡張機能なら、あなたのブラウザからそれらをキャプチャし、編集可能なFigmaレイヤーに変換できます。
2026年10月21日 · 9 分で読めますAI to FigmaAI to Figma：ClaudeやCursorで作ったUIをMCPでFigmaへ
AIコーディングツールは数分で動くUIを作れますが、デザイナーが必要とするのはFigma上のデザインです。Claude Code、Claude Desktop、CursorをMCPでHTML to Framesに接続し、スクリーンショットではなく編集可能なレイヤーとして取り込む方法を紹介します。
2026年10月20日 · 9 分で読めますwebsite to FigmaWebsite to Figma：WebサイトをFigmaに取り込むリデザイン提案ガイド
クライアントの現行Webサイトを編集可能なFigmaレイヤーに変換し、リデザイン提案につなげるための、エージェンシー向けステップバイステップの実践ガイドです。複数ページのインポート、レスポンシブセット、ライト + ダーク、ビフォー/アフターボード、スプリントのタイムライン例を解説します。
2026年10月18日 · 9 分で読めますHTML to frameHTML to Frame：DOMがFigmaのAuto Layoutになる仕組み
HTMLをFigmaのフレームに変換するのは、雑にやるのは簡単でも、うまくやるのは難しいものです。HTML to FramesがDOMをネストされたフレームに対応させ、実測ジオメトリからAuto Layoutを推定し、すべての子要素を検証してデザインを決して崩さない仕組みを紹介します。
2026年10月16日 · 8 分で読めますHTML to canvasHTML to Canvas：ビットマップと編集可能なFigmaレイヤーの違い
「HTML to canvas」で検索すると、まったく異なる2つのものが見つかります。ページをピクセルに変換するJavaScriptライブラリと、ページをレイヤーとしてFigmaキャンバスに配置するツールです。この記事では両者を解説し、それぞれが適している場面と、本当にcanvasであるコンテンツの扱い方を紹介します。
2026年10月14日 · 8 分で読めますHTML to designHTML to Design：デザイナーと制作会社のためのリデザイン手順
ほとんどのリデザインはすでに存在するサイトから始まりますが、ほとんどのデザインファイルは白紙のキャンバスから始まります。公開中のページを編集可能なレイヤー、再利用できるデザインシステム、クリックできるプロトタイプに変える、実践的なHTML to designワークフローを紹介します。
2026年10月11日 · 8 分で読めますHTML to FigmaHTML to Figma：HTMLをFigmaに変換する方法【2026年完全ガイド】
HTMLをFigmaに変換するのに、もう手作業でページを作り直したり、平らなスクリーンショットを貼り付けたりする必要はありません。このガイドでは、すべてのインポート方法、重要な画面とオプションの選び方、そして一度で整った編集可能なレイヤーを得る方法を順を追って解説します。
2026年10月8日 · 9 分で読めますWebをなぞって描き直すのは、もう終わりにしましょう。
リンクを貼るだけで、編集可能でレスポンシブな本物のFigmaレイヤーが数秒で手に入ります。無料で始められ、毎月10回インポートできます。
クレジットカード不要。ProはFigma内で購入できます。
Figma Communityで近日公開