Figma Make 베타 사용해보기

포트폴리오 작업으로 피그마를 만지작거리다가 Figma Make 베타가 활성화되었길래 후다닥 사용해 보았다.

뜬금없이 활성화된 Figma Make

메뉴 구성

일반적인 생성형 빌더 UI와 유사하다

 

좌측에는 프롬프트 입력이 가능하고 입력칸 아래에 기능은 좌측부터 Paste a Figma Frame, Attach Design, Attach Image, Point and Edit 그리고 현재 AI 모델은 Claude Sonnet 4이다. 우측에는 결과물이 보이는데 상단 탭을 보면 프리뷰, 코드로 구분해서 보는 게 가능하다. 참고로 코드를 보니 Next, TailwindCSS, shadcn 기반으로 UI를 구성하는 거 같다. 먼저 화면 단위의 피그마 프레임을 붙여 넣어서 요청해 보았다.

 

Paste a Figma Frame

요청 원본 피그마 프레임

결과물..

 

프롬프트를 대충 작성하긴 했지만 프레임 내에서 위치, 크기 정보가 모두 있을 텐데 그걸 감안해도 퀄리티가 처참하다. 게다가 구현된 화면은 App.tsx 파일 하나에 때려 박다 보니 1,300여 줄이나 되어서 컴포넌트 단위로 구분해 달라고 요청을 했는데 다행히 컴포넌트로 구분을 해준다. 아직은 화면 단위 프레임을 통째로 때려 박는 건 리스크가 크다고 생각한다.

 

Attach Design

Attach Design 메뉴 화면

 

이번엔 Attach Design 메뉴를 테스트했는데 예상했던 화면이랑 좀 다르다. 여기서는 같은 팀에서 퍼블리싱된 컴포넌트만 보이는데 Variants가 포함된 버튼 컴포넌트로 요청을 해보았다.

요청 원본 버튼 컴포넌트

결과물..

 

예상이지만 Variants를 포함한 버튼 컴포넌트는 붙여 넣기가 제대로 되지 않는 거 같다. 코드를 뜯어보니 기존 shadcn 버튼 컴포넌트에 Figma라는 모호한 props를 추가해서 활용하는데 제일 큰 사이즈의 버튼만 반영되다 보니 이상한 결과가 나왔다. 아마 이 부분은 빠르게 수정될 거라 예상한다.

 

Attach Image

인스타그램 캡쳐화면을 요청

 

 

어설프게 피그마 프레임 단위로 요청보다는 오히려 이미지로 요청해서 수정하는 게 효율적일 수도 있을 거 같다. 다만 디자이너가 HTML, CSS 특히 TailwindCSS에 대해서 잘 안다면 효율적으로 작업이 가능할 거 같다.

 

Point and Edit

요소의 간단한 수정이 가능

 

웹브라우저의 개발자 도구랑 비슷한 Point and Edit로 요소를 클릭하면 사용자가 직접 수정이 가능한 요소가 툴바로 나오게 된다. 현재는 배경색, Border Radius, Padding, Margin 정도인 거 같은데 코드 베이스로 돌아가다 보니 지원되는 거 같다.

선택하고 없애달라고 요청했다

깔끔하게 사라졌다

 

Point and Edit 기능은 꽤 괜찮았다. 간단한 수정을 하는데도 프롬프트를 작성하는 건 귀찮고 특정 요소만 수정하거나 삭제하는데 사용성을 많이 고려했다고 생각이 들었다.

 

프리뷰, 코드

상단 탭의 프리뷰, 코드

 

디자이너 대부분은 프리뷰만 보겠지만 개인적으로 퍼블리싱도 가능하니 코드탭을 관심 있게 보았는데 구조는 아래와 같다.

Code 구조

 

components/ui에는 shadcn 컴포넌트가 기본적으로 있고, 사용자 요청에 커스텀으로 수정하는 방식 같다. 아예 커스텀으로 만들어지는 컴포넌트는 components에 위치한다.

 

혹시나 해서 화면 간 이동이 가능하냐고 요청을 했는데 처음에는 App.tsx 내에서만 상태 관리를 통해 화면을 교체시켜주기만 하였다. 그래서 폴더 기반이든 전통적인 라우트 방식이든 구현하고 필요하다면 화면 컴포넌트를 별도로 정리해 달라고 요청하였는데 결과는 꽤 괜찮았다. 이왕이면 Next의 폴더 기반 라우트 방식이었다면 더 깔끔했을 거 같지만

 

완벽은 아니지만 어느 정도 정리해준다

 

개발자 입장에서는 현기증이 나는 코드를 작성하지만 Cursor처럼 학습이 잘 된다면 추후 개선이 될 거라 생각한다. 하지만 디자이너가 작성하는 프롬프트로 학습을 한다면..

 

마무리

피그마 메이크를 사용하면서 얻는 게 뭘까? 개인적으로는 컴포넌트 단위를 빠르게 코드로 생성, 특정한 프로토타입을 실제 웹 환경과 가까운 형태로 구현 정도로 생각한다. 아직 전체 프로덕트 단위로 하는 데는 어려움이 있고, 컴포넌트 단위로 빠르게 코드로 작성하고 검증하는 데는 사용할만하다고 생각한다. 오히려 현재는 스토리북이랑 경쟁을 해야 하지 않을까 생각한다.