Figma에서 Webflow 쉽게 만들기
웹 디자인 워크플로우 간소화
노코드 전성시대
노코드 코딩 지식이 없어도 노코드를 활용하면 제품 팀이 아이디어를 빠르게 구현하고 검증하며 반복할 수 있어서 제품의 개발 방식이 바뀌고 있다. 최근에는 웹플로우, 버블, 글라이드와 같은 노코드 도구들이 등장해서, 이제는 아이디어를 빠르고 쉽게 구현할 수 있게 되었다.
노코드는 개발 주기를 단축할 뿐만 아니라 제품 팀이 사용자 피드백에 더욱 민첩하고 신속하게 대응할 수 있도록 해준다. 개발자의 도움 없이도 쉽게 변경할 수 있으므로 팀은 빠르고 효율적으로 기능을 테스트하고 반복할 수 있다.
Source: uxstudioteamFigma to Webflow 플러그인 출시
Webflow labs에서 최근 'Figma to Webflow'라는 플러그인을 출시하였다. 이를 사용하면, 피그마에서 제작한 디자인을 손쉽게 웹플로우로 전송하여 제작할 수 있다. 단순히 피그마 디자인 파일을 복사하여 붙여 넣기만 하면 즉시 웹사이트를 빠르게 만들 수 있도록 도와준다. 이 플러그인을 사용하면 미리 빌드된 구조와 레이아웃을 활용하여 히어로 섹션과 내비게이션 바 등을 쉽게 만들 수 있다.
1. 시작하기(기본셋팅)
가장먼저 Figma to Webflow라는 플러그인을 Figma에 설치를한다.
플러그인 설치'Run' 버튼을 클릭하면, Webflow 계정과 연결해야 한다. 사용자가 원하는 워크스페이스를 선택하면 된다.
Webflow < > Figma 연결2. 피그마 디자인
기본적으로 모든 프레임에 자동 레이아웃을 적용해야 한다.
피그마 Auto layout만약 자동 레이아웃이 적용되어 있지 않으면, 느낌표 아이콘이 나타난다. 이 아이콘을 클릭하면, 자동 레이아웃이 적용되어 있지 않은 부분이 레이어에서 자동으로 표시되므로 매우 편리하다.
플러그인 느낌표 표시3. 레이아웃 설정
'Structure' 기능을 사용하면 첫 구조부터 직접 디자인하여 만들 수 있다. 이를 위해서는 원하는 콜럼을 선택하면 된다.
Structure이미 만들어진 레이아웃을 사용하면 더욱 간편하게 디자인을 만들 수 있다. 그러나 이 경우 디자인의 자율도는 낮아질 수 있다.
Layouts4. 레이어 이름 설정
웹플로우에서는 레이어 이름이 정확하지 않으면 제대로 인식되지 않을 수 있다. Figma에서 웹플로우로 디자인을 복사할 때, 모든 Figma 레이어 이름이 클래스로 변환됩니다. 이에 따라, Webflow의 Class를 기본적으로 이해해야 한다.
레이어 네이밍을 잘 해주어야한다.또한 HTML 포멧으로 H1, H2, H3, H4, H5, H6, P, A, Div 레이어 네이밍을 해줘야한다.
폰트 설정
만약 피그마 디자인에 사용자 정의 글꼴을 사용하고 있다면, 해당 글꼴이 올바르게 전송되도록 하기 위해서는 피그마 디자인을 전송하기 전에 Webflow 사이트에 해당 글꼴을 업로드해야 한다. Webflow에 사용자 정의 글꼴을 추가하지 않으면 전송 중에 글꼴이 손실될 수 있다.
5. 복사 붙쳐넣기
복사하고자 하는 사이트를 선택한 후 버튼을 클릭하면 쉽게 복사할 수 있다. 이후, 복사한 내용을 Webflow로 이동하여 Cmd+v 혹은 Ctrl+v를 누르면 자동으로 Webflow에 추가된다.
Site 선택
Webflow에서 복+붙 완료상태마치며
총론적으로, 피그마 디자인 파일을 통해 웹사이트를 제작할 수 있는 웹플로우 플러그인은 분명 혁신적이고 획기적인 도구이지만, 이를 사용하는 데는 여전히 학습 곡선이 존재한다는 점에 유의해야 한다.
노코드 툴 덕분에 제품 팀은 아이디어를 빠르고 효율적으로 구현하고 반복할 수 있게 되었지만, 이러한 도구를 효과적으로 사용하는 방법을 배우는 것은 여전히 필요하다. 그러나 시간과 연습을 통해, 노코드의 힘은 더욱 커질 것이며, 더 많은 개인과 팀이 혁신적이고 효과적이며 영향력 있는 제품을 만들어낼 수 있게 될 것이다.
레퍼런스
https://university.webflow.com/lesson/figma-to-webflow-plugin
