- Figma to Webflow란?
- Figma to Webflow란, Figma의 디자인을 Webflow로 복사·동기화할 수 있는 공식 플러그인/앱입니다. 오토 레이아웃으로 짠 프레임이 반응형 flexbox 구조로 변환되고, 레이어명이 Webflow의 클래스로 반영됩니다.
이번에는 이런 궁금증에 답하겠습니다. Figma에서 Webflow로 디자인을 복사할 수 있게 된 것은 2023년 2월의 일입니다. Twitter 계정으로 Figma 플러그인을 릴리스했다는 공지가 있었습니다. 제 Twitter 계정에서는 이를 즉시 확산하고, 해설 글을 원하는 분을 모집했습니다.
드디어 Figma에서 Webflow로 디자인을 그대로 복사해 붙여 넣을 수 있는 시대가 왔습니다.
저는 “Webflow로 구현하는 것과 속도는 다르지 않을 것 같다”라고 생각했지만, 절대 그렇지 않은 내용입니다.
한국어 해설을 원하시는 분 계신가요?🤔
Like가 많으면 해설을 내겠습니다
제 트위터는 아직 막 시작한 터라 반응을 거의 모으지 못했지만, 구글 검색 수와 Twitter에서의 열기를 보고 필요하다고 판단해 해설 글을 쓰기로 했습니다.
이 글을 쓰는 저는 Webflow로 사업을 하고 있으며, Webflow 지도와 제작, SEO 등으로 신뢰해 주시는 기업들에게 의뢰를 받고 있습니다. 그런 제가 Figma에서 Webflow로 디자인을 복사해 붙여 넣는 방법을 해설하겠습니다. 잘 부탁드립니다.
※이 글은 2023년 2월에 공개했습니다. 2026년 7월에 플러그인의 현재 위치와 “실제 프로젝트에서 3년 사용한 솔직한 후기”를 대폭 추가했습니다.
결론(2026년): 저는 이 플러그인을 거의 쓰지 않습니다
릴리스 당시에는 “혁명”이라고 생각해 확산했던 저이지만, 3년이 지난 솔직한 결론부터 쓰겠습니다. 실제 프로젝트에서 이 플러그인을 쓰는 일은 거의 없어졌습니다. 이유는 두 가지입니다.
- 오토 레이아웃 제약이 부담스럽습니다. 복사해 붙여 넣으려면 Figma 쪽을 전부 오토 레이아웃으로 짜야 합니다. 거기까지 할 것이라면 Webflow에서 처음부터 짜는 것과 수고가 거의 다르지 않습니다
- 붙여 넣은 뒤의 호환성이 나쁩니다. Webflow로 옮겼을 때 깨짐과 조정이 많이 발생합니다. 처음부터 Webflow로 만들면 그 수정이 발생하지 않고 그대로 완성까지 갈 수 있습니다
결국 “Webflow에서 직접 짠다”를 고르게 됩니다. 이것이 제 결론이고, 아마 많은 사용자가 같은 결론에 이르렀을 것입니다. 릴리스 당시의 열기에 비해 실제 프로젝트에서 쓰이는 것을 보는 일은 거의 없습니다.
그러면 Figma가 불필요한가 하면 그렇지 않습니다. Figma의 장점은 디자인 전체를 한눈에 보고 공개 전에 합의할 수 있다는 것입니다. 그래서 제 현실적인 답은 다음과 같습니다.
- Figma 쪽: AI 이미지 생성이나 간단한 목업으로 “보이는 모습의 합의”까지를 만든다
- 구축: Webflow에서 처음부터 직접 짠다(플러그인으로 복사해 붙여 넣지 않는다)
실제로 저도 “Figma에서 Webflow로”라는 의뢰를 몇 번 받았지만, 진행 방식은 매번 이 형태——Figma에서 보기 좋은 사이트 모습을 AI로 만들고, 구축 자체는 Webflow에서 한다——로 정착했습니다.
Figma to Webflow의 현재 위치(2026년·디자인 시스템 동기화로 진화)
“그럼 이 플러그인은 끝난 것인가” 하면, 진화의 방향이 바뀌었습니다. 단발성 복사 툴에서 Figma와 Webflow의 디자인 시스템을 동기화하는 툴이 되었습니다. 2026년 시점의 공식 정보를 정리합니다.
- 형태는 두 가지입니다. 플러그인＝단발성 복사(Copy to Webflow) / 앱＝컴포넌트나 디자인 시스템의 지속 동기화
- 오토 레이아웃 프레임이 반응형 flexbox 구조로 변환됩니다(오토 레이아웃 필수는 그대로입니다)
- Figma의 레이어명이 그대로 Webflow의 클래스명이 됩니다. 이미지·벡터는 에셋으로 자동 업로드됩니다
- 대응하는 CSS 선언은 50개 이상, 프리빌트 레이아웃은 20개 이상으로 확충되었습니다
- Figma의 컴포넌트→Webflow의 컴포넌트, Figma의 변수→Webflow의 변수(디자인 토큰)로 동기화할 수 있습니다
- 동기화는 Figma 쪽에서만 시작할 수 있게 되었습니다(예전처럼 플러그인과 앱을 동시에 열 필요가 없습니다)
즉 지금 이 툴이 맞는 대상은 “복사해 붙여 넣어 편하게 하고 싶은 개인”이 아니라, Figma에 디자인 시스템이 있고 Webflow와 이중으로 관리하고 있는 팀입니다. 거기에 해당하지 않는다면 다음 기본 순서를 알아 두는 정도로 충분하다고 봅니다.
Figma에서 Webflow로 디자인을 복사해 붙여 넣는 방법
기본 순서는 공개 당시부터 달라지지 않았습니다. 참고는 아래 영상입니다. 이것을 해설해 나가겠습니다. 또한 이 글의 마지막에는 제가 실제로 Figma에서 Webflow로 디자인을 복사해 본 해설 영상을 넣어 두었으니 시간이 되시면 봐 주세요.
이번에는 다음 순서로 진행합니다.
- Figma에서 Webflow 플러그인을 다운로드
- 프로젝트 시작
- 레이아웃 짜기
- 복사해서 붙여 넣어 보기
그럼 바로 진행해 봅시다. 이번에 해설할 영상은 이쪽입니다↓(영어)
1단계: Figma에서 Webflow 플러그인을 사용한다
Figma의 디자인을 Webflow로 복사해 붙여 넣으려면 Figma 안에서 전용 플러그인을 써야 합니다. 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 프로젝트에 붙여 넣기만 하면 됩니다. 일단 이것으로 Figma에서 Webflow로의 복사는 완료입니다. 참고로 Webflow에서 Figma로 역출력은 할 수 없으니 주의합시다.
Webflow로 만드는 것과 Figma로 만드는 것 중 어느 쪽이 빠를까?
“익숙한 툴에 따라 다르다”라는 답은 없는 것과 마찬가지라고 느꼈으므로, 둘 다 조작에 익숙하다는 전제로 이야기하겠습니다.
디자인만이라면 Figma
큰 틀을 만드는 레이아웃 부분의 디자인, 이미지, 소재 등을 배치한다면 Figma 쪽이 빠르다고 느낍니다. Figma에서 드래그 앤드 드롭으로 디자인을 만들 수 있고, 소재를 만들어 SVG로 출력할 수도 있습니다. 문제는 Webflow 플러그인에 맞춘 디자인 제작(＝전부 오토 레이아웃으로 짜는 것)이 필요해진다는 점입니다. 그래서 저는 Figma는 “AI로 만드는 목업까지”라고 선을 긋고 있습니다.
문의 폼 등 설정을 변경하는 아이템은 Webflow
문의 기능을 만드는 등 디자인뿐 아니라 설정을 건드리는 부분의 제작에 관해서는 Webflow에서 만드는 쪽이 빠르다고 느낍니다.
Webflow의 템플릿에서 디자인을 변경하는 경우에도 Figma로 디자인을 옮길 수 없으므로 Webflow에서 작업하게 됩니다.
추천 템플릿 글은 이쪽입니다
>>【템플릿】Webflow의 굉장한 기술 템플릿 6선! 무료로 사용 가능○
【2026년】애초에 Figma→Webflow 이전에, 만드는 방법의 선택부터
마지막으로 2026년 지금 제가 생각하는 것을 솔직히 쓰겠습니다. AI의 진화로 Webflow라는 툴 자체의 위치마저 흔들리고 있습니다. 사이트를 만드는 방법의 선택지가 근본부터 바뀌고 있기 때문입니다.
- 대기업·보안과 거버넌스를 중시하는 회사→Webflow에서의 제작·운영이 맞습니다. 권한 관리와 안정 운영 면에서 지금도 강합니다
- 개인~중소 규모→AI를 이용한 사이트 제작이 가장 현명한 선택이라고 봅니다. 빠르고 저렴하며 품질도 이미 실용 수준입니다
실제로 이 블로그의 사이트 자체가 AI(Claude Code)로 7일 만에 전면 리뉴얼한 것입니다. 제작 과정은 전 공정을 공개한 글에서 읽을 수 있습니다.
당사는 Webflow 제작과 AI 웹사이트 제작을 모두 제공하고 있으므로, “우리 회사에는 어느 쪽이 맞는가”를 무료로 판단해 리포트해 드릴 수 있습니다. Figma→Webflow 이전으로 고민하는 분도 만드는 방법의 선택부터 부담 없이 무료 상담으로 오세요. AI 웹사이트 제작의 내용은 AI 웹사이트 제작 페이지에 정리했습니다.
Figma에서 Webflow로 복사해 붙여 넣기를 실제로 해 봤습니다
끙끙대면서이긴 하지만, 실제로 Figma에서 Webflow로 디자인을 복사해 붙여 넣어 봤습니다. 거의 첫 녹화라 2배속으로 들으셔도 될 것 같습니다. 또 마지막에 정리를 넣어 두었으니 정리만 보시면 빨리 다 보실 수 있습니다.
자주 묻는 질문
Figma로 만든 기존 디자인을 그대로 Webflow에 복사할 수 있나요?
할 수 없습니다. 오토 레이아웃으로 다시 짜는 것이 필수입니다. 복잡한 레이아웃 그대로 복사하면 일부가 이미지로 억지로 붙여 넣어지거나 드롭 섀도가 재현되지 않기도 합니다.
플러그인과 앱은 무엇이 다른가요?
플러그인은 “Copy to Webflow”에 의한 단발성 복사, 앱은 컴포넌트나 디자인 토큰을 지속적으로 동기화하는 구조입니다. 2026년 시점에는 Figma 쪽에서만 동기화를 시작할 수 있게 되었습니다.
복사 버튼이 파랗게 되지 않아 복사할 수 없을 때는 어떻게 하나요?
Webflow 사이트와 연동이 되지 않은 상태입니다. 복사 버튼 바로 위의 “Choose Webflow site”에서 복사할 대상 사이트를 선택합시다.
Webflow에서 Figma로 디자인을 역출력할 수 있나요?
할 수 없습니다. Webflow의 템플릿에서 디자인을 변경하는 경우에도 Figma로 옮길 수 없으므로 Webflow에서 작업하게 됩니다.
결국 Figma와 Webflow는 어떻게 나눠 쓰는 것이 현실적인가요?
필자의 실제 프로젝트에서는 Figma는 “AI 이미지 생성이나 간단한 목업으로 겉모습의 합의를 만드는” 데까지, 구축은 Webflow에서 처음부터 짜는 형태로 정착했습니다. 전부 오토 레이아웃으로 짜서 복사하는 것보다 결과적으로 빠르고 수정도 적기 때문입니다.
