Open13

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

ろぐろぐ

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

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

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

ろぐろぐ
  • HTML(Legacy)・Zip(のみ選択可)で、「Convert」を押す

  • ダウンロード後に Zip を展開すると、index.html と css, images フォルダが同梱されている

  • index.html を表示すると、Figma のレイヤー階層通り div で、テキストは span でマークアップされる。div には自動的にクラスがつき、クラス名は Figma に配置した要素(オブジェクト)の数が連番で付与される。なお、画像は空の div に背景画像として配置される。

ろぐろぐ

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

よかった点

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

できなかったこと

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

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

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

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

ろぐろぐ
ろぐろぐ
  • 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 はエディタの使い方次第で除去できそうだけど、手間。

ろぐろぐ
ろぐろぐ
  • 「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 の除去や削除機能

フレームやセクションを一括で書き出せない、自動付与されるクラス名以外にインラインスタイルが所々入ってしまうため除去に手間がかかるが、別タブで表示された後、表示される要素を選択することでその部分だけのソースコードを抽出(コピー)できるのは、良いなと感じる。

ろぐろぐ

ソースコードをコピペで使えるメリット以外に、

  • ネストが深いレイヤーを個別に選択して変換する
  • div を必要なタグに指定し直す
  • クラス名をタグに変換する
  • インラインスタイルを除去する

の手間をどう考えるかによるなと思った。