DEV Community: Doong Yee

HTML to design is solved. Editing is not.

Doong Yee — Wed, 14 Jan 2026 13:00:38 +0000

Over the past year, HTML-to-Figma tools have improved a lot.
Tools like html.to.design already do a solid job:

You paste a URL
You get a structured Figma file
Layouts, constraints, spacing — mostly correct
For many use cases, that part of the problem is already good enough.

But after using these tools repeatedly in real projects, I realized something:

The import wasn’t the problem.
The manual fixing was.

The real bottleneck starts after the import

No matter which tool you use, the result is rarely “done”:

Spacing is close, but not perfect
Auto layout needs regrouping
Components should be simplified
Designers still spend 20–30 minutes cleaning things up
PMs and devs still ask: “What’s the structure here?”

Ironically, the more accurate the import becomes, the more obvious the next problem is:

Editing imported designs is still slow and manual.

That’s the part I decided to focus on.

Instead of parsing better, what if we fixed designs with AI?

When I started building Pixlore, I deliberately did not try to outdo existing HTML parsers.

Instead, I asked a different question:

What if you could just talk to the design and ask it to fix itself?

So Pixlore treats HTML-to-Figma as a starting point, not the finish line.

After importing a website, you can use natural language to:

Adjust spacing and alignment
Regroup or simplify layouts
Modify structure for responsiveness
Replace visual styles
Add UX annotations for handoff and review

No manual clicking through layers.
No rebuilding auto layout node by node.

Just describe what you want changed.

This isn’t about replacing other tools

Pixlore isn’t trying to replace tools like html.to.design.

They solve a different part of the workflow — and they do it well.

Pixlore focuses on:

What happens after the import
How fast you can iterate
How easily you can explain designs to others

Different tools optimize for different bottlenecks.

In practice, many designers already chain multiple plugins together.
Pixlore simply makes the editing part dramatically faster.

Why pricing mattered to me as a builder

One more thing I cared deeply about: price justification.

As an indie designer/developer myself, I wanted a tool that:

I could afford monthly
I wouldn’t hesitate to keep installed
Felt reasonable even for light usage

That’s why Pixlore is priced lower than many comparable tools — especially during early access.

Who Pixlore is for

Pixlore works best if you are:

A designer doing audits, redesigns, or competitive analysis
A PM who wants clearer structure and annotations
A developer who wants design intent explained, not just visuals
Anyone tired of “almost-right” imports that still take forever to clean up

What’s next

Pixlore is now live on Figma Community, and we’re actively shipping new features, including:

AI-powered design annotations
AI-assisted design reviews
Better multi-breakpoint handling

Long-term, the vision is simple but ambitious:

A no-code pipeline from requirements → design → code → shipped product.

If you’re already using HTML-to-Figma tools and still spending too much time fixing layouts afterward, I’d love to hear your thoughts.

Pixlore is available now, with free trials and early-user pricing.
Your feedback will directly shape where it goes next.

Thanks for reading :)

Pixlore — Turn Any Webpage into Editable Figma Layouts (Great for Dev–Design Workflows)

Doong Yee — Mon, 08 Dec 2025 14:05:23 +0000

If you’ve ever had to rebuild a webpage in Figma — for refactoring, design audits, redesign proposals, onboarding, or component extraction — you know how much time it takes to manually reconstruct spacing, structure, and styles.

As someone working at the intersection of UX and engineering, I’ve always felt this workflow should be faster.

So we built Pixlore, a Figma plugin + browser extension that turns any webpage (or HTML) into a clean, editable Figma layout — and adds AI-powered editing on top of it.

This post walks through what it does, why developers use it, and how it fits into real engineering workflows.

Why Devs Use a “Web → Figma” Workflow

Most developers work with existing interfaces:

auditing UI before refactoring
reverse-engineering a competitor or legacy interface
aligning UI structure with design systems
onboarding teammates to a product
rebuilding or optimizing sections of a site

But manually recreating:

flexbox/grid behavior
spacing logic
component structure
typography scale
color tokens
responsive constraints

…is repetitive and error-prone.

Pixlore automates this layer.

What Pixlore Does

1. Converts a live webpage into structured Figma layers

Pixlore parses:

DOM hierarchy
CSS properties
flex/grid layout
spacing + padding
components + nested groups

And rebuilds them as:

Auto Layout frames
component-like structures
accurate spacing
text styles & tokens
color styles

So the output is not a screenshot — it’s editable, semantic, and predictable.

2. Works on dynamic or authenticated pages

With the Pixlore browser extension, you can capture:

dashboard states
login-protected pages
infinite scrollers
internal tools
React/Vue/Next.js sites behind auth

Useful for audits, redesigns, and documenting flows.

3. AI Editing: Modify layouts with natural language

This is where Pixlore becomes more than a converter.

You can type commands like:

"Make this grid 4 columns with 24px gaps."
"Normalize spacing to an 8px scale."
"Replace images with placeholders."
"Apply a cleaner neutral theme."

The plugin updates the Figma layers accordingly.

It’s like ChatGPT — but it manipulates live design nodes.

4. Interaction logic extraction

Pixlore annotates:

hover states
click interactions
accordion behavior
scroll-triggered components

Developers find this helpful for quickly understanding the UX flow of unfamiliar interfaces.

Real Use Cases for Developers

UI refactor planning

Extract a current screen → analyze spacing, components, inconsistencies → plan a more scalable layout.

Design–Dev alignment

Start with accurate structural drafts so engineers can reference or rewrite components faster.

Reverse-engineering

Need to study a competitor’s UI? A landing page? A dashboard pattern?
Generate a clean model in minutes.

Rapid prototyping

Grab an existing webpage → modify via AI → create a quick proposal or variation.

New team onboarding

Give new engineers a visual, editable breakdown of your product screens.

Pricing & Access

Pixlore aims to be:

more accurate
faster
more affordable

…than most tools attempting web-to-Figma extraction.

There’s a free tier to test the workflow before upgrading.

🔗 Try it here:
https://www.figma.com/community/plugin/1539894363172987323/pixlore

What’s Next

We’re exploring:

exporting back to code
deeper design token mapping
accessibility annotations
diff-based UI auditing
multi-screen capture flows

If you’re a developer who cares about UI quality, I’d love your feedback.

If you'd like, I can also generate:

✅ A shorter dev.to version (under 700 chars)
✅ A “story-driven” version (how Pixlore was built)
✅ A technically detailed version (DOM parser → Auto Layout mapping)

Just tell me!

10 Essential Figma Plugins Every Designer Should Know in 2025

Doong Yee — Wed, 03 Dec 2025 13:31:26 +0000

The Figma community is constantly evolving, and so are the plugins that help designers move faster, smarter, and more creatively.
Here’s a curated list of 10 essential plugins—each designed to solve a different part of your workflow, from layout automation to content generation and asset management.

1. Pixlore — AI-powered Design Assistant

Pixlore helps designers create and iterate layouts through natural language.
Instead of manually adjusting frames and grids, you can chat with AI to generate responsive layouts in seconds.
Perfect for quick redesigns, idea validation, or when you need to turn concepts into clean, editable designs.
Use with: Wireframe or Autolayout to refine your generated results.

2. Autolayout Pro

AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. It behaves similar to Framer Stacks and the Anima Toolkit for Sketch.
It’s ideal for responsive web or app design workflows where pixel precision matters.

3. Content Reel

Manage real text and image content easily across your design system.
Instead of using placeholder text, you can build custom content sets and insert them directly into mockups.

4. Iconify

Access over 150,000 icons from multiple libraries — Material, Feather, Fluent, and more — all inside Figma.
Highly useful for teams maintaining consistent iconography across multiple projects.

5. Color Palettes ( Colorsinspo ) : Color & Accessibility Tools

Explore and apply curated color sets from Dribbble and Color Hunt.
Perfect for designers who want to find inspiration or experiment with color moods quickly.

6. Mockuuups Studio

Most Popular Mockup Plugin with 4500+ Device Mockups.
Turn your frames into realistic mockups with device frames and perspective shadows.
Great for presenting work or creating polished visuals for social media or portfolios.

7. Wireframe

Speed up the ideation stage by dropping prebuilt wireframe components for common UI patterns.
Combines well with Pixlore, letting you move from rough wireframes to polished layouts instantly.

8. Font Preview

Preview, compare, and apply different typefaces in real time.
This plugin helps you test visual hierarchy and readability before finalizing your design.

9. Batch Styler

Edit multiple text and color styles at once.
It’s a time saver for design system maintenance or when updating brand guidelines across projects.

10. FigGPT

An AI-powered writing tool for designers, helping you generate microcopy, UX writing, and placeholder text that fits the tone of your brand.

💡 Plugin Combinations Worth Trying

Pixlore + Wireframe + Mockuuups Studio → from idea to showcase in under 5 minutes.
Autolayout Pro + Batch Styler→ perfect for managing complex design systems.
Content Reel + FigGPT → streamline your text and content workflows.

Final Thoughts
Whether you’re designing websites, mobile apps, or dashboards, these plugins can help you automate the repetitive parts and focus on what matters most — creativity.
As Figma continues to evolve, plugins like Pixlore are redefining how designers interact with AI and automation inside their design tools.

Introducing Pixlore — A Web-to-Figma Engine That Bridges UI, Code, and Product Workflows

Doong Yee — Tue, 02 Dec 2025 12:48:53 +0000

As front-end engineers and product teams, we often need to understand, audit, or replicate UI patterns from existing web interfaces — and doing that manually in Figma can feel… inefficient.

Rebuilding layout grids, reconstructing spacing, extracting semantics from CSS, mapping design tokens — none of this is hard, but it’s definitely repetitive.

Pixlore is a Figma plugin we’ve been working on that aims to eliminate this repetitive layer.
It converts live webpages or HTML into a clean, editable Figma structure that mirrors how modern front-end systems are built.

Here’s why it’s become part of many dev/design workflows 👇

1. Structurally Accurate Reverse Engineering

Pixlore doesn’t just screenshot, it parses DOM → styles → layout → constraints, then reconstructs a Figma tree that matches:

Auto Layout structure
Flexbox / CSS grid relationships
Component grouping + layer hierarchy
Typography scale + color tokens
Spacing rules inferred from CSS

Developers like this because the resulting Figma file is:

predictable
debuggable
clean enough to hand over
consistent with how UI code is actually structured

It’s basically a DOM → Figma AST translator.

2. AI Editing: Modify Layouts Using Natural Language

This is where dev–design collaboration gets interesting.

Pixlore includes a conversational AI that can modify generated layouts:

“Make the grid 4 columns with 24px gutter.”
“Replace all images with gray placeholders.”
“Normalize spacing to an 8px scale.”
“Apply a neutral color theme.”
“Convert this section into reusable components.”

Think of it as using ChatGPT & Gemini3 — but embedded directly inside Figma and acting only on selected nodes.

It reduces the designer’s manual work and gives developers more consistent layouts to work with.

3. Extension Capture for Dynamic / Authenticated Pages

Developers often deal with:

Internal dashboards
Login-protected apps
Infinite scroll
Hydrated UI states

Pixlore’s browser extension lets you capture the rendered HTML/DOM from those states and port them into Figma.

Great for:

UX teardown
Competitor audits
Rebuilding internal tools
Mapping legacy UI before refactoring

4. Interaction Pattern Extraction

Pixlore can annotate the exported design with detected interaction logic:

hover / active states
expandable sections
menu navigation flow
button behavior
scroll-triggered elements

This helps dev teams communicate functional requirements without manually documenting everything.

Why Dev Teams Use It

In real workflows, devs report using Pixlore for:

UI audits

Quickly understand the structure of a new interface before implementing a component library or refactor.

Design–Dev alignment

Designers start with accurate structural drafts → developers get clearer specs.

Rapid prototyping

Build a prototype or redesign using a real-world reference instead of starting from a blank frame.

Onboarding

New teammates can learn product UI principles by reverse-engineering existing screens.

Simple Pricing, Fast ROI

Compared to other tools doing similar web-to-Figma extraction, Pixlore aims to be:

⚡️ Faster
📐 More accurate
🪙 Significantly more affordable

Teams use the free tier to validate the workflow, then upgrade after confirming it reduces manual rebuild time.

🚀 Try It (Free)

If your dev/design workflow involves analyzing or replicating existing interfaces, this might save you hours.

I’m also collecting feedback from developers:

Does the reconstructed layout match your expectations?
What would make it more useful in your workflow?
Should we export back to code in future versions?

Happy to chat in comments or DMs, always looking to improve the tool for real-world engineering use cases.

10 Essential Figma Plugins Every Designer Should Know in 2025

Doong Yee — Thu, 20 Nov 2025 12:55:04 +0000

Pixlore + Wireframe + Mockuuups Studio → from idea to showcase in under 5 minutes.
Autolayout Pro + Batch Styler→ perfect for managing complex design systems.
Content Reel + FigGPT → streamline your text and content workflows.