Lovable: Import from Figma

Send your Figma designs to Lovable and build your apps.

Select one or more frames, press Export, and the plugin converts them to React components with Tailwind CSS. Your Figma variables become Tailwind theme tokens, images and vectors are exported as assets, and everything lands in your Lovable account ready to prompt against.

What it does• Converts frames, auto layout, text and component instances into React and Tailwind• Maps Figma variables (colors, spacing, radius, typography) to a Tailwind theme, including light and dark modes• Exports images and vectors that cannot be expressed in CSS• Keeps a component set as one component with props and variants• Works in both Figma Design and Dev ModeRequires a Lovable accountThis plugin exports and sends the selected designs to your Lovable account. You sign into your Lovable account from inside the plugin. Nothing leaves your Figma account until you sign into Lovable and press Export.

PrivacyThe plugin reads only the frames you select. Generated code, exported images and font names are uploaded to your own Lovable account.

Privacy policy: https://lovable.dev/privacySupport: support@lovable.dev