Figma からテキストデータ(HTML)を書き出す
前提条件:人生で Figma の使用時間は3日程、Figma の基本機能の理解度はほぼ0の状況。
Figma からテキストデータ(欲をいえば HTML)を書き出しできないか調べた。
- css(と画像)は書き出し対象外
- サインアップなどの手続きなし、無料のプラグイン
Figma 基本機能に、HTML を書き出す機能はない様子。
HTML/CSS convert や export などの内容でプラグインの紹介記事が多いので、以前作ったカードアイテムをサンプルに一つずつプラグインを試してみる。
Figma to HTML
-
HTML(Legacy)・Zip(のみ選択可)で、「Convert」を押す
-
ダウンロード後に Zip を展開すると、index.html と css, images フォルダが同梱されている
-
index.html を表示すると、Figma のレイヤー階層通り
div
で、テキストはspan
でマークアップされる。div には自動的にクラスがつき、クラス名は Figma に配置した要素(オブジェクト)の数が連番で付与される。なお、画像は空の div に背景画像として配置される。
感想:良さそう・・・だけど。
よかった点
- テキスト、画像データは抜き出せた
できなかったこと
- 階層が深いレイヤーがある(試したのは6階層)と書き出されない(特に深いレイヤーは個別に選択して書き出す必要がある)。
できたらいいなと思った点
- フレーム・セクション毎に一括書き出しがしたい
- クラス名を変更したい(レイヤー名を変更したけどそれも反映されない)
- できれば
div
以外を指定して書き出したい
結果論として「それなら、こういうことができたらな」と欲求が具体化したので、
他のプラグインではどうなのか見ていく。
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
-
HTML・LayerNames を選択して「Copy」を押す
-
テキストエディタ(VS Code)にペーストすると、Figma のレイヤー階層が
div
が再現され、こちらはテキストもdiv
でマークアップされる。div には自動的にクラスがつき、Option で LayerNames を指定したことで、レイヤー名が反映される。なお、画像は img として配置される。css はインラインスタイルで指定される。 -
card という Frame に 画像を配置したレイヤー構造だが、div.Card > img ではなく
img.Card
として書き出される
<div class="Card" style="width: 261px; height: 266px; padding-left: 21px; padding-right: 21px; padding-top: 24px; padding-bottom: 24px; background: white; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 4px; overflow: hidden; border: 1px black solid; flex-direction: column; justify-content: space-between; align-items: flex-start; display: inline-flex">
<img class="Card" style="width: 217px; height: 103px; position: relative" src="https://via.placeholder.com/217x103" />
<div class="Detail" style="align-self: stretch; height: 32px; justify-content: flex-start; align-items: center; gap: 24px; display: inline-flex">
<div class="Group3" style="width: 70px; height: 32px; position: relative">
<div class="Ellipse6" style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
<div class="Leon" style="left: 40px; top: 8.50px; position: absolute; color: black; font-size: 12px; font-family: Inter; font-weight: 800; word-wrap: break-word">Leon</div>
</div>
<div style="color: black; font-size: 18px; font-family: Inter; font-weight: 800; word-wrap: break-word">♡</div>
</div>
<div class="LoremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliquaUtEnimAdMinimVeniamQuisNostrudExercitationUllamcoLaborisNisiUtAliquipExEaCommodoConsequatDuisAuteIrureDolorInReprehenderitInVoluptateVelitEsseCillumDoloreEuFugiatNullaPariaturExcepteurSintOccaecatCupidatatNonProidentSuntInCulpaQuiOfficiaDeseruntMollitAnimIdEstLaborum" style="align-self: stretch; height: 61px; color: black; font-size: 7px; font-family: Inter; font-weight: 800; word-wrap: break-word">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
感想:良さそう、、、だけど。
よかった点
- テキストデータが抜き出せた
- フレーム・セクション毎に一括書き出しができる
- 階層が深いレイヤーにも、2,3秒反応が遅くなるけど書き出された
- クラス名を変更できる
- レイヤー名を変更すれば、パスカルケース(先頭が大文字)で反映される
- ソースコードコピーで使用できる(使わないファイルダウンロードの必要がない)
できなかったこと
- 画像の書き出し
できたらいいなと思った点
- できれば
div
以外を指定して書き出したい- レイヤー名を1つずつ変更するほうが手間
- インライン css の除去や削除機能
今回、画像は個別で書き出しするとして、マークアップが 一律で div になるのは、一括置換しやすくなるから逆にいいかもしれないとも思い始める。
クラス名も使い方によっては、レイヤー名にタグ要素を指定してしまえば、一括置換して使えそうだが、一つずつ変更するほうが手間に感じた。インライン css はエディタの使い方次第で除去できそうだけど、手間。
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
-
「Generate code」を押す
-
別タブ builder.io が開き、html と css が出力・表示される
<div class="div">
<img
loading="lazy"
srcset="..."
class="img"
/>
<div class="div-2">
<div class="div-3">
<div class="div-4"></div>
<div class="div-5">Leon</div>
</div>
<div class="div-6">♡</div>
</div>
<div class="div-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
感想:良さそう
よかった点
- テキストデータが抜き出せた
- ソースコードコピーで使用できる(使わないファイルダウンロードの必要がない)
- 画像は背景画像ではなく
img
タグが(空で)配置される - 別タブで表示される表示要素を選択すると、その部分だけのソースコードが選択できるようになる(テキストだけを選択した例)
できなかったこと
- 階層が深いレイヤーがある(試したのは6階層)と書き出されない
- 特に深いレイヤーは個別に選択して書き出す必要がある
- 画像の書き出し
できたらいいなと思った点
- フレーム・セクション毎に一括書き出しがしたい
- できれば
div
以外を指定して書き出したい - クラス名を変更したい(レイヤー名を変更したけどそれも反映されない)
- ところ所、空白スペースにつくインライン css の除去や削除機能
フレームやセクションを一括で書き出せない、自動付与されるクラス名以外にインラインスタイルが所々入ってしまうため除去に手間がかかるが、別タブで表示された後、表示される要素を選択することでその部分だけのソースコードを抽出(コピー)できるのは、良いなと感じる。
試してないプラグイン
anime
Locofy FREE BETA - Figma to React, React Native, HTML/CSS, Next.js, Gatsby, Vue
ソースコードをコピペで使えるメリット以外に、
- ネストが深いレイヤーを個別に選択して変換する
- div を必要なタグに指定し直す
- クラス名をタグに変換する
- インラインスタイルを除去する
の手間をどう考えるかによるなと思った。