UI디자인할 때 Figma에서 ChatGPT 활용하는 방법

안녕하세요. 김형준입니다.
디자인 작업을 할 때 ChatGPT를 어떻게 써볼 수 없을까? 하는 고민들이 있었는데,
이번에 어느정도 갈피를 잡은 것 같아서 공유합니다.

미드저니, Dall2, SD 같은 Image-Gen 툴은 사실 UI/UX에서 쓸 일이 많지 않다고 생각됩니다.
무엇보다 편집 가능한 작업물이 나오지 않기 때문에 시안을 뽑는 정도에 그치는 것 같습니다.

따라서, 이번에 제가 알아본 방향의 핵심은 '편집가능한' 디자인 요소를 ChatGPT를 통해 뽑거나 수정하는 것입니다.

원리는 간단합니다.
ChatGPT가 코드는 잘짜주니까, 디자인을 코드로 변환해서 물어보고 다시 코드로 받는 겁니다.

이렇게 생각하게 된 계기는
1. 같은 팀 개발자 분이 'ChatGPT로 코딩하니 알아서 적당한 레이아웃을 짜주더라'하는 것을 들었습니다.
2. Webflow + AI의 출현으로 힌트를 얻었습니다.



Code Export와 Import는 Figma의 플러그인을 이용해야 합니다.
이때 사용할 2가지의 플러그인은 'code.to.design', 'Clapy' 입니다.
*Clapy는 회원가입이 필요합니다.

Clapy는 Figma의 요소를 React로 Codesandbox를 통해 뽑아내주는 플러그인입니다.

그리고 code.to.design은 HTML과 CSS를 입력하면, Figma 요소로 바꿔주는 플러그인입니다.

두 플러그인을 다리로 삼아, ChatGPT에게 React to HTML/CSS 변환을 하면서
동시에 원하는 프롬프트를 입력하면 되는 것입니다.

도식으로 정리하면 다음과 같습니다.

프롬프트 사용 내용 이 있습니다만, 사실 내용 자체는 코드만 빽빽해서 보실 것은 없습니다.

ChatGPT로 수정된 결과

위에서부터

입니다.


물론 배치들이 좀 박살나고 틀어진 것이 있습니다만, Raw 값을 보여드리려고 수정을 하진 않았습니다.
어쩌면 옮기는 와중에 제가 누락한 코드가 있다거나, 프롬프트를 대충써서 그런 것일지도 모르죠.
중요한 것은 이것들은 편집 가능한 Figma 요소로 제 손에 들어왔다는 것입니다.
 
지금은 매우 번거롭고 복잡한 과정을 거치지만, 이런 식으로 되면 Figma AI는 뚝딱 아닐까요?
감사합니다.


*하루 안에 나온 산출물이라 그 외의 레퍼런스 체크나 더 나은 방향에 대한 검증은 이뤄지지 않았습니다.