Can I capture Ember Data-bound component values in Figma?

Yes. Ember Data model values (like @model.name, @user.email, @product.price) are rendered as text content in the DOM by Handlebars template expressions. When you copy the outerHTML from DevTools, those text values are already in the HTML as plain text nodes. html2design generates Figma text layers with the actual model values — not placeholder text — giving designers a realistic representation of the component.

Does this work with Ember Octane and classic Ember?

Yes. Both Ember Octane (Glimmer components, tracked properties, template-only components) and Classic Ember (Ember.Component, mixins, computed properties) produce standard HTML DOM output when rendered in the browser. The html2design workflow is the same for both: serve with ember serve, navigate to the component, copy the outerHTML from DevTools, and paste into the plugin.

Ember to Figma — Convert Ember.js Apps to Figma Designs

Ember to Figma —
No Extension Needed

Converting Ember.js components to Figma means running ember serve, navigating to the component in your browser, and copying the rendered HTML into the html2design plugin. Ember's Handlebars templates, Glimmer rendering engine, and Ember Data values are all evaluated and resolved by the browser before the plugin reads a single character — so Figma gets the real rendered output from your live application.

What is "Ember to Figma"?

"Ember to Figma" describes the process of exporting a rendered Ember.js component — including its Handlebars-evaluated template output, Ember Data model values, and component-scoped styles — into a native Figma design that can be edited, annotated, and used as a designer handoff artifact. The html2design Figma plugin enables this by accepting raw HTML from your browser's DevTools and generating editable Figma frames from the computed output.

Ember's Glimmer rendering engine compiles Handlebars templates into optimized DOM-patching instructions that run in the browser. Template expressions like {{@model.title}}, {{#if}} blocks, and {{#each}} loops are fully evaluated before the page reaches DevTools. By the time you copy the rendered HTML, the template source is gone — what remains is plain HTML with real content and computed styles.

The Ember to Figma workflow

Four steps. Works with Ember Octane, Classic Ember, Glimmer components, and any Ember addon.

Step 01

Serve the Ember app locally

Run ember serve (or ember s) in your project directory and navigate to the route containing the component you want to export. No staging environment or live URL needed.

If the component depends on Ember Data models, ensure the models are loaded and the app is in the desired state. Use Ember Inspector to verify model attributes and component arguments before capturing.

Step 02

Copy the component's rendered HTML

Open DevTools (F12) and locate the component's root element in the Elements panel. Glimmer components render their template output directly into the DOM — no custom element wrapper like Angular or Vue. The component boundary is visible via  Glimmer comment nodes in some Ember versions.

Select the outermost element of the component's rendered output and right-click → Copy > Copy outerHTML. Handlebars expressions, block helpers, and Ember Data values are all compiled to plain HTML at this point.

Step 03

Paste into html2design and generate Figma layers

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin reads computed styles the browser already calculated — Ember CSS (from .css files or scoped component styles via postcss-modules) are all resolved before the plugin processes the markup.

The output is a native Figma frame with real text layers containing your Ember Data values, accurate fills and spacing from your stylesheets, and a layer hierarchy that mirrors the Handlebars template structure. Not a screenshot — an editable design.

Step 04

Capture component states and hand off to your designer

Use Ember Inspector to modify component arguments (@args) and tracked properties to put the component in different states — loading, error, empty, filled. After each state change, copy the outerHTML and import it as a separate frame in html2design.

Share the Figma frames with your designer. Because they were generated from the live Ember app, designers see the actual data values, real styling, and correct content — not lorem ipsum or mockup approximations. They can iterate without running the Ember dev server.

Ember-specific tips for Figma exports

Handlebars, Glimmer, and Ember Inspector all interact with html2design in straightforward ways.

Handlebars templates produce plain HTML — no special handling needed

Ember's Glimmer rendering engine compiles Handlebars templates to efficient DOM operations at build time and evaluates them at runtime. By the time the browser renders the page, every Handlebars expression ({{@user.name}}), block helper ({{#if}}), and component invocation (<MyButton />) has been resolved to plain HTML elements. html2design sees the same HTML a CSS stylesheet sees — no Ember-specific processing required.

Use Ember Inspector to verify and set component state

The Ember Inspector browser extension provides a component tree view where you can inspect @args and @tracked properties. Use it to verify the component is in the intended state before capturing. For some tracked properties, you can edit values directly in the Inspector panel, causing the component to re-render with the new state — then capture the outerHTML without changing any source code.

Ember Data values appear as real text in Figma

Ember Data model attributes bound to templates via {{@model.title}}, {{this.user.email}}, or {{#each @items as |item|}} are rendered as text nodes in the DOM. Those text nodes become real Figma text layers in the html2design output — not placeholder text, not lorem ipsum, but the actual model values the app is currently showing. This is especially useful for documenting data-heavy UI like tables, cards, and lists.

Glimmer and Classic components produce identical DOM

Ember Octane's Glimmer components (native class syntax, tracked properties, no this.set) and Classic Ember components (Ember.Component, computed(), mixins) both render to standard HTML. The html2design workflow is identical regardless of which component model your Ember app uses. Mixed apps (Octane components alongside Classic components during migration) work the same way.

What lands in Figma from an Ember component

Native Figma objects — not screenshots, not plugin wrappers, not embedded iframes.

Real text layers with Ember Data content

Handlebars expressions like {{@model.name}} render as text nodes in the DOM. html2design generates real Figma text layers from those text nodes — with the actual model values, not placeholder copy.

Accurate fills from Ember CSS

Styles from Ember's global stylesheets, CSS modules (via ember-css-modules), or Tailwind are resolved to computed values by the browser. Those computed fills, backgrounds, and borders appear correctly in the Figma import.

Component layout preserved

Flexbox, grid, padding, and margin values from Ember component stylesheets are computed by the browser. The Figma frame reflects those exact pixel values in frame dimensions, auto-layout gaps, and element spacing.

Conditional content from {{#if}} blocks

Handlebars {{#if}} blocks render only the branch matching the current component state. What you capture in DevTools is exactly what the user sees — the correct branch, with the correct content.

Frequently asked questions

How do I convert an Ember.js component to Figma?

Run ember serve, navigate to the route containing the component, open DevTools (F12), copy the component's rendered outerHTML from the Elements panel, and paste into html2design in Figma. Handlebars templates are already compiled to HTML before you copy.

Do Handlebars templates work with html2design?

Yes. Handlebars is compiled to rendered HTML by Glimmer before the browser's DevTools see it. html2design reads the final HTML output — not the template source — so all expressions, block helpers, and model values produce correct Figma layers.

How do I export Glimmer components to Figma?

Glimmer components render standard HTML in the browser. Navigate to the component's route, open DevTools, select the component's root element, copy the outerHTML, and paste into html2design. The workflow is identical to any other HTML-rendered component.

Can I capture Ember Data-bound values in Figma?

Yes. Ember Data model attributes bound via {{@model.name}} appear as text nodes in the rendered HTML. html2design generates Figma text layers with those actual values — giving designers a realistic, content-accurate design to work from.

Does this work with both Ember Octane and Classic Ember?

Yes. Both component models produce the same kind of rendered HTML DOM output. The html2design workflow is identical: serve with ember serve, navigate to the component, copy the outerHTML, and paste into the plugin.