Figma からテキストデータ（HTML）を書き出す

ろぐ 4ヶ月前に更新

前提条件：人生で Figma の使用時間は３日程、Figma の基本機能の理解度はほぼ0の状況。
Figma からテキストデータ（欲をいえば HTML）を書き出しできないか調べた。

css（と画像）は書き出し対象外
サインアップなどの手続きなし、無料のプラグイン

ろぐ 4ヶ月前に更新

Figma 基本機能に、HTML を書き出す機能はない様子。
HTML/CSS convert や export などの内容でプラグインの紹介記事が多いので、以前作ったカードアイテムをサンプルに一つずつプラグインを試してみる。

ろぐ 4ヶ月前に更新

Figma to HTML

ろぐ 4ヶ月前に更新

HTML（Legacy）・Zip（のみ選択可）で、「Convert」を押す
ダウンロード後に Zip を展開すると、index.html と css, images フォルダが同梱されている
index.html を表示すると、Figma のレイヤー階層通り div で、テキストは span でマークアップされる。div には自動的にクラスがつき、クラス名は Figma に配置した要素（オブジェクト）の数が連番で付与される。なお、画像は空の div に背景画像として配置される。

ろぐ 4ヶ月前に更新

感想：良さそう・・・だけど。

よかった点

テキスト、画像データは抜き出せた

できなかったこと

階層が深いレイヤーがある（試したのは6階層）と書き出されない（特に深いレイヤーは個別に選択して書き出す必要がある）。

できたらいいなと思った点

フレーム・セクション毎に一括書き出しがしたい
クラス名を変更したい（レイヤー名を変更したけどそれも反映されない）
できれば div 以外を指定して書き出したい

結果論として「それなら、こういうことができたらな」と欲求が具体化したので、
他のプラグインではどうなのか見ていく。

ろぐ 4ヶ月前

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

ろぐ 4ヶ月前に更新

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>

ろぐ 4ヶ月前に更新

感想：良さそう、、、だけど。

よかった点

テキストデータが抜き出せた
フレーム・セクション毎に一括書き出しができる
- 階層が深いレイヤーにも、2,3秒反応が遅くなるけど書き出された
クラス名を変更できる
- レイヤー名を変更すれば、パスカルケース（先頭が大文字）で反映される
ソースコードコピーで使用できる（使わないファイルダウンロードの必要がない）

できなかったこと

画像の書き出し

できたらいいなと思った点

できれば div 以外を指定して書き出したい
- レイヤー名を１つずつ変更するほうが手間
インライン css の除去や削除機能

今回、画像は個別で書き出しするとして、マークアップが一律で div になるのは、一括置換しやすくなるから逆にいいかもしれないとも思い始める。
クラス名も使い方によっては、レイヤー名にタグ要素を指定してしまえば、一括置換して使えそうだが、一つずつ変更するほうが手間に感じた。インライン css はエディタの使い方次第で除去できそうだけど、手間。

ろぐ 4ヶ月前

Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)

ろぐ 4ヶ月前

「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>