Question 1

How to export Lovable to Figma

Accepted Answer

Lovable is designed to export to code (GitHub/custom domains), not to Figma. However, you can take screenshots of your Lovable project and manually recreate it in Figma, or export your code to use the generated components as reference for Figma design handoffs.

Question 2

How to import from Figma to Lovable

Accepted Answer

Paste your Figma shareable link as a prompt in Lovable, or use the Builder.io plugin to convert Figma designs to code. You can also upload a screenshot of your design and describe what you want. After import, refine the result by adjusting styles, layouts, components, and adding missing elements with follow-up prompts.

Question 3

Using Figma

Accepted Answer

Paste your Figma shareable link directly as a prompt in Lovable, or use the Builder.io plugin to convert your design to code. You can also upload a screenshot and describe what you want—Lovable will build it out for you.

Question 4

Can I manually edit text or colors?

Accepted Answer

Yes, use the visual editor. Click 'Edit' in the prompt box, select the component you want to tweak, and adjust sizing, color, text, margins, padding, fonts, borders, and shadows right on the canvas. You can also manually edit CSS via the code editor or add Tailwind classes.

Question 5

Can I see the code that Lovable generates and manually edit it?

Accepted Answer

Yes, export via GitHub (full code ownership) or view via the code tab in the editor. You can manually edit the exported code locally in your own editor, then push to GitHub and Lovable will sync it back. You have complete control over the generated code.

Question 6

Use Visual Edits

Accepted Answer

Click 'Edit' in the prompt box, then select any component to tweak it directly. Adjust sizing, colors, text, margins, padding, and fonts right on the page. Multi-select with ⌘ Command (Mac) or ⊞ Win (Windows) to edit multiple elements at once.

Question 7

Are design systems versioned?

Accepted Answer

Currently, Lovable design systems are not explicitly versioned. Any changes made to the design system project immediately affect all connected projects. If you need versioning, consider creating separate design system projects (e.g., 'design-system-v1', 'design-system-v2') and connecting the appropriate version to each project.

Question 8

React version mismatch

Accepted Answer

If your project's React version doesn't match a dependency, you'll see errors. Check package.json for the React version, then verify all dependencies (like shadcn/ui, Radix UI) support that version. Update outdated packages via npm or yarn, or downgrade React if needed. Lovable projects use React with Vite; ensure versions are compatible.

Question 9

Linking to an external video

Accepted Answer

Embed videos using `` with sources like YouTube, Vimeo, or direct MP4 URLs. For YouTube: paste a shareable link into Lovable and it auto-generates the embed code. For custom videos, use HTML5 `` tags with multiple source formats (mp4, webm) for browser compatibility. Keep file sizes manageable for performance.

Question 10

Add animation component with 21st dev

Accepted Answer

Use a prompt to request animations powered by 21st Dev. Lovable can add smooth transitions, hover effects, and other interactive elements to your components.

Design & UI

Code & Visual Editing

Design Systems & Dependencies

Figma

Images, Videos & Media

UI Components