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

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

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

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

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

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

Tailwindのコード生成

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

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" プログラミング言語などの内容を、ツリー構造のデータにしたもの 括弧、セミコロン、引用符などの 意味に直接関係しない内容は含まない (抽象)

AST構築 + 文字列化 ) を使B ) ASTのフォーマット定義 + TS型ライブラ# ) ) JSXで構築できたりもする ) でHTMLにする github.com/syntax-tree/hast エコシステムが充実してI hastscripx hast-util-to-html

各レイヤーのDOMへの変換 t Auto Layout → flexboV t それ以外のFrame/Group → position: absolutu t テキスト → テキストが入った

の生成 C Figmaで画像をペーストしたりドロップしたりすると
 ができB C fillが画像ひとつのRectangle → にする
 画像データはData URLで出力 fillが画像ひとつのRectangle

File siguatureでファイル種類判定 d 画像ファイルでは、最初の数byteがフォーマットごとの
 固有の値になっていることが多い ( — d PNG → 89 50 4E 47 0D 0A 1A 05 d JPG → FF D8 F1 d Figmaプラグインでは画像データのバイナリは取れるが
 種類が取れないので、これを使って種類判定 File signature

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"

図形をまとめて にする  SVGっぽいレイヤーを判定して、まとめてSVGb  図形レイヤー (Triangle/Rectangle/Pathなど) はSV†  Frame → childrenが全てSVGっぽいレイヤーだったらSV†   node.exportAsync({ format: "SVG" }) でSVG化 メモ化再帰を使って高速h

Arbitrary Values/キーワードを組み合わせた クラス名生成 Tailwindのconfigをパース https://tailwindcss.com/docs/configuration 直に対応するキーワードがあればそれを使う なければArbitrary Valueを出力 例: 幅13px → w-[13px] 12px → w-3

コードフォーマット 6 生成されたコードを仕上げにフォーマッC 6 6 ブラウザ (Node以外の環境) で動くprettier prettier/standalonP

プラグインUIの工夫

リアルタイムプレビュー iframe + でプレビュー Tailwind Play CDN JITのクラス名も ちゃんとプレビューしてくれる Inspect というプラグインに影響された ちゃんとしたコードが生成されているかの 不安に対処

コードハイライト Prism.js でコードハイライト

クリップボードにコピー U コピーボタンでクリップボードにコピa U navigator.clipboardが使えなので一工" U document.execCommandを使 U document.addEventListener('copy') で
 コピーデータを書き込 U に感謝 seyaさんの記事

まとめ

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