KurageさんKurage Payload CMS
開発に使うツール

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,676MIT日本語ファイルなし
content3,660MIT日本語ファイルなし
vscode-project-manager2,655GPL-3.0日本語ファイルなし
nexrender1,853MIT日本語ファイルなし
zato1,012AGPL-3.0日本語ファイルなし