1. Auto Layout + AI 스타일 추천
Figma의 Auto Layout은 단순 정렬뿐만 아니라요.
AI가 추천하는 레이아웃 방향, 간격, 패딩 등을 제안해줘요.
- 예전에는 수동으로 24px 간격 입력했어야 했다면,
이제는 요소 수와 위치에 따라 자동으로 ‘자연스러운 간격’을 제안해줘. - 특히 카드, 버튼, 리스트를 여러 개 만들면
“이건 수직 정렬이 더 좋을 것 같아요” 같은 AI 정렬 가이드가 팝업으로 나옴.
실무에선 디자인 스타일 통일 + 빠른 반복 UI 구성에 아주 유용.
2. AI 기반 “Variant 생성” 기능 (컴포넌트 확장)
컴포넌트를 만들 때 자주 쓰는 **Variants (버튼의 다양한 상태 등)**를
이제는 AI가 추천하거나 복사할 때 자동 제안해줘.
예시:
- “Primary / Secondary / Disabled / Hover / Active”
이런 상태를 직접 만들지 않아도
하나만 만들면 AI가 추천 Variant 세트로 묶을 수 있음.
버튼 하나 만든 뒤, “Create variants” 클릭 →
AI가 상태별 디자인을 자동 분리하고 정렬해주는 기능을 제공 중 (일부 베타 계정 활성화)
3. Dev Mode에서 AI 기반 코드 구조 제안
Figma의 Dev Mode는 단순히 마진/패딩 확인용이 아니고, 이건 나도 회사 개발자한테 추천해줬어.
지금은 AI가 코드 컴포넌트 구조를 인식하고,
React, Tailwind, CSS 방식으로 자동 변환하는 기능도 추가되고 있어.
Div를 감싸는 구조- 버튼 →
<button className=...>자동 제안 - 이미지나 아이콘의 alt 텍스트까지 구조 분석 가능
개발자에게 넘길 때, AI가 제안한 코드를 참고하면 구조가 깔끔하게 나옴.
4. AI 문장 톤 바꾸기 (친근하게/공식적으로/짧게)
텍스트 생성만 되는 게 아니라,
생성한 문장을 클릭하고 → 톤 바꾸기 기능으로 다음처럼 바꿀 수 있어:
- “공식적인 톤으로 바꾸기”
- “짧고 직관적으로 만들기”
- “친근하게 변경하기”
예:
“Please sign up to access your dashboard.”
→ “대시보드를 사용하려면 가입해주세요!”
→ “가입하면 바로 시작할 수 있습니다”
브랜드 톤에 맞게 자동화된 마이크로카피 테스트에 최고!
5. FigJam에서 AI 브레인스토밍 & 정리 기능
Figma의 협업 화이트보드인 FigJam에서도 AI 기능이 들어갔어.
- 아이디어 몇 개만 적으면
자동으로 관련 키워드, 구조, 카테고리 분류해줌 - 회의 중 나온 키워드를 요약 → 정리 → 표로 시각화 가능
- ‘Generate Ideas’ 버튼 → AI가 자동으로 10개 아이디어 뽑아줌
특히 비디자이너 팀원과 아이디어 회의할 때 속도 + 논리 정리에 최적화됨
6. 디자인 → 텍스트 설명 역추적 기능 (Explain this)
디자인 요소에 대해
“이건 어떤 기능인지 설명해줘”라고 하면
AI가 기획 의도를 역으로 설명해주는 기능도 있어 (일부 실험 중)
예:
“이 버튼은 사용자가 이메일을 제출하고 가입 절차를 시작하도록 돕습니다.”
→ 프레임만 보고 기획서 문장으로 자동 작성
클라이언트 설명자료 만들 때 엄청 유용함.
7. AI 기반 Mock Data 삽입 (플러그인 없이)
기존엔 Content Reel, Mocky, Random User 같은 플러그인을 써야 했는데,
이제는 일부 텍스트 박스에
“Generate sample data” 기능이 직접 제공됨.
- 이름, 이메일, 전화번호, 날짜, 통계 숫자 등
→ AI가 실존하는 듯한 데이터로 자동 채워줌
프로토타입 테스트, 클라이언트 리뷰 때 가짜 콘텐츠 구성에 강력함
요약해 볼게
| 기능 | 핵심 내용 | 실무 활용 |
|---|---|---|
| AI 레이아웃 추천 | Auto Layout 속성 자동 제안 | 빠른 UI 정리 |
| Variant 추천 | 컴포넌트 상태 자동 정리 | 버튼/탭 등 반복 UI 제작 |
| Dev Mode 코드 제안 | Tailwind/React 코드 자동 생성 | 개발 협업 |
| 텍스트 톤 변경 | 공식 ↔ 친근 톤 변환 | 마이크로카피 작성 |
| FigJam 아이디어 정리 | 키워드 → 자동 분류/표 정리 | 회의 요약 |
| 디자인 설명 생성 | 디자인 요소의 기능 설명 자동화 | 클라이언트 공유 |
| 가짜 데이터 삽입 | 실전 같은 콘텐츠 자동 채우기 | 목업 테스트 |