Layout Grid for Browser | FigmaのLayout Gridを拡張機能で実装してブラウザに持ち込んでみた話

💡 Download
Chrome web store | Layout Grid for Browser
https://chrome.google.com/webstore/detail/layout-grid-for-browser/bbdnijijeinpiofenalkidmomaibgcno

Transcript

1. Layout Grid Browser for
2. ブラウザに持ち込んでみた話 Layout Gridを Figmaの 拡張機能で実装して
3. #フリーランスエンジニア #WEBディレクター出身 Yuta Hanzawa #ツール開発 #業務委託
4. とは Layout Grid
6. ON
7. 要はデザインのための補助線 デザイン系アプリで見かける 一貫性の構築 Figma,Sketch,Illustrator... ブレイクポイントの判断材料 24pxで区切った例 Layout Grid
8. ブラウザでも使ってみたいな... を見ながら質の高いマークアップをしたい。 → カンプを見比べることなくズレに素早く気づきたい。 → カンプ作りこみたくない。マークアップで完成品を磨き込みたい。 → TailwindCSS,ChakraUIなど4の倍数で組み立てられたツールを楽に使いたい。 Layout Grid カンプ作成なしでマークアップだけで素早くデザインしたい。 Utility-First を快適に使いたい。 CSS Framework な
9. 実際に作ってみた
12. Layout grid for browser
13. 実験の成果
14. よかったこと❶ ガイドを見ながらマークアップできる
16. 微妙にズレてるな... とか 気付きやすい
17. よかったこと❷ ブレイクポイントを直感的に把握できる
19. よかったこと❸ ズレをメモ・共有しやすい
20. その場でガイドを敷いて スクショするだけ 共有が楽
21. よかったこと❶ ガイドを見ながらマークアップできる よかったこと❷ ブレイクポイントを直感的に把握できる よかったこと❸ ズレをメモ・共有しやすい
22. 他サービス解析にも使えるかな..？
23. note
24. Medium
25. AAVE
26. 少しは解析できそうな事はわかった （でもちゃんと解析に使うには機能・UIの磨き込み足りない) (ドッグフーディングしたり意見もらったりしていきたい)
27. 利用技術
28. Recoil React Chrome Extension v3 Canvas / React Konva グリッドの描画に利用。 CanvasはReactで記述できる ReactKonvaを利用。 GlobalStateの管理。 本アプリケーションの制御。 Reactで作成したアプリケー ションをChromeExtensionに てオーバーレイさせている。 利用技術
29. Extension 起動 ユーザー Extension React HTML Canvas React React Recoil が を に を が を で で と 追加 描画・制御 状態管理 利用技術ざっくり説明
30. オブジェクトのDnD処理が楽 線や矩形の描画が簡単 ＋ CSSの影響を受けない Canvasを した 利用 理由 (Extensionで既存ページにDOMを注入する相性が良い)
31. オブジェクトのDnD処理が楽 線や矩形の描画が簡単 ＋ CSSの影響を受けない Canvasを した 利用 理由 (Extensionで既存ページにDOMを注入する相性が良い) 拡張機能でのCSSの上書きは鬼門 ポップアップ型チャットツール等の CSSを がかなり大変 パクってみた参考にした
32. React Konva を うとさらに 使 ReactでCanvasを 記述し管理できる 楽
33. まとめ
34. マークアップに使えそう ChromeExtension開発に かなりつかえるぞ！ 他社サービス解析に使えそう Layout Grid React Konva Resetするの相当えぐい の Extension CSS
35. Layout grid for browser