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

Replace it on the visual editor

Accepted Answer

Click "Edit" in the prompt box, select the image element on the page, and replace it via the sidebar. You can upload a new file, paste a URL, or reference an image from your GitHub repo. The visual editor lets you adjust size, aspect ratio, and styling without writing code.

Question 7

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 8

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 9

Component not found

Accepted Answer

If a component isn't found, verify the design system is properly connected to your project in Project Settings → Connected Design Systems. Ensure the design system project exists and is published. Check that component names in the design system match the names you're using in your project. Re-import or reconnect the design system if needed.

Question 10

Conflicting dependencies

Accepted Answer

Dependency conflicts occur when two packages require incompatible versions of the same library. Check package.json for duplicate or conflicting entries. Resolve by updating to compatible versions or removing unused packages. Use npm ls to view the dependency tree. If conflicts persist, ask Lovable to audit and resolve in Plan mode before proceeding.

Question 11

Do design systems replace templates?

Accepted Answer

Design systems and templates serve different purposes. Design systems provide reusable components and styling rules for consistency. Templates are starter projects with full layouts and functionality. You can use both: start with a template and layer a design system on top for additional styling and components. They complement each other.

Question 12

How do I see which design systems are connected to my project?

Accepted Answer

In Project Settings → Connected Design Systems, you'll see a list of all connected design systems. The list shows the system name, status, and connection date. You can also see which components and styles are inherited from each system. Disconnect any system from this interface if needed.

Question 13

Is a design system just a Lovable project?

Accepted Answer

Yes, a design system in Lovable is a standard project that exports reusable components, colors, fonts, and styling rules. Any Lovable project can be designated as a design system. Other projects connect to it and inherit its components and styles. Design systems are a way to enforce consistency across multiple projects.

Question 14

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 15

Styles not applying

Accepted Answer

If styles aren't applying from a design system, verify the design system is connected and published. Check that Tailwind or CSS files are exported from the design system. Clear your browser cache and hard refresh the page. Verify that component selectors aren't being overridden by local styles. Use the Visual Editor to inspect and debug styles.

Question 16

What happens if two design systems define overlapping rules?

Accepted Answer

When multiple design systems define overlapping components or styles, the most recently connected system takes precedence. Earlier systems are overridden. To manage precedence, reorder the connected systems in Project Settings → Connected Design Systems. This allows you to layer systems intentionally (e.g., theme → corporate → project-specific).

Question 17

What technologies do design systems support?

Accepted Answer

Lovable design systems support React, Tailwind CSS, shadcn/ui, Radix UI, and custom CSS. They export components as production-ready React code. Design systems can include custom hooks, utilities, and styling libraries. All components are TypeScript-ready and follow React best practices.

Question 18

Using Google Fonts

Accepted Answer

Google Fonts integrates seamlessly with Lovable's Tailwind CSS setup. You can import fonts via CSS in your project or use the visual editor to change fonts (which auto-updates the underlying Tailwind classes). Popular choices include Inter, Poppins, Roboto, and Source Sans Pro. Google Fonts are free, open-source, and optimized for web performance.

Question 19

Using a web-safe font

Accepted Answer

Web-safe fonts (Arial, Georgia, Times New Roman, etc.) are pre-installed on most systems and load instantly. In the visual editor sidebar, you can select fonts and update Tailwind CSS classes. For maximum compatibility across devices, pair web-safe fonts with fallback options in your CSS. However, Google Fonts offer more design flexibility with proper font loading.

Question 20

Add images to prompt

Accepted Answer

Upload images directly in your prompt by using the image upload button. This helps Lovable understand your design vision and build more accurately.

Design & UI

Code & Visual Editing

Design Systems & Dependencies

Figma

Fonts & Styling

Images, Videos & Media

UI Components

Pronto(a) para criar?