Figma, 최고의 드로잉 코딩 툴 | 피그마 to 웹플로우

Figma로 드로잉 코딩해보기

이번 포스팅에서는 tldraw가 아닌 Figma로 드로잉 코딩을 해보려고 합니다.

너무 당연하지만 피그마는 최고의 디자인 툴입니다. 피그마가 가진 자유로운 드로잉 툴과 실제 CSS에 버금가는 기능들이 있기 때문이죠.

그리고 많은 분들께서 피그마 디자인을 프로토타입이 아닌, “실제 구동하는 웹사이트로 만들 수 없을까?” 라는 상상을 해보셨을거라고 생각합니다. 저도 매번 서비스를 개발할 때마다 “이거 코드로 언제 다 변환하지?”라는 생각을 했습니다🥲

Dev 모드가 있긴 하지만,,,

Figma에서 Dev 모드를 제공하기 시작하면서 Figma 컴포넌트, 프레임 등을 바로 코드로 뽑아볼 수 있습니다. 하지만 이 또한 React나 Vue 등 기본 코드 베이스를 세팅하고 난 후, 코드를 구조에 맞게 붙여넣어야 하는 했기 때문에 개발자에 한정된 기능이었습니다.

근데 찐으로 코드 한줄 볼 일 없이,

피그마의 컴포넌트를 웹서비스로 만들 수 있는 방법이 있습니다.

피그마 to 노코드 웹빌더

최근 가장 잘나가는 노코드 웹빌더인 Webflow와 Framer에서 피그마 플러그인을 직접 제공하고 있습니다.

피그마 플러그인은 피그마 서비스 내에서 사용할 수 있는 앱인데요,

웹플로우와 프레이머의 플러그인은 피그마 내의 컴포넌트나 프레임을 그대로 자신들의 서비스에 붙여넣을 수 있도록 합니다.

[피그마 to 웹플로우 사용법]

1. 플러그인 실행시키기

2. 옮기고 싶은 프레임 선택하기

3. 플러그인에서 생성하기

4. 웹플로우에 가서 붙여넣기

이렇게 되면 피그마에서 자유롭게 디자인하고, 웹플로우와 프레이머에 간단하게 컨트롤C+V를 하면서 웹페이지를 뚝딱 만들어 낼 수 있게 됩니다!!

피그마에서 디자인을 하는 것도 드로잉의 일종이라고 봤을 때,

피그마가 tldraw에 비해 드로잉 코딩에 더 적합해보여요.

피그마 to 웹플로우, 프레이머 유의사항

이렇듯 피그마 to 웹플로우, 프레이머는 매우 유용하지만, 잘 사용하기 위해서는 몇가지 유의사항이 있습니다.

다음에 더 자세한 튜토리얼을 올려보고 여기서는 몇가지만 언급해보겠습니다.

1. 무조건 프레임을 사용하고, Auto Layout을 사용해야 한다.

   해당 기능은 CSS에서 컴포넌트의 레이아웃을 설정하는 Flexbox를 표현한 것입니다. 레이아웃을 표현하는 만국 공통어인 것이고, 이를 활용하면 웹플로우와 프레이머에서도 똑같은 레이아웃을 구현할 수 있습니다.

2. 프레임의 이름을 꼭 지어주어야 합니다.

   이는 웹플로우에서 프레임을 잘 구분하고 수정작업을 할 때 용이합니다.

그럼에도 아직 안되는 것!

이렇듯 피그마를 드로잉 코딩의 툴로 활용하고 피그마 to 웹플로우, 프레이머를 사용하면 코드 한줄 볼 필요없이 웹페이지를 만들 수 있습니다.

이는 노코드 웹빌더 서비스의 발전으로 프론트엔드 코드가 점점 추상화되고 GUI 형태로 진화하고 있기 때문에 가능한 것입니다. (인공지능의 발전과 GPT4 Vision의 등장과는 별개로 가능했던 것이죠)

• html 또는 jsx 코드 → 드래그앤드롭

• css 또는 tailwind 코드 → 마우스 클릭

• javascript → ??

그러나 이처럼 정적인 웹컴포넌트를 옮기는 것은 문제가 없지만, 동적인 UI state 변경, 복잡한 이벤트 또는 애니메이션은 옮길 수 없습니다.

복잡한 이벤트와 애니메이션은 웹플로우에서 간단한 javascript 코드를 사용하면 가능하지만 이 또한 난이도가 있어 쉽지 않습니다.

결국 앞으로 LLM과 Vision 인공지능 모델이 기여할 수 있는 부분이 javascript 코드와 동적인 로직에 있지 않을까 생각하고 있습니다. 동적인 구조를 말과 그림으로 설명하면 javascript를 직접 노코드 웹빌더에 추가해주는 그런 모습이요!

그래서 당분간 동적 영역을 커버하는 웹플로우 플로그인을 기획해보자 합니다.

• javascript → 그림 + GPT4 Vision

이 부분에 대해서 여러분의 생각도 궁금합니다ㅎㅎ 댓글로 남겨주세요:)