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

イベント: Figmaお楽しみトーク Vol.2
https://friends.figma.com/events/details/figma-tokyo-presents-figmaole-shimitoku-vol2/

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にリリースします!