Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FigmaからTailwind HTMLを 生成するプラグインの開発

FigmaからTailwind HTMLを 生成するプラグインの開発

Ryohei Ikegami

September 07, 2022
Tweet

More Decks by Ryohei Ikegami

Other Decks in Programming

Transcript

  1. FigmaからTailwind HTMLを 生成するプラグインの開発 2022-09-07 Figmaお楽しみトーク Vol.2 @seanchas_t

  2. @seanchas_t (しゃなはす) フリーランスエンジニア Webフロントエンド、ちょっとUIデザイン Design to Code に興味あり

  3. Tailwind HTML/JSXを生成する
 Figmaプラグイン

  4. github.com/seanchas116/figma-to-tailwind で開発中 FigmaのレイヤーをHTML+Tailwindに変換するプラグイン Figma Communityには未リリース

  5. Tailwindについて " クラス名だけで自由なデザインが
 表せるCSSフレームワー3 " →コード生成と相性がよさそr " ある意味SVGっぽい
 HTMLだけでデザインが完結す る

    https://tailwindcss.com/
  6. Arbitrary Values W Tailwindはソースファイルに含まれる文字列からCSSセレクタを自動生成
 → クラスに任意の値を書いてスタイルに適用できる (Arbitrary Values) Figma上のデザインを高い精度で再現できる!

  7. Tailwindのコード生成

  8. コード生成の処理 ' AST構) ' AST → HTML/JSX文字列 ' Prettierでコードフォーマット

  9. AST (抽象構文木) とは < = > < >Item1</ > <

    >Item2</ > < >Item3</ > </ > ul li li li li li li ul class ”text-black” { : , : { : }, : [ { : , : [ ] }, { : , : [ ] }, { : , : [ ] }, ], }; tag props class children tag children tag children tag children "ul" "text-black" "li" "Item 1" "li" "Item 2" "li" "Item 3" プログラミング言語などの内容を、ツリー構造のデータにしたもの 括弧、セミコロン、引用符などの 意味に直接関係しない内容は含まない (抽象)
  10. AST構築 + 文字列化 ) を使B ) ASTのフォーマット定義 + TS型ライブラ# )

    ) JSXで構築できたりもする ) でHTMLにする github.com/syntax-tree/hast エコシステムが充実してI hastscripx hast-util-to-html
  11. 各レイヤーのDOMへの変換 t Auto Layout → flexboV t それ以外のFrame/Group → position:

    absolutu t テキスト → テキストが入った<div& t fillが画像ひとつのRectangle → <img& t Pathなどの図形 → まとめて <svg> にする
  12. <img>の生成 C Figmaで画像をペーストしたりドロップしたりすると
 ができB C fillが画像ひとつのRectangle → <img>にする
 画像データはData URLで出力

    fillが画像ひとつのRectangle
  13. File siguatureでファイル種類判定 d 画像ファイルでは、最初の数byteがフォーマットごとの
 固有の値になっていることが多い ( — d PNG →

    89 50 4E 47 0D 0A 1A 05 d JPG → FF D8 F1 d Figmaプラグインでは画像データのバイナリは取れるが
 種類が取れないので、これを使って種類判定 File signature
  14. const const await if return else if return image =

    figma.getImageByHash(fill.imageHash); bytes = image.getBytesAsync() (bytes[ ] === && bytes[ ] === && bytes[ ] === ) { + Buffer.from(bytes).toString( ); } (bytes[ ] === && bytes[ ] === && bytes[ ] === ) { + Buffer.from(bytes).toString( ); } ... 0 0x89 1 0x50 2 0x4e 0 0xff 1 0xd8 2 0xff "data:image/png;base64," "base64" "data:image/jpeg;base64," "base64"
  15. 図形をまとめて <svg> にする  SVGっぽいレイヤーを判定して、まとめてSVGb  図形レイヤー (Triangle/Rectangle/Pathなど) はSV† 

    Frame → childrenが全てSVGっぽいレイヤーだったらSV†   node.exportAsync({ format: "SVG" }) でSVG化 メモ化再帰を使って高速h
  16. Arbitrary Values/キーワードを組み合わせた クラス名生成 Tailwindのconfigをパース https://tailwindcss.com/docs/configuration 直に対応するキーワードがあればそれを使う なければArbitrary Valueを出力 例: 幅13px

    → w-[13px] 12px → w-3
  17. コードフォーマット 6 生成されたコードを仕上げにフォーマッC 6 6 ブラウザ (Node以外の環境) で動くprettier prettier/standalonP

  18. プラグインUIの工夫

  19. リアルタイムプレビュー iframe + でプレビュー Tailwind Play CDN JITのクラス名も ちゃんとプレビューしてくれる Inspect

    というプラグインに影響された ちゃんとしたコードが生成されているかの 不安に対処
  20. コードハイライト Prism.js でコードハイライト

  21. クリップボードにコピー U コピーボタンでクリップボードにコピa U navigator.clipboardが使えなので一工" U document.execCommandを使 U document.addEventListener('copy') で


    コピーデータを書き込 U に感謝 seyaさんの記事
  22. まとめ

  23. Tailwindのコードを生成するFigmaプラグインを作っている Figma to Codeに共通しそうな知見をまとめた UIの工夫やリアルタイムプレビューなどで使い勝手を高めてみた 近いうちにFigma Communityにリリースします!