TemPad Dev

Create, edit, and implement Figma designs with your coding agent.

TemPad Dev connects Figma with developers and their coding agents. Inspect designs and customize code output directly in the browser. Connect your agent to create and edit native Figma designs and implement UI in your codebase. In the extension: • Read CSS and JavaScript styles for the selected element. • Inspect variable references and values; configure units and scale. • Select nested layers, measure spacing, and bring a selection into view. • Use output plugins to map components and transform styles for your codebase. With a connected coding agent: • Read design structure, styles, variables, and assets to implement UI in your project. • Create screens from scratch or revise existing designs as native, editable Figma layers. • Reuse accessible components, variables, and styles when needed. TemPad Dev is free and open source under the MIT license. GitHub: https://github.com/ecomfe/tempad-dev Discord: https://discord.gg/MXGXwtkEck