npx skills add ecomfe/tempad-devREADME
Inspect panel on Figma, for everyone.
Key features
Inspect CSS code
Select any element, and you can obtain the CSS code through the plugin's Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.
You can configure CSS units and root font size to convert px dimensions in CSS to rem units. You can also apply a scale factor to scale px values according to your handoff requirements.
[!WARNING] Switching units only affects the output in the TemPad Dev panel, not the Figma canvas.
Deep select mode
In Figma's read-only view, selecting nodes requires double-clicking to drill down, and it often takes repeated double-clicks to select the lowest-level node. Although Figma offers a ⌘ + click shortcut, many users are unaware of this feature and need to perform extra key operations each time. Therefore, TemPad Dev provides a deep select mode in preferences.
Measure to selection mode
In Figma's read-only view, you need to hold ⌥ and move the cursor to display the spacing between other nodes and the selected node. For similar reasons to the deep select mode, TemPad Dev provides a measure to selection mode in preferences.
Scroll selection into view
When you hover over a node name section in TemPad Dev's inspect panel, a corresponding button ap
...
Publisher
ecomfe