効率的なFigmaデザインをHTML/CSSへ変換する方法 #webデザイン - シナプス技術者ブログ

WEBソリューション課の田畑です。 現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。 もっと効率的にページ作成を行いたいと思ったので、Figmaのデザイン画面をHTMLやCSSへ変換する方法について調べてみました。 Figmaとは FigmaのデザインからHTML/CSSへ変換する方法 1.Figmaの開発モード(Dev Mode）を使う 2.プラグインを使ってデザインをHTML/CSSへ変換する 試したプラグイン プラグインの使い方 プラグインで変換した結果 3.AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する まとめ Figmaとは Figmaとはウェブ上で使えるデザインツールです。 Fig

[sh19910711]

"FigmaのVS Code連携拡張機能を使用すると、VS Codeを使ってデザインへのアクセスや調査が出来るため、コード変換がスムーズ / AI（Gemini 2.5 Pro）にFIgmaデザイン画像を読み込ませるのが一番早そう"