HTMLをStudioに持ち込むとき、Figma経由と直接変換で何が違うか

Studioには、Figmaで作ったデザインをそのまま取り込める公式のプラグインが用意されています。デザインをFigmaで作る人にとっては、これがいちばん素直な入口です。

では、手元にあるのがFigmaのデザインファイルではなく、HTML/CSSのコードだったらどうでしょうか。この場合、大きく分けて2つの道筋があります。ひとつは、HTMLを一度Figmaのデザインファイルに変換してから、Studio公式のプラグインで取り込む方法。もうひとつは、HTMLからStudioへ直接変換する方法です。この記事ではこの2つを比較します。

道筋1：HTMLをFigmaに変換してから、公式プラグインで取り込む

HTMLの見た目をFigmaのデザインファイルに変換するツールを使い、できあがったFigmaファイルをStudio公式の「Figma to STUDIO」プラグインで取り込む方法です。2つのツールを順に通す、2段階の道筋になります。

この道筋の利点は、公式プラグインを使える点です。Studioが正式にサポートしている取り込み経路なので、仕組みそのものへの安心感があります。

一方で、HTML→Figma変換の段階では、コードが持っていた文字情報やレイアウトの意図が、デザインファイルの見た目としてだけ再現され、そこから先はStudio上で人がボックスや文字を組み直す作業が必要になりやすい、という前提で臨むのが現実的です。もともとFigma向けの変換ツールは「デザインを起点にする人」のためのものなので、HTMLという「コードを起点にする人」の素材を通すと、途中でひと手間かかる場面が出てきます。

道筋2：HTMLからStudioへ直接変換する

HTML/CSSを、Figmaを経由せずに直接Studioのネイティブ要素（ボックス・テキスト・画像）へ変換する方法です。SHITAJIはこの道筋のツールで、Studio公式のプラグインではなく、非公式の独立したサービスとして提供しています。

経由するツールが1つだけなので、道筋としてはいちばん短くなります。またHTML/CSSの構造をそのまま読み取って変換するため、Figmaという「絵」の形を一度経由しない分、文字や画像の要素がそのまま保たれやすいという特徴があります。

どのツールを使っても、コードとデザインは別の仕組みなので「変換すれば完全に元どおり」にはなりません。JavaScriptで動く仕掛け（スライダーなど）は、どちらの道筋でも持ち込めず、Studio側の部品で作り直す前提になります。

どちらを選ぶか

手元の素材と、かけられる時間で選ぶのが分かりやすいと思います。

• もともとFigmaでデザインを作っている、または今後もFigmaを使っていきたい → 公式の「Figma to STUDIO」プラグインが素直な入口です
• 手元にあるのがHTML/CSSで、Figmaは使わない・使う予定がない → HTMLから直接変換する道筋のほうが、経由するツールが少なく済みます
• 生成AIが書いたHTMLを持ち込みたい → HTMLから直接変換する道筋が対象です。AI別の手順は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較へ

まとめ

Studio公式の「Figma to STUDIO」プラグインは、Figmaでデザインする人にとっての正式な入口です。手元にあるのがHTML/CSSのコードなら、Figmaを経由せずに直接Studioへ持ち込む道筋もあります。どちらも、取り込んだあとは普通のStudioプロジェクトとして仕上げていく点は変わりません。素材の形（Figmaのデザインファイルか、HTMLのコードか）に合わせて、経由するツールを選ぶとよいと思います。