$30 off During Our Annual Pro Sale. View Details »

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

hanzochang
September 13, 2022

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

hanzochang

September 13, 2022
Tweet

Other Decks in Programming

Transcript

  1. Layout Grid Browser for

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

  3. #フリーランスエンジニア #WEBディレクター出身 Yuta Hanzawa #ツール開発 #業務委託

  4. とは Layout Grid

  5. None
  6. ON

  7. 要はデザインのための補助線 デザイン系アプリで見かける 一貫性の構築 Figma,Sketch,Illustrator... ブレイクポイントの判断材料 24pxで区切った例 Layout Grid

  8. ブラウザでも使ってみたいな... を見ながら質の高いマークアップをしたい。 → カンプを見比べることなくズレに素早く気づきたい。 → カンプ作りこみたくない。マークアップで完成品を磨き込みたい。 → TailwindCSS,ChakraUIなど4の倍数で組み立てられたツールを楽に使いたい。 Layout Grid

    カンプ作成なしでマークアップだけで素早くデザインしたい。 Utility-First を快適に使いたい。 CSS Framework な
  9. 実際に作ってみた

  10. None
  11. None
  12. Layout grid for browser

  13. 実験の成果

  14. よかったこと❶ ガイドを見ながらマークアップできる

  15. None
  16. 微妙にズレてるな... とか 気付きやすい

  17. よかったこと❷ ブレイクポイントを直感的に把握できる

  18. None
  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