디자이너의 AI
AI 보조 디자이너들을 조사해 보았다.
Figma AI 기능 비교 정리
1. Figma First Draft
핵심 기능: 아이디어 → 디자인 자동 생성
사용 방법: 프롬프트 입력 → 완성도 있는 UI 레이아웃 초안 생성예시: “여행 앱 홈 화면” 입력 → 헤더, 카드 리스트, 네비게이션 자동 배치
장점: 0에서 시작하지 않고 빠르게 방향성 잡기 가능 디자이너가 수정·세부 디자인에 집중 가능
위치: Figma 디자인 캔버스 안에서 바로 사용
2. Figma Site
핵심 기능: 노코드 웹사이트 자동 생성
사용 방법: 텍스트 프롬프트로 “회사 랜딩페이지” 요청 → 실제 웹 페이지 형태로 자동 제작
결과: 섹션(히어로, 소개, CTA 등) 자동 생성 브랜드 컬러/폰트 적용 가능 반응형 레이아웃 자동 생성
특징: 웹사이트 형태로 바로 배포할 수 있음 디자인 → 퍼블리싱 단계를 크게 단축
3. Figma Make
핵심 기능: AI 기반 프로토타입 자동화 (바이브 코딩) 디자인 완료 후 “프로토타입 만들어줘” 입력 버튼 → 페이지 연결, 스크롤 인터랙션 자동 설정 프롬프트를 활용한 바이브 코딩 가능. 레퍼런스 이미지를 업로드하여 디자인 변경 가능.
단점: make 로 생성한 후 figma 디자인 툴로 수정이 불가능함. 프롬프트로 수정 가능.
html.to.figma 플러그인을 활용하여 figma로 옮기는 방법이 있음.
4. Figma plugin
디자인 시스템 : Figr
html.to.figma : url을 넣으면 홈페이지를 피그마로 그려줌
Tailwind CSS color Generator : color system 만들어줌
Stark : 명도 대비 적합성
Mockuuups : Studio 다양한 목업
Aleto : 2D image → 3D image
AI 디자인 도구
1. UI design
https://stitch.withgoogle.com/
Google product - Gemini
standard mode 로 사용하면 figma 로 바로 복붙 가능한 것이 큰 장점임.
UX에 진심인 UI 제작
figma site 와 비슷한 기능
구독시 figma로 export 가능
figma make 와 비슷한 기능
figma로 export 하기 위해 plugin 필요
이미지 제작을 같은 프롬프트를 활용하여 비교해 보았다.
의외로 Figma Make에서 자동 생성된 문 이미지는 기대와 다르게 표현된다.
‘기회의 문 메타포’를 요청했더니 서양 전통 고택의 현관문 같은 이미지의 결과물이 생성됨.
figma make
readdy
lovable그 외
figma site 와 비슷한 기능
sitemap, wireframe, styleguide, design
2.UX design
구글 플레이스토어의 후기에 있는 텍스트들을 데이터화 할 수 있음.
UX 리서치에 참고 가능
사용자 조사 자동화
ai interview
https://www.syntheticusers.com/
가상 사용자 분석
GPT로 대체 가능
