Design Tooling · 2023
Figma Content Populator
A design workflow tool that helps designers turn static Figma layouts into realistic, content-rich mockups in seconds.
Year
2023
Role
Designer & Builder
Focus
Plugin design · Workflow tooling · Layer system
Select frame
in Figma
Search article
in plugin
Preview content
title, image
Replace frames
one or all
Realistic mock
for review
Select frame
in Figma
Search article
in plugin
Preview content
title, image
Replace frames
one or all
Realistic mock
for review
Problem
Designers often need realistic mockups, but populating those mocks with real content is repetitive and slow. Copy-pasting headlines, swapping images, updating bylines, all done by hand, every time, for every card variant.
The deeper problem was that placeholder content made design reviews less useful. Lorem ipsum hides wrapping issues. Grey boxes hide hierarchy problems. Static mocks built with fake data don't reveal the edge cases that matter.
Real content creates better design conditions. It surfaces layout failures, visual imbalance, and truncation issues that only appear when the content is real.
Tags
Built with
- TypeScript
- React
- Figma Plugin API
- Layer-name mapping system
- Article data schema
Design Question
How might we let designers populate Figma frames with real content instantly, without interrupting their workflow?
Layer Mapping
The plugin uses Figma layer names as the mapping contract. Article data fields are matched to layers by name, with no configuration required. Designers simply name their layers consistently and the plugin handles the rest.
Article data
title
text
image
image
author
text
publishedAt
text
section
text
Figma layer
#headline
named layer
#image
named layer
#byline
named layer
#date
named layer
#label
named layer
Before & After
The difference between placeholder and real content isn't cosmetic. Real content reveals hierarchy, tests truncation, and makes design reviews actually useful.
Before
Placeholder content
After
Real article content
Plugin UI
The plugin panel lives inside Figma. Search for an article, preview the content, then choose to replace the selected frame or populate all matching cards at once.
How AI is reshaping design workflows
Technology
The future of cross-platform design systems
Product
Building for scale: lessons from Figma
Engineering
System Logic
When a replacement is triggered, the plugin traverses the selected frame's child nodes, matches layer names to article fields, and applies text or image content. Missing layers are skipped silently. The system is tolerant of variation across card types.
Selected frame
Traverse children
Match layer names
Apply text / image
Skip missing layers
Key Decisions
Frame-based workflow
The plugin operates on selected frames, not individual layers. This kept the interaction model simple (select a card, search, replace) and made it easy to support both single-card and bulk replacement without changing the mental model.
Layer-name mapping
Rather than requiring designers to configure a schema, the plugin uses named Figma layers as the contract. A layer named #headline receives the headline. This kept setup cost near zero while still being flexible enough to handle different card structures.
Replace one / replace all
Two distinct actions for two distinct needs. Replace one lets designers review a single populated card before committing. Replace all handles bulk population across repeated card components, covering both careful review and fast iteration.
Graceful handling of missing layers
Not every card has every field. Missing layers are silently skipped rather than erroring, which means the plugin works across different card variants without needing a separate configuration per component type.
Outcome
Seconds
Time to populate a card
Down from minutes of manual work
Zero config
Setup required
Layer names are the contract
Any card
Component compatibility
Works across variant structures
Reflection
Internal tools need good UX too. The plugin sat at the intersection of product design and implementation: I designed the workflow, defined the interaction model, created the layer mapping logic, and built it. The constraint of working within the Figma Plugin API shaped every decision. The result was a reusable tool that changed how the team evaluated layouts, not by adding process, but by removing friction from the right moment.