TemPad Dev

Inspect panel on Figma, for everyone.

Built with WXT, TypeScript and Vue 3.

Important

On March 19, Figma removed the window.figma in view-only mode pages (which the TemPad Dev extension relies on to function properly). After our proactive communication, the Figma team promised to re-add the window.figma interface within a few weeks. During the waiting period, TemPad Dev cannot work properly in view-only mode. You can use it in edit mode by using the “Duplicate to your drafts” feature and use it in edit mode.

You can follow this post to get the latest updates.

Shows a screenshot of the extension panel.

Features

Currently supported features include:

Viewing/copying the CSS code of the selected node
Viewing/copying the JavaScript form of the CSS code of the selected node
Viewing/copying the component code of the selected component (inputted through the TemPad Figma plugin), with the ability to jump to the TemPad Playground for preview/debugging
Locking the Deep Select mode (originally requiring pressing ⌘ and clicking)
Locking the Measure to Selection mode (originally requiring moving the cursor while holding ⌥ to view)
Scrolling the selected elements back into the viewport
Toggling CSS units between px and rem (supports setting root font size)

Acknowledgements

Inspired by the following projects:

License

renyuzhuo/tempad-dev

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages