Figma에서 Webflow로 디자인 복사하기｜3년 쓴 솔직한 후기

Figma to Webflow

Figma to Webflow란 Figma의 디자인을 Webflow로 복사·동기화할 수 있는 공식 플러그인/앱입니다. 오토 레이아웃으로 짠 프레임이 반응형 flexbox 구조로 변환되고, 레이어 이름이 Webflow의 클래스로 반영됩니다.

이번에는 이런 궁금증에 답합니다. Figma에서 Webflow로 디자인을 복사할 수 있게 된 것은 2023년 2월입니다. 공식 Twitter 계정에서 Figma 플러그인 출시가 발표되었습니다.

이 글을 쓰는 저는 Webflow로 사업을 하며 지도·제작·SEO 등으로 기업들의 의뢰를 받고 있습니다. 그런 제가 Figma에서 Webflow로 디자인을 복사·붙여넣기하는 방법을 해설합니다.

※이 글은 2023년 2월 공개입니다. 2026년 7월에 플러그인의 현재 상황과 “실제 프로젝트에서 3년 사용한 솔직한 후기”을 대폭 추가했습니다.

결론(2026년): 저는 이 플러그인을 거의 쓰지 않습니다

출시 당시에는 “혁명”이라며 확산시킨 저지만, 3년이 지난 솔직한 결론부터 씁니다. 실제 프로젝트에서 이 플러그인을 쓰는 일은 거의 없어졌습니다. 이유는 2가지입니다.

• 오토 레이아웃 제약이 무겁다. 복사하려면 Figma 쪽을 전부 오토 레이아웃으로 짜야 합니다. 거기까지 한다면 Webflow에서 처음부터 짜는 것과 수고가 거의 같습니다
• 복사 후 호환성이 나쁘다. Webflow에 옮겼을 때 깨짐과 조정이 많이 발생합니다. 처음부터 Webflow에서 만들면 그 수정이 발생하지 않고 그대로 완성까지 갈 수 있습니다

결국 “Webflow에서 직접 짠다”를 선택하게 됩니다. 이것이 제 결론이며 아마 많은 사용자가 같은 결론에 도달했을 것입니다. 출시 때의 열기에 비해 실제 프로젝트에서 쓰이는 것을 보는 일은 거의 없습니다.

그럼 Figma가 불필요한가 하면 그렇지 않습니다. Figma의 장점은 디자인 전체를 한눈에 보고 공개 전에 합의할 수 있다는 것. 그래서 제 현실적인 답은 이렇습니다.

• Figma 쪽: AI 이미지 생성이나 간단한 목업으로 “겉모습의 합의”까지를 만든다
• 구축: Webflow에서 처음부터 직접 짠다(플러그인 복사는 하지 않는다)

실제로 “Figma에서 Webflow로”라는 의뢰를 여러 번 받았지만, 진행 방식은 매번 이 형태——Figma에서 보기 좋은 사이트 이미지를 AI로 만들고, 구축 자체는 Webflow에서 한다——로 정착했습니다.

Figma to Webflow의 현재(2026년·디자인 시스템 동기화로 진화)

“그럼 이 플러그인은 끝났는가” 하면, 진화의 방향이 바뀌었습니다. 단발 복사 툴에서 Figma와 Webflow의 디자인 시스템을 동기화하는 툴이 되었습니다. 2026년 시점의 공식 정보를 정리합니다.

• 형태는 2가지. 플러그인=단발 복사(Copy to Webflow)／앱=컴포넌트·디자인 시스템의 지속 동기화
• 오토 레이아웃 프레임이 반응형 flexbox 구조로 변환된다(오토 레이아웃 필수는 그대로)
• Figma의 레이어 이름이 그대로 Webflow의 클래스명이 된다. 이미지·벡터는 애셋에 자동 업로드
• 대응 CSS 선언은 50개 이상, 프리빌트 레이아웃은 20개 이상으로 확충
• Figma 컴포넌트→Webflow 컴포넌트, Figma 변수→Webflow 변수(디자인 토큰)로 동기화 가능
• 동기화는 Figma 쪽만으로 시작할 수 있게 되었다

즉 지금 이 툴이 맞는 것은 “복사로 편해지고 싶은 개인”이 아니라 Figma에 디자인 시스템이 있고 Webflow와 이중 관리 중인 팀입니다. 해당되지 않는다면 다음 기본 순서를 알아 두는 정도로 충분합니다.

Figma에서 Webflow로 디자인을 복사하는 방법

기본 순서는 공개 때부터 변하지 않았습니다. 참고는 아래 영상입니다(영어).

1. Figma에서 Webflow 플러그인 다운로드
2. 프로젝트 시작
3. 레이아웃 짜기
4. 복사해 보기

스텝 1: Figma에서 Webflow 플러그인 사용

Figma 디자인을 Webflow에 복사하려면 Figma 안에서 전용 플러그인을 써야 합니다.
>>Figma to Webflow 공식(영문)

스텝 2: 프로젝트 시작

Figma에서 Webflow 플러그인을 표시했다면 “시도하기”를 눌러 새 Figma 프로젝트를 시작합시다. Figma 커뮤니티에서도 검색할 수 있습니다.

스텝 3: 플러그인으로 레이아웃 짜기

플러그인을 다운로드하면 일반 Figma 외에 Webflow의 레이아웃 기능이 표시됩니다. 여기서 디자인을 드래그해 Figma에 만들어 갑니다.

처음 열 경우 Webflow와의 연동 화면이 표시되므로 복사할 프로젝트를 선택해 연동합시다.

기존 Figma 디자인을 그대로 복사할 수 있는 것이 아니라 오토 레이아웃 기능 사용이 필수입니다. 복잡하게 짠 레이아웃을 복사하면 일부가 이미지로 억지로 붙거나 드롭 섀도가 재현되지 않기도 합니다. 오토 레이아웃을 쓰면 “Column” 등 각 아이템에 이름이 표시됩니다.

이 이름이 Webflow에 붙여넣었을 때 클래스로 반영됩니다. 그러므로 Figma 디자인 단계부터 알기 쉬운 이름을 의식합시다.

스텝 4: 완성한 디자인을 Webflow로 복사

디자인을 짜면 “Copy to Webflow”가 파랗게 되어 클릭해 복사할 수 있습니다. 파랗게 되지 않으면 Webflow 사이트와 연동이 안 된 상태이니 복사 버튼 바로 위 “Choose Webflow site”에서 대상을 선택합시다.

이후 해당 Webflow 프로젝트에 붙여넣기만 하면 됩니다. 참고로 Webflow에서 Figma로의 역출력은 불가능하니 주의합시다.

Webflow로 만드는 것과 Figma로 만드는 것, 어느 쪽이 빠를까?

“익숙한 툴에 따라 다르다”는 답은 무의미하니 둘 다 조작에 익숙하다는 전제로 이야기합니다.

디자인만이라면 Figma

큰 틀의 레이아웃 디자인, 이미지, 소재 배치는 Figma가 빠르다고 느낍니다. 드래그&드롭으로 디자인을 만들 수 있고 소재를 만들어 SVG로 출력할 수도 있습니다. 문제는 플러그인에 맞춘 디자인(=전부 오토 레이아웃으로 짜기)이 필요하다는 것. 그래서 저는 Figma를 “AI로 만드는 목업까지”로 선을 긋고 있습니다.

문의 폼 등 설정을 바꾸는 아이템은 Webflow

문의 기능처럼 디자인뿐 아니라 설정을 만지는 부분은 Webflow에서 만드는 것이 빠릅니다.

Webflow 템플릿에서 디자인을 변경하는 경우도 Figma로 이전할 수 없으므로 Webflow에서 작업하게 됩니다.

추천 템플릿 글은 여기
>>【템플릿】Webflow의 굉장한 템플릿 무료 사용 가능

【2026년】Figma→Webflow 이전에, 만드는 방법의 선택부터

마지막으로 2026년의 지금 제가 생각하는 것을 솔직히 씁니다. AI의 진화로 Webflow라는 툴 자체의 위상마저 흔들리고 있습니다. 사이트를 만드는 방법의 선택지가 근본부터 바뀌고 있기 때문입니다.

• 대기업·보안과 거버넌스 중시 회사→Webflow 제작·운영이 맞습니다. 권한 관리와 안정 운영 면에서 지금도 강력합니다
• 개인〜중소 규모→AI 사이트 제작이 가장 현명한 선택이라고 생각합니다. 빠르고 저렴하며 품질도 이미 실용 수준입니다

실제로 이 블로그 사이트 자체가 AI(Claude Code)로 7일 만에 풀 리뉴얼한 것입니다. 제작 과정은 전 과정 공개 글에서 읽을 수 있습니다.

당사는 Webflow 제작도 AI 사이트 제작도 모두 제공하므로 “우리 회사는 어느 쪽이 맞는가”를 무료로 판단해 리포트할 수 있습니다. Figma→Webflow 이전으로 고민 중인 분도 만드는 방법의 선택부터 편하게 무료 상담으로 오세요. AI 사이트 제작 내용은 여기(일본어)에 정리되어 있습니다.

Figma에서 Webflow로 복사를 실제로 해 봤습니다

실제로 Figma에서 Webflow로 디자인을 복사해 본 영상입니다(일본어). 처음에 가까운 수록이라 2배속으로 듣는 정도가 좋습니다.

‍