figma-html
Webサイトを編集可能なFigmaデザインに変換するツールです。
figma-htmlとは
このツールは、任意のウェブサイトを編集可能なFigmaのデザインデータへと変換します。TypeScriptで開発されており、Chrome拡張機能やFigmaプラグインとして動作します。デザインシステムやデザイン・トゥ・コードのワークフローにおいて、既存のWeb要素をデザイン資産へ取り込む際に活用できます。開発者は、ブラウザ上のコンテンツを直接Figma上で操作可能なレイヤーとして再構築することが可能です。
要点: Webサイトを編集可能なFigmaデザインに変換するツールです。
主な用途
- 既存Webサイトのデザイン再現
- デザインシステムへの移行支援
- UIコンポーネントの抽出
- プロトタイプ制作のための素材収集
- デザイン・トゥ・コードの工程効率化
figma-htmlを使ったシステム開発
figma-htmlは、そのまま納品する完成品ではなく、システムを作るための道具です。figma-htmlを組み込んだ自社向けの仕組みを、AIエージェントと対話しながら実装します。要件を伺ってから最短1営業日で動くデモをお出しし、触って確認いただいてから発注を判断できます。完成後はソースコードごとお渡しします。
figma-htmlを使った開発を相談figma-htmlの日本語対応(実測)
figma-htmlのリポジトリに日本語ロケールのファイルは見つかりませんでした。日本語で運用するには日本語化から着手する必要があります。
GitHubの公開ファイル一覧から、日本語ロケールに当たるファイルを数えた結果です。配布用にまとめたビルド成果物は除いています。調査日時点の内容で、翻訳の網羅率や品質までは示しません。
figma-htmlの基本情報
| ライセンス | MIT |
|---|---|
| 主な言語 | TypeScript |
| GitHubスター | 3,676(自動化・連携カテゴリ 29件中 2位) |
| 初回公開 | 2019年8月 |
| 最終更新 | 2025年8月 |
| 日本語ロケール | 日本語ファイルなし(0ファイル) |
figma-htmlを使った開発のよくある質問
どのような仕組みでWebサイトを変換しますか?
Chrome拡張機能とFigmaプラグインを組み合わせることで、ブラウザ上のウェブサイトの要素を取得し、Figma内で編集可能なデザインデータへと変換する仕組みを提供します。
変換されたデザインは自由に編集できますか?
はい、このツールの目的はWebサイトを「編集可能な」Figmaデザインに変換することであるため、取り込んだ後にFigma上でレイヤーの操作や修正を行うことが可能です。
特定のフレームワーク専用のツールですか?
説明文にはAngularなどのトピックが含まれていますが、基本的には「任意のウェブサイト(any website)」を変換対象としており、汎用的なWeb要素を対象としています。
このツールを使ってデザインからコードへの自動生成もできますか?
このツール自体はデザインへの変換に特化していますが、デザイン・トゥ・コードのトピックに関連しており、Figma上で編集した後の工程として他のツールと組み合わせて活用されることが想定されます。Goals
figma-htmlを使って何が作れますか?
figma-htmlの標準機能を土台に、自社データとの連携、画面、自動処理、通知などを組み合わせた仕組みを作れます。用途を伺えば、実現できる範囲と進め方を具体的にお伝えします。
figma-htmlを使った開発を依頼できますか?
可能です。要件と稼働環境を確認し、最短1営業日で動くデモをお出しします。発注後はサーバー設置と稼働確認まで一つの流れで対応し、ソースコードごとお渡しします。
自動化・連携の他のOSSと比べる
同じカテゴリから、スター数・ライセンス・日本語対応を並べました。
| OSS | スター | ライセンス | 日本語ロケール |
|---|---|---|---|
| figma-html(このページ) | 3,676 | MIT | 日本語ファイルなし |
| content | 3,660 | MIT | 日本語ファイルなし |
| vscode-project-manager | 2,655 | GPL-3.0 | 日本語ファイルなし |
| nexrender | 1,853 | MIT | 日本語ファイルなし |
| zato | 1,012 | AGPL-3.0 | 日本語ファイルなし |
