Figmapedia
목록으로 돌아가기
소소한 꿀팁

Chatgpt 이미지 생성 기능으로 ui만들고 figma 시안으로 가져오기 그리고 코딩까지!이제 chat gpt도 클로드처럼 쓸 수 있다👀

피그마 튜터2025. 4. 11.

[Chatgpt 이미지 생성 기능으로 ui만들고 figma 시안으로 가져오기 그리고 코딩까지!이제 chat gpt도 클로드처럼 쓸 수 있다👀]

이번에 Chat gpt에서 이미지 기능 업데이트 되고 UI화면 그리는 기능도 성능이 좋아졌나 테스트 해봤더니 아직 클로드만큼은 아니지만 훨씬 좋아졌네요. (한글 글씨가 뭉개져서 엉망진창인건 여전하고요!😂) 테스트해본 과정과 프롬프트, 결과물 간단히 공유 드려 봅니다.

1️⃣프롬프트 입력해서 디자인 시안 뽑아내기

# “Figma pedia”라는 제목의 앱에 대해 깔끔하고 현대적인 모바일 UI 화면(iOS 스타일)을 디자인해줘

레이아웃은 아래의 구조화된 섹션을 따라줬으면 좋겠어. 그리고 모든 텍스트 폰트패밀리는 ’pretendard’로

설정해줘. 화면에 반영된 텍스트는 한글이어야 함.

+상세화면 프롬프트는 피그마 피디아에 넣어두었어요.

(https://www.figmapedia.com/1cefdea8-0034-80c9-a573-c4921edba888)

2️⃣디자인 콘텐츠를 유지하면서 아래 설명에 따라 강조하는 부분을 다르게 구성해달라고 요청한다.(ex 브랜딩이 강조된 버전 , 이미지 요소가 강조된 버전 등등)

3️⃣코딩까지 마쳐달라고 하면 캔버스 창이 열리면서 코딩 시작함

4️⃣figma에 이미지 가져와서 codiaA I같은 플러그인으로 원본으로 만들면 끝

(단 이 단계는 비추천. 진행 시 유료 플러그인이라 1회 정도만 무료 테스트 가능하며, 디자인이 완전히 유지되는것은 아님. 유료 결제해서 써봤는데 그 비용을 지불할만큼 정확도가 높지 않아요.)