Capture your Electron app to Figma — from the inside!

Many of the most popular desktop apps you use every day — Slack, Notion, VS Code, Discord — are built on Electron. That means underneath the native-looking window, there’s a web app running. HTML, CSS, JavaScript, rendered by a Chromium engine.

That’s great news for the html.to.design Chrome extension, which can already capture web pages to Figma beautifully. But there’s a gap: the Chrome extension works on websites. It doesn’t work inside a desktop app.

So if you’re a designer at a company that ships an Electron app, and you want to pull your own product’s UI into Figma — to annotate a bug, iterate on a redesign, or hand something off — you’re stuck screenshotting and reconstructing by hand.

Today, we’re closing that gap.

Introducing the html.to.design Electron SDK

The @divriots/h2d-electron-sdk is a small package that engineers can drop into an internal dev build of their Electron app. Once it’s in, anyone on the team — designers, PMs, engineers — can capture any screen of the app directly to Figma, with full fidelity: real layers, real text, real styles. Not a flat image.

Think of it as giving your whole team a “Capture to Figma” button that lives inside your own product.

Who is this for?

This is an internal tooling decision, not a product feature. The engineer who installs it is probably not the person who will use it most.

The typical setup: an engineer adds the SDK to the team’s internal dev build — the version that runs on the machines of people actively working on the product. From that point on, designers can capture live screens without ever leaving the app, and without needing to describe what they’re looking at to anyone else. PMs can capture exactly what they’re reacting to in a bug report. Design reviews start from the real thing.

Because the SDK is dev-only by default, it never makes it into the production app that your customers download. It’s strictly an internal workflow tool.

A real example

Imagine Slack’s design team wants to revisit the layout of the sidebar. Today, someone has to take a screenshot, trace over it in Figma, and keep it manually in sync as things change. With the Electron SDK embedded in Slack’s internal build, a designer can open the app, hit capture, and have an editable, accurate Figma representation in seconds — ready to annotate, tweak, and share.

Same applies to any team shipping an Electron app: a browser, a developer tool, a communication platform, a creative app.

Get started

The full technical setup is covered in the Electron SDK documentation. For most teams, it’s a one-line addition to the main process and you’re done.

Let us know what you think!