Wireframer
Jim Raptis · Image · Coding
Wireframer is a free Figma plugin that fills wireframes with unique SVG placeholder art. You tweak a few settings and drop custom visuals into any layout.
About Wireframer
What Is Wireframer
Wireframer is a Figma plugin that generates placeholder artwork for wireframes. Instead of grey boxes and lorem ipsum, you get fresh SVG placeholder art you can drop straight into a layout. It's aimed at designers who want their early mockups to look intentional rather than empty, and it works as a lightweight wireframe filler for teams already in Figma.
The plugin comes from Jim Raptis, a designer who also built the Wireframer web app at wireframer.art. You pick a style, adjust the parameters, and the plugin returns a unique piece of placeholder art. From there it works for quick messy wireframes and for polished, high-fidelity screens alike. A second use case lets you generate isometric illustrations when you need something that looks more finished than a plain box.
Two things are worth knowing before you install it. It runs inside Figma, so it's a design tool rather than a standalone site. And it's a small, focused utility: it makes placeholder visuals, and that's the job. People who want layout templates, prototypes or a full design system should look elsewhere.
Getting Started
- Open Figma and go to the Wireframer plugin page in the community
- Install the plugin, then open a file and run it from the plugins menu
- Adjust the parameters, such as the style and shape, until the preview looks right
- Insert the generated SVG art into your wireframe or illustration
Product Information
A quick look at Wireframer's pricing, supported platforms, and performance.
Best for
The users, tasks, and scenarios where this tool fits best.
Users
- UI and UX designers
- Freelancers
- Design students
- Product teams
- Presentation makers
Tasks
- Filling a wireframe
- Generating isometric visuals
- Building a mockup
- Testing a layout
- Making a portfolio piece
Scenarios
- Starting a new project
- Prepping a client review
- Teaching a class
- Assembling a pitch deck
- Sketching an illustration
Key features
SVG Placeholder Generation
Wireframer's core job is turning a few settings into a unique piece of SVG placeholder art. The output is vector art, so it stays crisp at any size and drops cleanly into a Figma frame. Each result is generated fresh, which keeps a page of placeholders from looking repetitive. It is the feature that replaces the grey box.
Adjustable Parameters
You control the look with sliders and options rather than a fixed preset. The parameters let you shift the style and shape until the placeholder fits the section it sits in. That control is what separates Wireframer from a static placeholder asset. Instead of picking from a set, you tune the result.
Isometric Illustration Mode
Beyond plain placeholders, the tool can produce isometric illustrations. That suits sections where a flat rectangle reads as unfinished and a small 3D-style graphic fits better. It is a second use case on top of wireframing, and it uses the same adjustable approach. Designers reach for it when a screen needs a visual that looks considered.
High-Fidelity Support
Wireframer works for quick, messy wireframes and for higher-fidelity screens. On a rough sketch, the art gives the layout enough texture to judge spacing. On a cleaner screen, the same output looks presentable enough to share. The tool doesn't force you to pick one fidelity level before you start.
Runs Inside Figma
The plugin lives in your Figma workspace, so there's no export and re-import step. You generate the art and place it in the same file you are working in. That keeps the whole wireframing flow in one place. For teams already in Figma, it slots into the workflow they use every day.
Web App Companion
The developer also ships a web app at wireframer.art with more options than the plugin. People who want to test styles before installing, or who need a wider set of controls, can start there. It is a companion rather than a replacement, and it covers the same placeholder job with extra flexibility.
Pros and cons
Pros
- Free to install, so you can try the plugin on a real file without paying
- Generates unique SVG art each time, which keeps a set of placeholders from looking identical
- Adjustable parameters give you control instead of a fixed set of stock assets
- Isometric mode adds a second use beyond plain wireframe fillers
- Runs inside Figma with no export or re-import step
Cons
- It is a narrow tool: it makes placeholder visuals only, with no templates or prototyping
- It needs Figma to run, so you can't use it as a standalone wireframing app
- The plugin is small and its last update was in late 2019, so the feature set has stayed fixed
- Because output is random, you may need a few tries before a placeholder matches the section
Frequently asked questions
Wireframer fills wireframes with unique SVG placeholder art inside Figma. You set a few parameters and drop the result into a layout, which keeps early mockups from looking like empty grey boxes.
Related content
Explore related tools, skills, and articles for Wireframer.
Wireframer Alternatives
Tractionwave
TractionWave · Image · MarketingTractionWave is an AI attention heatmap tool for static ads. Upload a PNG or JPG and it returns predicted attention, ranked hotspots, and fixes before you spend budget.
Imejis.io
Imejis.io · Image · MarketingImejis.io is an AI design studio for agents and marketing teams. Describe an image in plain words, and it writes the copy, builds the layout, reflows it to every size, then exports a finished file.
Layoutr
Van Dijk Ontwikkeling · Image · China AILayoutr is a browser floor plan tool that scales your own plan, places furniture at true size, shows the room in 3D and renders it with AI.