%402x.svg){kind=icon}
![[혁명] Figma에서 WebFlow로 디자인을 복사하여 붙여넣는 방법](https://assets-global.website-files.com/60a44160bf4fbbd00c1a5e0a/63e47029ee9f14d60881bf4c_figma%E3%80%80Webflow.webp)
이제 Figma에서 Webflow로 디자인을 복사하여 붙여넣을 수 있게 된 것 같은데 사실인가요?실제로 얼마나 편리할까요?복사하여 붙여넣는 것만으로 웹 사이트를 게시할 수 있나요?
이번에는 이러한 질문에 답하겠습니다.이 디자인은 2023년 2월에 FIGMA에서 WebFlow로 복사되어 사용되었습니다.트위터 계정에서 FIGMA 플러그가 출시되었다는 발표가 있었습니다.저는 이 소식을 바로 제 트위터 계정에 퍼뜨리고 해설 기사 신청자를 모집했습니다.
제 트위터는 이제 막 시작해서 거의 반응을 모을 수 없었지만 구글 검색 횟수와 트위터에서의 열기를 보고 필요하다고 판단해서 설명 글을 쓸까 합니다.
이 글을 쓰면서 Webflow와 거래하고 있는데 Webflow 안내, 제작, SEO 등에 대해 신뢰할 수 있는 회사로부터 요청을 받았습니다. Figma에서 WebFlow로 디자인을 복사하여 붙여넣는 방법을 설명하겠습니다.지원해 주셔서 대단히 감사합니다.
Figma에서 Webflow로 디자인을 복사하여 붙여넣는 방법
먼저 Figma에서 Webflow로 디자인을 복사하여 붙여넣는 방법을 설명하겠습니다.아래 동영상을 참고하세요.일본어로 설명하겠습니다.그리고 이 글 말미에는 실제로 Figma에서 웹플로우로 디자인을 복사해서 붙여넣은 설명 영상도 올렸으니 시간이 되시면 참고하시기 바랍니다.
이번에는 아래 단계에 따라 진행하겠습니다.
- Figma에서 웹플로우 플러그인 다운로드
- 프로젝트 타키아게
- 레이아웃 구성
- 복사해서 붙여넣어보도록 하겠습니다
그럼 바로 시작하겠습니다.이번에 설명할 동영상은 다음과 같습니다 ↓ (영어)
1단계: Figma의 웹플로우 플러그 사용
Figma 디자인을 복사하여 Webflow에 붙여넣으려면 figma 내의 전용 플러그를 사용해야 합니다.Figma 플러그는 아래에서 사용할 수 있습니다.
>>피그마-웹플로우 공식 (영어)
2단계: 프로젝트 키우기
Figma에서 WebFlow 플러그인을 표시한 후 “시도”를 눌러 새 Figma 프로젝트를 시작하십시오.Figma 커뮤니티에서도 검색할 수 있습니다.
3단계: 플러그를 사용하여 레이아웃을 만들어 봅시다.
플러그를 다운로드하면 일반 Figma와 함께 Webflow의 레이아웃 기능이 표시됩니다.여기서부터는 디자인을 드래그하여 figma에서 디자인을 만들어 보겠습니다.
처음 열면 Webflow와 연결 화면이 표시되므로 디자인을 복사하여 붙여넣고 싶은 프로젝트를 선택하여 링크합니다.
기존 Figma 디자인을 복사하여 붙여넣을 수 있는 것도 아니고 자동 레이아웃 기능을 사용하는 것은 필수인 것 같습니다.자동 레이아웃을 사용하는 경우 각 항목에 대해 “Column”과 같은 이름이 표시됩니다.
이 이름을 Webflow에 붙여넣으면 클래스로 반영됩니다.따라서 Figma를 디자인할 때부터 이해하기 쉬운 이름을 염두에 두십시오.
4단계: 완성된 디자인을 복사하여 Webflow에 붙여넣기
디자인을 만들면 “Copy to Figma”가 파란색으로 바뀌므로 여기를 클릭하여 복사할 수 있습니다.문제가 해결되지 않으면 Webflow 사이트와의 연결이 완료되지 않았으므로 복사 버튼 바로 위에 있는 “Webflow Site 선택”에서 복사 대상을 선택해 보겠습니다.
이제 적절한 Webflow 프로젝트에 붙여넣기만 하면 됩니다.지금은 Figma에서 Webflow로 복사하여 붙여넣는 작업이 완료되었습니다.참고로 웹플로우에서 Figma로의 역방향 출력은 불가능합니다.
여기까지 읽으신 분들의 심정을 잘 압니다.제가 지금 알고 싶은 것은“Figma에서 만든 기존 디자인을 복사하여 Webflow 플러그에 붙여넣을 수 있나요?”맞아요.조금만 더 기다려 주세요!현재 “별도로 디자인한 것을 복사하여 붙여넣을 수 있는지 여부”와 이를 위한 최선의 방법을 조사하고 있습니다.
＞포스트스크립트 2023,0316
Figma에서 Webflow로 디자인을 복사하려면 자동 레이아웃 기능을 사용해야 합니다.복잡한 레이아웃을 만들어 복사 및 붙여넣기를 하면 일부 이미지가 강제로 복사 및 붙여넣기되어 드롭 섀도우가 제대로 작동하지 않습니다.
시간이 좀 걸릴 수 있지만 Figma to Webflow의 세부 정보 및 편리한 사용법에 대한 후속 보고서를 기다리십시오.트위터최대한 빨리 알려드리겠습니다!
웹플로우와 피그마 중 어느 것이 더 빠릅니까?
“익숙한 도구에 따라 다릅니다”라는 대답은 아무것도 아닌 것 같다는 생각이 들었기 때문에,둘 다 조작에 익숙하다는 가정하에 이야기하겠습니다.
그냥 디자인이라면 figma
외곽선을 만드는 레이아웃 부분의 디자인, 이미지, 소재 등을 배열하는 데에는 Figma가 더 빠르다는 생각이 듭니다.Figma로 드래그 앤 드롭으로 디자인을 만들 수 있고, 자료를 만들어 SVG로 출력할 수도 있습니다.문제는 Webflow 플러그에 맞춰 디자인을 만들어야 한다는 것입니다.제 경험 이외에는 글을 쓰고 싶지 않으니 조금만 더 기다려 주세요.
문의 등 설정을 변경하는 항목은 Webflow입니다.
조회 기능을 만드는 등 디자인뿐만 아니라 설정을 조작하는 부분까지 만들 때는 Webflow로 부품을 만드는 것이 더 빠르다는 생각이 듭니다.
Webflow 템플릿에서 디자인을 변경하더라도 디자인을 Figma로 이전할 수 없으므로 Webflow로 작업하게 됩니다.
추천 템플릿 문서를 보려면 여기를 클릭하십시오.
>>[템플릿] 6 가지 놀라운 웹 플로우 템플릿 선택!무료 사용○
실제로 Figma에서 Webflow로 복사 및 붙여넣기를 시도했습니다.
그렇다고 말하고 있지만 실제로 Figma에서 Webflow로 디자인을 복사하여 붙여 넣었습니다.거의 첫 녹음이라 그냥 2배 속도로 들어야 할 것 같아요.그리고 요약본도 마지막에 올라와 있으니 요약만 보면 금방 다 보실 수 있을 거예요.
추가 정보는 무료 이메일 뉴스레터를 통해 안내해 드리겠습니다.
WEBFLOW 전문가로 비즈니스를 하고 있는 쿠리타 본인이 실제로 사용해본 경험이 있으며, 편리하다고 느꼈던 웹플로 사용 방법, 사업 계획, 경험, 프로세스 등에 대한 정보를 전파하고 있습니다.필요하지 않은 경우 1초 만에 빠르게 해독할 수 있습니다.다음으로 1천만 건의 매출을 목표로 하고 있습니다.
