Featured
Resize your boards or shapes to any aspect ratio quickly without doing the math. Resize frames by selecting a aspect ratio.
114 results
Featured
Featured
Export your color styles and generate a JSON file in Penpot Design Tokens standard format. This file gives you a solid starting point for your color system - no need to recreate everything manually.
Featured
Say goodbye to lorem ipsum — ContentMock simplifies your Penpot workflow by replacing design elements with realistic placeholder data. Quickly mock up names, numbers, and custom fields to create convincing prototypes without hassle.
Featured
Select two filled shapes in your design to quickly calculate and check the color contrast between them, helping ensure accessibility and readability.
Featured
A full-featured design token manager plugin for Penpot. Create, organize, and maintain your design tokens directly inside Penpot without leaving the workspace.
Featured
120+ vector illustrations for your design projects. Now, you can use all illustrations completely free in your designs.
Featured
Turn your Penpot designs into clean, frontend code for React, HTML/CSS, Angular, Next.js, Gatsby, & Vue with Locofy Lightning. Powered by LocoAI, convert designs into developer-friendly code that you can easily extend. 1. Convert Penpot designs to code for React, HTML/CSS, Angular, Next.js, Gatsby, and Vue 2. Auto-generate responsive, clean, modular code with support for design systems and UI libraries 3. Powered by LocoAI, which smartly identifies components, patterns, and reuses custom elements 4. Convert entire projects or specific layers, with smart code updates for edited designs 5.Preview, fine-tune, and export live code or sync directly to GitHub and VS Code via Locofy Builder *Note: The Locofy plugin can be used for free, but credit card details are needed to access it.*
Featured
This plugin generates customizable Lorem Ipsum text for your designs. Choose between paragraphs, sentences, words, or characters.
Featured
Palette Swapper is a Penpot plugin that allows you swap a color palette defined in your colors library to another in your designs. Just select the origin palette and the target palette and watch it do its magic by changing all the colors of the original palette into the ones in the target palette for your current page!
Featured
Browse and install Penpot plugins from the community. Search, filter, and discover new tools to enhance your design workflow.
Featured
The "Replace Shapes" plugin replaces any selected shapes with a copied shape, essentially pasting the copied shape over the selection and removing the originals.
Featured
Transform chaotic files into a perfectly organized canvas with one click. The ultimate plugin for people who value a clean and organized canvas. Super Tidy automatically organizes your canvas and layers with precision. Auto-align frames to customizable spacing grids. Renaming with sequential numbering and custom naming patterns. Layer sorting that matches your visual canvas layout. Flexible layout format - organize in rows or columns. Pager numbering with custom variables for presentations Note: This plugin shows a brief ad for an upgrade to its PRO plan. You can still use the free version after the ad finishes.
New
Arc & Path bends text along curves — right on the canvas, staying fully editable. Pick a text layer and bend it into a circular arc with a single angle slider, or select a text layer together with a path and the text flows along that path, each character rotated to follow the curve. Unlike outlining text to a shape, every character stays real, editable text (font, color and content remain live). Everything is non-destructive and re-adjustable: the generated group remembers its text, font and all parameters, and the original text layer is kept as the editable source — reselect the group anytime to tweak the angle, spacing, size or offsets. Great for logos, badges, seals, posters, packaging and any headline that needs to follow a shape.
Turn your Penpot designs into clean, frontend code and styling for React, HTML/CSS, Angular, Tailwind CSS, SCSS, Next.js, Gatsby, & Vue. 1. Convert Penpot designs to code for React, HTML/CSS, Angular, Next.js, Gatsby, and Vue 2. Auto-generate responsive, clean, which smartly identifies components, patterns, and reuses custom elements 3. Convert entire projects or specific layers , with smart code updates for edited designs
Export your Penpot tokens to 9 languages — from CSS to TypeScript, SwiftUI, and Flutter — and deploy them to Git. FEATURES Free - Analyze your tokens : view all Penpot token sets - Instant generation: preview and export to CSS, SCSS, and Penpot JSON - Copy with one click: copy generated code to your clipboard - Live sync: always up to date with your latest Penpot tokens - Color formats: RGB, Hex, HSL, OKLCH Pro Everything in Free, plus: - Bulk export : download all token sets as a single ZIP file - Git deployment: push files directly to GitHub, GitLab, or self-hosted GitLab - Multiple token sets in a single commit - Custom prefix: add a prefix to all exported token names (e.g., "my-app--color-primary") - Auto pre-filled commit messages, editable before pushing - Customizable branch and target directory - Extra languages: Tailwind v4, TypeScript, DTCG (W3C), Flutter, Jetpack Compose, SwiftUI - Advanced color formats: Display P3, LCH, LAB, OKLAB - Manage your subscription from the Settings tab GIT INTEGRATION & SECURITY Easily manage your Git providers: - Add a new provider - Edit the settings of an existing provider - Delete a provider if it's no longer needed When saving a Git provider, the following fields are available: "token", "owner", "repository", "branch", "basePath" and "host" (for self-hosted GitLab). Your Git provider details are stored locally on your machine for privacy and security. FILE STRUCTURE - A separate file is generated for each token set - Files follow the naming pattern: "{tokenSetName}.{extension}" (e.g., "colors.css", "spacing.ts") TOKEN TRANSFORMATIONS Penpot tokens are transformed to ensure they are valid for each target language: - Slashes ("/") and spaces are replaced with hyphens ("-") in token names - Original casing of token names is preserved (uppercase, lowercase, etc.) - For numeric tokens ("FLOAT" type), the unit "px" is automatically added - Tokens are sorted alphabetically NO TOKEN FILE REQUIRED In a typical design -token workflow, tokens are exported from Penpot to DTCG JSON, then transformed again through a tool like Style Dictionary to produce final code. This plugin cuts that pipeline to one step. It generates production-ready code directly from your Penpot tokens — no intermediate JSON file, no extra transformation tool. Commit the output and it becomes your version-controlled source of truth. UI & ACCESSIBILITY - Dark mode compatible: adapts to Penpot theme preference - Keyboard navigation: all interactive elements support keyboard use - Focus indicators: clear visual focus on form fields and interactive elements - Accessibility compliance: designed following W3C and A11Y best practices HOW TO USE 1. Export — Go to the Export tab, pick a language (CSS, SCSS, Penpot JSON, or Pro languages), select a token set, then copy or download your tokens . 2. Deploy (Pro) — Add a Git provider in Settings, then go to Deploy to push your files to GitHub or GitLab with a single click. QUESTIONS & SUPPORT Have a question or found a bug? Reach out on GitHub Discussions https://github.com/figma-css- variables/community/ discussions Report an issue https://github.com/figma-css- variables/community/issues
A Penpot plugin that turns the selected bitmap image (a PNG/JPG inside an Image shape, or any shape with an image fill) into editable SVG paths and inserts them back into the canvas.
A Penpot plugin that turns the current selection (boards, groups, or shapes) into an animated GIF. Each selected item becomes one animation frame.
Select any image in Penpot, brush over what you want gone, and watch it disappear. What it can erase? Watermarks, logos, people, objects, text, clutter - anything you don't want removed from your photo. Why designers use this: - Clean up product photos without leaving Penpot - Remove unwanted objects from mockups - Touch up images in your workflow Adjustable brush size. Works on any image. Free to use. Built with advanced AI inpainting - same tech used by professional photo editors, now in your Penpot workflow.
Bring your color palettes from ColorSlurp into Penpot in seconds. Export your palette as JSON in ColorSlurp, paste or drop it into the plugin, pick the colors you want — and import them directly into your local color library.
Build a solid design system foundation in seconds instead of spending hours or days setting one up from scratch. Start by selecting a base foundation. from there, you can either deploy it instantly or take a moment to tweak it. adjust colors, typography, spacing, tokens, whatever you need before pushing it live. The idea is speed without losing control. Quick if you want it, precise if you need it.You can export your tokens to json or css so they’re ready for development, not just sitting in design files. If you want to clean things up, you can delete themes or token sets directly from the plugin without digging around. Simple start, flexible system, no unnecessary friction.
Generate design.md skill files for AI tools using a local configurator for Penpot and set up colors, typography, spacing, branding, and other style guidelines for the skill manifest. Designers and developers should share a common skill file between projects so that whenever AI is being used to develop either code or design it will reference the design md file. The skill file manifest itself is based on the official TypeUI configuration which is open-source.
Professional mockup generator with 5000+ device and print mockup scenes. Select a frame in Penpot, choose a scene, and export a ready-to-use mockup without leaving the canvas. Browse the full mockup library inside the plugin. Phones, laptops, tablets, monitors, posters, books, packaging, and more. Adjust backgrounds, reposition your artwork, crop. The kind of tweaks that used to mean opening a separate tool. Free mockup collection included. Preview everything, export from the free set at no cost. Premium gives you the full library, unlimited exports, and a commercial license for client work, case studies, and marketing. Monthly or annual subscription, cancel anytime.
Penpot AVA is an AI-powered design assistant that lets you control the Penpot canvas through natural language. Connect any OpenAI-compatible API (OpenAI, local models via Ollama, etc.), then just describe what you want - AVA reads the canvas, plans the changes, and executes them directly. No copy-pasting code, no manual shape hunting. Designers who want to move fast, explore ideas quickly, or automate repetitive layout work will feel right at home.
IconFlow is a seamless icon library plugin designed specifically for Penpot. It streamlines your design workflow by allowing you to search, browse, and insert high-quality SVG icons directly into your Penpot projects without ever leaving the workspace. Whether you're building a quick wireframe, a complex user interface, or a full design system, IconFlow gives you instant access to the essential icons you need, boosting your productivity and keeping you in the creative zone.
It convert a coded prototype or landing page into a Penpot design file for iteration - Import HTML email templates into Penpot for visual editing - Turn Tailwind CSS component libraries into reusable Penpot design assets - Bring an existing website section into Penpot to redesign or annotate it - Convert AI-generated HTML (from ChatGPT, Claude, v0) directly into editable design layers - Bridge the gap between developers and designers by going from code back to design - Quickly mock up design variations starting from a working HTML reference.
AI-powered image processing tools right inside Penpot. Remove backgrounds instantly, upscale images up to 4x and erase unwanted objects. Faster and cheaper than alternatives—20 free credits every month, no credit card required.
Export assets with export profiles directly to GitHub. Supports PNG, SVG, JPEG, WEBP with configured scales. Validates connection before upload. Settings persist between sessions. Direct GitHub upload — Exports go straight to your repo, no manual steps Respects export profiles — Uses each element's configured format, scale, and suffix Connection validation — Checks token, repo access, and branch before exporting Persistent config — Saves your settings between sessions Fail-fast — Stops on first error with clear feedback.
The plugin turns a text description in to Penpot shapes. It currently supports a fine-tuned OpenAI model and anyone who wants to quickly start a project
Status manager for Penpot: manage tasks and design processes. 20+ statuses (🟢Done, 🟡In progress), instant update, batch editing of layers.
WCAG Color Palette Manager for Apps & Websites Create, manage, export, and publish accessible color palettes for Penpot. Uses alternative color spaces (LCH, OKLCH, OKLAB, HSLuv) to ensure WCAG compliance and sufficient contrast. ____________________________________________________________ Create palettes in seconds Generate from images, AI, the canvas, or the color wheel Import color combinations from Coolors and Colour Lovers (1M+ palettes) Use preset systems: Material 3, Ant Design, Tailwind, or custom Manage accessible colors Check contrast with WCAG 2.1 and APCA Build light, dark, or colorblindness modes Convert shades to transparency Sync & export Sync colors to local styles and tokens directly from your palette Generate Tailwind configurations (V3 & V4) and CSS / SCSS custom properties Export as W3C Design Tokens (DTCG) for any token-driven pipeline Publish & share Store palettes in the cloud (works across Figma, Penpot, Sketch, and Framer) Share and discover community palettes
