Christian Ortiz
Tool Framer in development

Frame to Component

Documentation

How to convert a selected frame to a TSX component and CSS module, read the conversion report, set export options, copy or download the code, and activate your license.

Last updated

Before you start

  • You need a Framer project open in the editor, in the browser or the desktop app.
  • The plugin works on one frame or component at a time.
  • It only reads your project. It never adds, changes or deletes layers; the only thing it changes is which layer is selected, when you click a report row.
  • Preview and the conversion report are free. Copy and Download need a license (see License).

Install and open the plugin

Find Frame to Component on the Framer Marketplace and open it in your project, or open it from the Plugins menu in the editor once you’ve used it. It opens as a panel beside the canvas.

The first time you open it, a five-step tour shows the main steps. You can skip it, and replay it from Help with Show tour again.

Convert a selection

  1. Select one frame or component on the canvas. While nothing suitable is selected, the panel says Select a frame or component on the canvas and watches your selection.
  2. The plugin reads the layers inside it and shows Converting with progress. Large selections can be cancelled.
  3. Code Preview opens with the generated files in tabs: YourFrame.tsx and YourFrame.module.css.

The header shows the frame’s name and how many layers it has, the license status, Export options (the sliders icon) and Help (the question mark).

If you select two or more top-level layers, the panel says it converts exactly one. If you select a text layer or an SVG, it asks you to select a frame or component instead. Once code is showing, changing the selection to something it can’t convert keeps the last result on screen and says so in a line under the header, for example 2 layers selected. Select one frame to convert. or Nothing selected. Showing Pricing Card.

A design component converts from its primary variant: select an instance on the canvas, or the component itself. The instance’s overrides and the other variants aren’t read, and the report says so. Code components (Framer’s Video, YouTube and other components from code) can’t be converted; the panel says so.

What converts

  • Frames and stacks, with their layout (direction, gap, padding, alignment), sizes and positions.
  • Text, with the typography of its Text Style: font, size, line height, letter spacing, alignment and color. Framer doesn’t let plugins read typography set directly on a text layer, only its font. Those layers show up in the report; apply a Text Style to export their size and color.
  • Images and image fills.
  • Fills (solid colors and linear gradients), borders, corner radius and opacity.

What doesn’t, and shows up in the report

  • Dropped: code components and video inside the frame, interactions the plugin can read, links, hidden layers, vectors and SVGs, and layers the plugin couldn’t read.
  • Approximated: typography set directly on a text layer (see above), a component exported from its primary variant, gradients other than linear, rotation (exported as a CSS transform), grid layouts (exported as CSS grid), fit-to-image sizes, fractional sizes outside a stack, and color styles (exported as plain colors, so the link to the style is lost).
  • Not visible to plugins: Framer’s plugin API doesn’t give plugins shadows, blur, background blur, filters or hover, press and appear effects. They’re never exported, and the plugin can’t list them per layer. The report and the zip’s README carry a standing note saying so; check the layers that use them.
  • Very large selections stop after 10,000 layers, and the report says so.

Preview and copy code

Switch between the file tabs to read each file. With an active license, Copy puts the exact contents of the open file on your clipboard and shows Copied.

If your browser blocks clipboard access, the plugin says Copy failed: select the code in the preview and press Cmd-C (Ctrl-C on Windows) instead.

The conversion report

The badge at the bottom of Code Preview shows the number of issues, or No issues. Click it to open the Conversion report:

  • The summary says how many layers were converted and how many issues there are.
  • Filter by All, Dropped or Approximated.
  • Each row names the layer, its path in the tree, the property, and why.
  • Click a row to select that layer on the canvas. If the layer has since been deleted or moved, the row says to convert again.

While the report is open, automatic re-conversion is paused, so the list doesn’t change under you. Back to code returns to the preview.

Naming

  • The component name comes from the frame’s name in PascalCase, for example Hero Section → HeroSection. It’s used for the file names and the function.
  • Class names come from each layer’s name in camelCase. Duplicates get _2, _3 in layer order, for example Card, Card, Hero / CTA 1! → card, card_2, heroCta1.
  • Rename layers in Framer to control the output. The same selection always gives byte-identical files.

Export options

Open Export options (the sliders icon in the header):

  • Component name: overrides the default name for this frame. It must be PascalCase: start with a capital letter, letters and numbers only. The plugin remembers your name for up to 50 frames.
  • Style output: CSS module (a .tsx file plus a .module.css file) or Inline styles (one .tsx file with style objects).
  • Bundle images into zip: when on, Download zip fetches your project’s images from their existing addresses and puts them in an assets/ folder, and the zipped code imports each image from ./assets/ (for example import heroImage from "./assets/heroImage.jpg"), so Vite, Next.js and other bundlers resolve it. The code preview still shows the original image addresses. If an image can’t be downloaded, the code keeps its address and the report says so. The option is unavailable when the selection has no images.
  • Reset to defaults clears your options and saved names, and resets the tour.

The preview updates as you change options.

Download the zip

With an active license, Download zip saves a zip named after the component. It contains:

  • the component file (.tsx),
  • the CSS module (.module.css), unless you chose inline styles,
  • a README.md listing every report issue,
  • an assets/ folder, if you turned on image bundling and the frame has images.

The zip is built in your browser. Downloading the same selection twice gives identical files.

License

Copy and Download need a license. Preview and the report never do.

  1. Open License from the license chip in the header (it reads Not activated until you add a key).
  2. Choose Buy a license to go to the checkout. Payment is handled by Lemon Squeezy, not Framer. Your license key arrives by email.
  3. Paste the key into License key and choose Activate. The chip turns Active and Copy and Download unlock.

Good to know:

  • The key is checked with Lemon Squeezy (api.lemonsqueezy.com) when you activate it, and again later to keep it current. Only the key and an activation ID are sent; nothing from your design.
  • Offline: a license checked within the last 7 days keeps working. The chip shows Grace and the days left. After that, Copy and Download stay locked until the plugin can reach Lemon Squeezy again.
  • Remove license key frees this activation, so you can use the key on another computer or browser.
  • The key is kept in your browser’s storage for this plugin, on your device. Clearing your browser’s site data removes it, and you’d paste it again.

Help

Help (the question mark, on every screen) has how-tos, the FAQ, Show tour again, and links to this documentation and the support page.

What it doesn’t do

This version converts one frame or component at a time, at one size. It doesn’t export whole pages or sites, routing, breakpoints, interactions, animations, effects, video or code components, and it doesn’t produce Tailwind, Vue or plain HTML.

FAQ

Does this export my whole site? No. It exports the one frame or component you select as a single component. Full-site export, pages and routing aren’t included.

Why are some layers missing from the code? Links, hidden layers, vectors, video and code components aren’t converted, and each one is listed in the conversion report with its layer name, so you know what to rebuild. Shadows, blur, filters and effects aren’t available to plugins at all, so they’re never exported and can’t be listed per layer: the report says so once.

Is my design sent to a server? No. The code is generated inside the plugin, in your browser. The only network calls are the license check with Lemon Squeezy and, if you turn on image bundling, downloading your images. The privacy policy has the details.

What does it cost, and what’s free? Preview and the conversion report are free. Copy and Download need a one-time license, bought at the checkout linked from the License screen. Framer doesn’t handle the payment.

Will re-exporting change all the class names? Not unless you rename or reorder layers. The same selection gives byte-identical files.

Can I export Tailwind, Vue or responsive breakpoints? Not in this version. The output is TSX with a CSS module, or inline styles, for one frame at one size.

What happens without internet? Preview and the report still work. A license checked within the last 7 days keeps working; after that, the plugin asks you to reconnect.

Does it change my project? No. It reads your layers and, when you click a report row, selects a layer. It never edits, adds or deletes anything, so there’s nothing to undo.

Troubleshooting

  • Nothing appears when I open the plugin. Select exactly one frame or component on the canvas. No selection, or more than one top-level layer, shows a prompt instead.
  • “A Text layer is selected.” The plugin converts frames and components. Select the frame that contains the text.
  • “Code components can’t be converted.” A component made from code (Framer’s Video, YouTube and the like) has no layers a plugin can read. Select a frame or a design component.
  • My text lost its size or color. Typography set directly on a text layer isn’t readable by plugins, and the report lists those layers. Apply a Text Style to the text and convert again.
  • Copy and Download are greyed out. They need an active license. Open License from the header chip.
  • “This key isn’t valid for Frame to Component.” Check that you pasted the whole key from your purchase email. A key for a different product shows This key is for a different product.
  • “This key has reached its activation limit.” Choose Remove license key where it’s active now, then activate it here.
  • “Cannot reach api.lemonsqueezy.com to check your license.” Check your connection, or whether a firewall or ad blocker blocks that address. A license checked in the last 7 days keeps working meanwhile.
  • A report row says the layer was deleted or moved. Convert again: select the frame once more.
  • An image is still a web address in the zip. It couldn’t be downloaded when you made the zip. The report lists it; try again, or replace it in your project.
  • Something else. See Support.