Showcase Your Work

What if your Figma file was the actual source of truth and the codebase just auto-followed?I am Alexander and I created a plugin to test this idea after our team spent three weeks arguing about spacing tokens. Someone kept using 16px in the React components while the design system clearly said our spacing-md was 12px. The manual translation between our local variables and the GitHub repository was causing constant friction.So I made a tool that just pushes Figma variables straight to a pull request.That one change deleted an entire Slack channel dedicated to UI bugs. It also saved us roughly four hours of manual code reviews every single week.You can grab Design System Sync on Figma Community: https://www.figma.com/community/plugin/1561389071519901700?utm_source=figma-forum&utm_medium=post&utm_campaign=botCheck out the website here: https://ds-sync.netlify.app?utm_source=figma-forum&utm_medium=post&utm_campaign=botHow do you currently spot drift between your Figma varia

So I took the absence of figpals into my own hands and gave one of them a facelift.Dis Dennis.

Hi Figma community,I’m a product designer and I built Source → Design after repeatedly running into the same workflow problem:AI tools and frontend teams can create a working interface in HTML or React very quickly, but bringing that result back into Figma usually means rebuilding it manually.Source → Design converts HTML and frontend project files into clean, editable Figma designs with structured layers, text, colors, typography and layout preserved.It supports HTML, React, Next.js, Vue and Svelte projects.The goal is simple: make it easier to keep iterating in Figma when the interface already exists in code or the original Figma file is missing.I’d genuinely love feedback from designers and frontend teams using real projects.→ Try it here:https://www.figma.com/community/plugin/1671982756700161071→ More details:https://sourcetodesign.com

Hey everyone — I’m the developer behind Shape Forge 3D, a local 3D design studio built directly into Figma.It started with a simple frustration: I wanted to turn an SVG, logo or a piece of type into a polished 3D visual without opening Blender, sending assets to a renderer or rebuilding the same thing in another app.With Shape Forge 3D, you can start from a built-in shape, icon, your own SVG or custom text — then turn it into an art-directed 3D object right on the canvas.You can create:• extruded SVG logos and symbols• chrome, glass, gummy, clay and holographic 3D icons• 3D typography, Y2K titles and dimensional lettering• custom 3D objects from your own vector shapes• 4K transparent PNG renders for presentations, campaigns and social visualsThe latest update adds 2,929 curated SVGs across 11 libraries, including Y2K+, Brutalism, Retro Future, Blobs and Line Art — plus your own persistent SVG library and direct vector import from the Figma canvas.Everything is processed locally: no clo

Right now, it contains five utilities I originally built to solve problems I kept encountering in my own design work:Normalize inconsistent property values Add controlled variation Build components and variants Distribute layers along paths Save and restore selectionsIt’s meant for the small jobs that shouldn’t eat an afternoon. I’d really appreciate any feedback re: what feels useful, what feels confusing, what just doesn’t seem to be working, or what repetitive Figma tasks I should tackle next.[ Aaron's Toolbox in the Plugin Store ]Playground:  

Hi everyone — I just published my first plugin and would love your feedback. **html2figma** converts a dropped .html file into native Figma layers: - Real text layers with font family, weight, size, line-height, letter-spacing and alignment- Fills, linear/radial gradients, borders, per-corner radii, shadows and blur- Inline SVG imported as editable vectors- Pixel-faithful positions read from the browser's rendered layout — flex, grid, floats all land exactly- A tidy layer tree: wrapper divs collapsed, layers named semantically (Section, Button, or by text content)- Full RTL support — tested on complete Arabic pages Privacy: everything runs locally in the plugin; your file is never uploaded. Tip: to import a live site, save it with the SingleFile browser extension first, then drop the file. Direct URL import is on my roadmap, along with batch import. Install: https://www.figma.com/community/plugin/1668745510469345388Site: https://html2figma.com I'll be in the comments — bug reports and

Lately, I've been pushing myself to explore what's possible with Figma Motion and see just how far I can take animations without leaving Figma.I recently came across a really smooth WhatsApp animation and thought, why not recreate it? So I challenged myself to build it from scratch, paying close attention to the timing, easing, and micro-interactions.It's been a fun way to learn, experiment, and sharpen my motion design skills.How do you think it turned out? 👀Check it out!I'd love to hear your feedback!

Hi everyone 👋I’m Hà, a graphic designer who works in Figma every day.Whenever I wanted to add a real sense of speed to a poster, product visual, typography piece, or social graphic, a regular layer blur was rarely enough. I needed a trail with a clear direction—sometimes straight, sometimes curved—and usually ended up switching to another tool just to create it.So I built Motiv Blur.Motiv Blur lets you turn almost any layer, group, or frame into a customizable motion trail without leaving Figma.How it worksSelect a layer, open the plugin, then drag the TAIL and HEAD handles to control the direction and length. Bend the path using Bézier handles, adjust the look of the trail, and click Apply.What you can control Straight or curved trails — shape the motion using an editable Bézier path Direction and distance — drag the endpoints or enter exact values Tail and head size — scale the trail from 10% to 200% Tail and head clarity — create an even trail or gradually fade either end T

Hi everyone. After months of building I published Flow Pro, a plugin that wires user flows directly in Design files. What it does:- Select screens, press Connect: every arrow is drawn at once, no crossings.- Arrows keep right angles and one of four shapes (straight, L, Z, U), so the diagram reads like a schematic, not spaghetti.- Move a frame and the wires follow live. Ports stay where you put them.- One style for the whole diagram: colour, thickness, corner radius, caps, dashes, labels.- Sections, components and instances work as nodes; hidden layers are ignored. Free to try (30 connectors). I would love feedback from people who map flows daily: what is missing, what feels wrong. https://www.figma.com/community/plugin/1666194024247251759/flow-pro-arrows-connectors-user-flows

Large PDFs exported from Figma can quickly become difficult to email, upload or share with clients. I built BatchPDF to create polished, highly compressed multipage PDFs directly from Figma.We have tested BatchPDF in a live, high volume marketing production studio where teams produce large photography and campaign production briefs.In one real production test, the same 52 page Figma document exported at around 90 MB using another well known PDF plugin. With BatchPDF, the result was approximately 15 MB while maintaining perfectly usable image quality. That is roughly an 83% reduction.BatchPDF includes simple presets for Print, Balanced and Small File. If you need an even smaller PDF, Custom settings give you direct control over image resolution in PPI and JPEG compression. This makes it possible to balance file size and image quality for each document.BatchPDF is built for designs that use your own custom fonts. Supported text can remain selectable and searchable, while vector elements

🚀 Invitation for Collaboration — Ruty Architect Project We are building the future of AI-assisted architecture. Ruty Architect was born to be an open and modular platform that unites Architecture, Engineering, BIM, GIS, Artificial Intelligence, Digital Twin and technical documentation in a single work environment.  Our goal is not to create just one more CAD or BIM software.  We want to develop an intelligent co-pilot for construction professionals, capable of analyzing projects, identifying inconsistencies, organizing documentation, collaborating with multidisciplinary teams and supporting technical decisions throughout the life cycle of a building. We are looking for people passionate about technology, design, engineering and innovation to participate in the construction of this ecosystem.  Engineering Intelligence for the Real World

Figma's export dialog stops at PNG, JPG, SVG and PDF — so getting web-ready assets usually means a chain of extra tools: convert to WebP elsewhere, compress, rename to a convention, sort into folders, zip. Featherlight does that whole post-export pipeline inside Figma, in one pass, entirely offline (zero network access, verified by the badge on the listing). - WebP / JPG / PNG (lossless or lossy) / SVG with a live before/after size preview- Every selected frame at 0.5x–4x in one run, automatic @2x suffixes- Rename patterns, kebab/snake case, slashes become real ZIP folders- Bundle as ZIP or one multi-page vector PDF Real run from the demo video: 9 frames to 18 WebP files, 9.12 MB down to 1.15 MB (-87%). 7-day free trial with every feature unlocked, then a one-time purchase — no subscription. It's a one-person indie project: I read every comment, and feedback and feature requests directly shape what gets built next. https://www.figma.com/community/plugin/1665932150476150859/featherlight

I found this amazing free, you just need page url and it will convert the website to editable figma design.You can see the detail in video guidehere you can find to website: https://page2figma.com/

Figma has no native way to apply opacity to an aliased colour variable without breaking the link and forcing you back to hardcoded hex values. To handle hover states, alert tints, or Material Design elevations, you are forced to bloat your library with dozens of duplicate variables.I built Sheer to solve this exact architectural bottleneck. It adds an automated, non-destructive opacity modifier layer to your workflow, here are its key features:  Token Mode: Type target steps (such as 8, 12, 20, 50) and instantly batch-generate clean, linked opacity scales directly from a base primitive variable. Quick Apply: Drop transparency onto individual component fills or strokes right on the canvas without polluting your library or breaking the core reference link. Smart Sync: If a master brand primitive changes, Sheer audits the file and repairs all dependent opacity tokens in a single click. Dev Mode: Automatically outputs production-ready CSS variables using native color-mix() syntax dir

I wanted to share a project I’ve been building solo over the last 4 months: TokenIgnite. It started with a simple question I asked myself: What if changes to Figma variables were visible in a running web app just as directly as tweaking CSS variables in browser DevTools? I built a proof of concept, but then had to ask myself an honest question: With Figma Code Connect, MCP servers, and Code Layers, who actually needs this? The Shift: Making Design Decisions in the Runtime FirstWith AI-driven workflows, layout code is generated faster than ever—yet LLMs lack visual awareness of the running app, causing design drift. At the same time, traditional token pipelines force teams to wait on builds just to validate minor tweaks. TokenIgnite introduces a paradigm shift: What if we make design decisions in the live runtime first before committing anything to a single source of truth? And what if we—and our AI agents—collaborate without any pipeline boundaries? How TokenIgnite works:TokenIgnite re

I work on Arabic and multilingual product interfaces, and I kept running into the same problem: converting an LTR design to RTL was rarely just a visual flip.Horizontal Auto Layout with Wrap is a good example. Reversing the child order can align the first row, but it does not reliably fix the direction of every wrapped row. It can also make responsive components harder to maintain.I built RTLAuto to handle this workflow inside Figma.Who RTLAuto is for:- Product designers maintaining Arabic and English versions- Design-system teams working with reusable components and variants- UX and UI agencies delivering multilingual products- Product teams building for Arabic, Hebrew, Persian, or Urdu markets- Anyone spending too much time rebuilding RTL screens manuallyIn version 1.3.1, the current conversion path has dedicated support for:- Horizontal Auto Layout with Wrap- Nested Auto Layout- Reusable components and direction variants- Responsive wrapping without absolute positioning- Directional

Hey everyone Sharing the design process behind a recent education app our team worked on, because a few of the Figma-specific decisions genuinely changed how the product turned out—and I'd love feedback from folks who design learning products.I'm part of the design team at Dev Technosys, and a significant chunk of our work is education app development, so student-facing flows are something we think about a lot. This post is about the design side: how we used Figma to prototype, test, and hand off a K–12 learning app without drowning students in UI.The core problem: cognitive loadThe greatest challenge in any education app isn't feature count — it's attention. Students (especially younger ones) drop off the second a screen feels busy. Our north star for the whole file became one primary action per screen.That single rule drove most of our Figma structure.How we set it up in Figma1. A tokenized design system first, screens second. We built color, type, spacing, and elevation as variables

I've pasted #0F172A into a variables file roughly eighty times this month. Every time we tweaked our dark mode contrast, I was the one manually updating theme.ts and waiting for the GitHub action to run. Tracking down a rogue #111827 that sneaked into a border utility was driving me slowly insane.I'm a UX engineer, so I finally built a plugin to push Figma tokens straight to the repository. We actually deleted our entire tokens Slack channel last week because the pull requests just generate themselves with visual diffs now.You can try Design System Sync here:https://www.figma.com/community/plugin/1561389071519901700?utm_source=figma-forum&utm_medium=post&utm_campaign=bothttps://ds-sync.netlify.app?utm_source=figma-forum&utm_medium=post&utm_campaign=botHow often do your developers accidentally hardcode colours instead of using your variables?

Figma Plugin Link :- https://www.figma.com/community/plugin/1656620010944492160/dreamui-ai-ui-generator-design-system-wireframe-generator-ai-design-copilot-tokens-html✨ "DreamUI" Figma Plugin Features List 🎨✦ GenerateType a text prompt and instantly build a complete editable UI screen 🪄.🧠 Product DesignerGenerates a whole connected product with multiple linked screens working together 🔗.📸 ScreenshotRebuilds any pasted screenshot into real, fully editable Figma layers instantly 🖼️.🧑‍💻 CodeConverts your generated Figma design into actual working developer-ready code 💻 output.🧭 FlowMaps a written user story into a complete wireframe flow visualization 🧩.🪄 CopilotChat-edits whatever is currently selected on your canvas using natural conversation ✍️.🧩 Design ContinuationExtends a selected section with new, matching sections generated automatically by AI 🔄.🎨 Design RemixTurns one selected screen into 5–10 completely restyled redesign variations 🌈 instantly.🔍 Design CriticDel

TL;DR I'm a student and I made an accessibility plugin. Looking for people willing to test it and give feedback on what to improve and features you'd like to see, in exchange for lifetime Pro. Email perceivable@cyberdesk.topI'm a student and I made a Figma plugin called Perceivable. It checks a page or selection against WCAG (contrast, target size, alt text, heading order, focus order) and can fix the contrast and target-size ones in one click. It runs fully in Figma, so nothing leaves your file.It's early and I'd like feedback before I take it further. If you're willing to try it on real work and tell me what to improve, I'll send you a lifetime Pro key. It's for personal use, and I'll revoke it if it's shared.Email perceivable@cyberdesk.top and I'll send the plugin and a key. Thanks.

Hi everyone 👋I'm Hà, a graphic designer who works in Figma every day. And for the longest time, one thing kept sending me back to Photoshop: I just wanted to grab a layer and transform it — bend it, skew it, add some perspective — without jumping between tools.Figma is brilliant for a lot of things, but if you do graphic work — banners, posters, packaging, social assets — you've probably hit the same wall. So I built the plugin I kept wishing existed.What Free Transform doesSelect any layer, hit the plugin, and transform it the way you would with Ctrl+T in Photoshop:Scale, Rotate & Skew — drag any handle, no constraint-wrestling Distort — pull all four corners freely Perspective — real depth, in any direction Photoshop-style warps — Arc, Arch, Fish, Wave, Rise, and Twist Export as raster or vector — keep it crisp, or keep it editable Clean results — no mesh artifacts or seams, even on shadows and semi-transparent areasAll of the above is in the free version. No trial countdown, no

We are thrilled to announce that JMPY.me is now available to help you streamline your workflow across the entire Figma ecosystem! Whether you are designing, presenting, or collaborating, you can now generate branded, trackable links and fully customized, dynamic QR codes without ever leaving your canvas. 🚀 Why JMPY.me?Generic URLs can look untrustworthy and hurt your click-through rates. JMPY.me is an AI-native link management platform built specifically for creators, designers, and marketing teams. We make it effortless to turn your canvas URLs, slide decks, or specific frame coordinates into professional assets that drive engagement and save your time. Create and insert in canvas immediately with one click. 🎨 Key Features at a Glance Universal Compatibility: Works seamlessly across Figma Design, FigJam Boards, Figma Slides, and Figma Buzz. Branded Short Links: Instantly shorten long URLs using your own custom domains. Perfect for keeping your professional branding consistent. C

Hey folks! Check out my Color Contrast plugin! It reports contrast using WCAG 2, BPCA, and APCA algorithms, and now includes a new Audit Mode to analyze entire frames at once. Unlike other contrast plugins, it considers the foreground alpha channel for accurate contrast calculations. Demo:

Hi Figma community,I built Figma to PowerPoint Exporter for a very specific handoff problem: teams design presentation-like frames in Figma, but clients, sales teams, and internal stakeholders still ask for PowerPoint files.Try it on Figma Community:https://www.figma.com/community/plugin/1650059775290729168/figma-to-powerpoint-exporterWhat it does:Exports selected Frames, Groups, Components, Instances, and Sections to .pptx Editable mode keeps text, simple rich text, basic shapes, images, linear gradients, shadows, and line endings editable where possible Fidelity mode exports image-based slides when visual match matters more than editability Export reports call out what stayed editable and what fell backWhere it helps: Client decks Sales decks Internal reviews Figma-to-PowerPoint handoff Presentation templates that need later editing in PowerPointHonest limitations:Complex masks and vectors may fall back to images Blur is approximate Auto Layout is visual-only in PowerPoint Fidelity m