Figma 디자인, 토큰, 컴포넌트를 Lovable로 가져오는 세 가지 방법을 알아봅니다.
Figma 디자인을 Lovable로 가져오기
Figma 디자인, 토큰, 컴포넌트를 Lovable로 가져오는 세 가지 방법을 소개합니다. Figma 플러그인을 사용하거나, Figma MCP로 연결하거나, .fig 파일을 업로드할 수 있습니다.
Figma 작업을 Lovable로 가져오면 에이전트가 레이아웃과 색상, 컴포넌트 구조를 추측하지 않고 실제 디자인을 바탕으로 빌드합니다. 이미 만들어 둔 디자인을 작동하는 앱으로 바꾸고 싶을 때, 디자인 시스템을 정확히 맞춰야 할 때, 디자이너와 개발자가 동시에 작업하며 서로 보조를 맞춰야 할 때 사용하세요.
어떤 방법이 맞는지는 무엇을 옮겨야 하는지와 어떤 도구를 쓸 수 있는지에 따라 달라집니다. 플러그인과 .fig 업로드는 모두 Lovable 웹 앱에서 동작합니다. Figma MCP는 Lovable 데스크톱 앱이 필요하지만, 에이전트가 디자인 파일에 지속적으로 실시간 접근할 수 있습니다.
| 방법 | 얻는 것 | 적합한 경우 |
|---|---|---|
| Figma 플러그인 | Figma에서 곧바로 내보낸 완성 디자인 | 앱을 바꾸지 않고 Figma에서 바로 내보내려는 디자이너 |
| Figma MCP | Figma Desktop에서 가져오는 실시간 디자인 컨텍스트 | Lovable이 살아 있는 디자인 파일을 읽게 하려는 개발자 |
| .fig 파일 업로드 | variable collection, 색상, 타이포그래피, 프레임 구조 | 설치 없이 스타일과 구조를 빠르게 넘기려는 경우 |
Figma 플러그인
Lovable Figma 플러그인을 쓰면 Figma에서 Lovable 워크스페이스로 디자인을 곧바로 내보낼 수 있습니다. 설치한 뒤에는 디자인 도구를 벗어나지 않고 Figma에서 프레임이나 컴포넌트를 선택해 Lovable로 보냅니다.
장점
- Figma에서 개별 프레임, 컴포넌트, 파일 전체를 내보내 Lovable에서 바로 사용
- 모든 Figma 플랜에서 사용 가능
- Lovable 데스크톱 앱이 필요 없음
- Figma 데스크톱 앱이 필요 없음
Figma 플러그인 설치 및 사용 방법
다음 단계를 따라 플러그인을 연결하고 첫 디자인을 내보내세요.
플러그인을 사용하려면 Figma 조직에서 최소 Dev seat가 필요합니다.
Figma에서 플러그인 열기
Figma에서 아무 파일이나 엽니다. 오른쪽 패널에서 Plugins를 선택하고 Lovable을 검색합니다. Lovable: Import from Figma 플러그인에서 Run을 선택합니다.
Lovable에 로그인
플러그인 패널에서 Sign in with Lovable을 선택한 뒤 Sign in with Lovable을 한 번 더 선택합니다. 브라우저 창이 열립니다.
아직 로그인하지 않았다면 로그인 절차를 진행하세요. 이미 로그인했다면 다음 단계로 넘어갑니다.
페어링 코드 입력
Lovable이 페어링 코드를 요청합니다. Figma를 다시 열어 Lovable: Import from Figma 플러그인에 표시된 페어링 코드를 복사한 뒤 Lovable에 입력해 연결을 확인합니다.
권한 부여
Lovable Figma 플러그인이 요청하는 권한을 검토하고 부여합니다.
디자인 내보내기
Figma 디자인 파일에서 내보낼 프레임이나 컴포넌트를 선택하고 플러그인의 안내를 따라 내보냅니다.
내보내기 전에 이름을 바꾸면 Lovable에서 내보낸 컴포넌트를 구분하기 쉬워집니다. 디자인이 Lovable로 전송됩니다.
Lovable에서 디자인 사용
Lovable에서 **+**를 선택한 다음 Figma designs를 고르고, 내보낸 디자인을 선택합니다. 기존 프로젝트의 채팅에서도, 새 프로젝트를 만들 때도 할 수 있습니다.
Figma designs 옵션은 디자인을 하나 이상 내보낸 뒤에만 보입니다. 아직 보이지 않는다면 내보내기 단계를 먼저 완료하세요.
Figma MCP
Figma MCP는 로컬 MCP 서버를 통해 Lovable 에이전트를 Figma Desktop 앱에 연결합니다. 연결되면 Lovable이 열려 있는 디자인 파일을 실시간으로 읽고, 컴포넌트 속성을 확인하고, 빌드하는 동안 그 컨텍스트를 사용합니다. 직접 내보내거나 첨부할 필요가 없습니다.
장점
- Figma 디자인 파일에 실시간으로 접근
- 수동 내보내기가 필요 없음
- 컴포넌트, 속성, 레이아웃, 스타일까지 전체 디자인 컨텍스트 확보
단점
- Lovable 데스크톱 앱이 필요합니다(Figma MCP 서버는 로컬 서버라 사용자 컴퓨터에서만 접근할 수 있습니다)
- Dev Mode가 켜진 Figma 데스크톱 앱이 필요합니다
- Figma에서 Dev 또는 Full seat가 필요합니다(Figma 무료 Starter 플랜에서는 사용할 수 없습니다)
- Enterprise Lovable 워크스페이스에서는 로컬 MCP 서버가 기본적으로 비활성화되어 있어, admin이 Privacy & security → Local desktop MCP servers에서 활성화해야 합니다
설정
전체 설정 방법은 Lovable 데스크톱 앱으로 Figma 연결하기를 참고하세요.
연결한 뒤에는 채팅에서 Figma 디자인을 직접 참조할 수 있습니다.
Build the onboarding flow based on the designs in my Figma file, matching the colors, typography, and component layout exactly..fig 파일 업로드
Figma 파일을 업로드하면 디자인 시스템 값과 함께 프레임 이름, 텍스트, 미리보기 이미지 같은 파일 개요를 Lovable에 전달합니다. 디자인이나 컴포넌트를 그대로 재현하지는 않습니다.
장점
- 빠르며 추가 설치가 필요 없음
- 디자인 시스템 토큰을 프로젝트에 넘기는 데 적합
- 모든 Figma 플랜에서 사용 가능
단점
- 인터랙티브 디자인이나 컴포넌트는 가져오지 않음
.fig 파일 업로드 방법
다음 단계를 따라 Figma 파일을 저장하고 업로드하세요.
Figma에서 파일 저장
Figma 데스크톱 앱이나 웹 앱에서 디자인 파일을 엽니다. File → Save local copy로 이동하면 파일이 컴퓨터에 저장됩니다.
Lovable에 끌어다 놓기
Lovable에서 .fig 파일을 프롬프트 입력란으로 끌어다 놓거나 첨부 아이콘으로 첨부합니다. Lovable이 variable collection, 색상, 타이포그래피, 프레임 구조를 추출하고 참고용 레이아웃 썸네일을 생성합니다.
.fig 파일 업로드는 Figma 파일이 로컬 variable(Variables 패널의 Local variables에 정의된 값)을 사용할 때 가장 잘 작동합니다. color style, text style, 프레임 구조도 함께 포함됩니다.