피그마 AI로 디자인 만들기 – 피그마 강좌 2-9

안녕하세요. 이번에는 Figma는 AI 기능을 소개해드릴게요. 프롬프트 기반으로 UI 디자인을 자동 생성하고, ‘Actions’를 통해 디자인 도구, 텍스트 작성, 이미지 편집을 지원합니다. 사용자는 ‘Design Tools’를 사용하여 쉽게 UI를 디자인하고, 스타일을 맞춤 설정할 수 있습니다. 현재 베타 단계인 이 기능은 향후 완성도가 향상될 예정입니다. Figma AI는 짧은 시간 내에 효율적인 디자인 작업을 가능하게 도와줍니다..!

Actions 기능: AI로 작업 효율화

Figma의 Actions 기능은 UI 디자인 작업을 지원하는 세 가지 주요 카테고리로 나뉩니다.

1. Design Tools: UI 제작, 프로토타입 생성, 레이어 이름 정리, 콘텐츠 대체.
2. Riffing and Writing: 텍스트 작성, 요약, 번역.
3. Image Editing: 이미지 생성 및 배경 제거.

Design Tools: AI로 UI 제작과 수정

Make designs (현재는 First Draft라는 이름으로 변경되었습니다.)

Make designs는 프롬프트를 입력하면 UI 디자인을 자동으로 생성합니다. 예제 프롬프트로 시작해보겠습니다.

기본 프롬프트 예제

• A pricing page for a SaaS app
• A flight tickets comparison app
• A profile for a social media app
• A to-do list app, with tasks for the day

커스텀 프롬프트 예제

A personal finance app that helps users manage their budgets, track spending, and plan for future expenses.

A fitness tracker app that logs workouts, tracks progress over time, and provides personalized exercise recommendations.

실습: “A meal planning app that helps users create weekly meal plans based on dietary preferences”라는 프롬프트를 입력해보세요. AI가 생성한 디자인은 초기 컨셉을 빠르게 시각화하는 데 적합하며, 기본 레이아웃과 구성 요소를 제공해줍니다.

Make changes

생성된 디자인의 스타일을 수정하는 기능입니다. 현재는 AI가 생성한 아트보드에만 적용 가능합니다. 다음과 같은 속성을 변경할 수 있습니다.

1. 컬러: 다크모드와 라이트모드 간 전환.
2. 둥근 처리: 버튼, 카드 등의 모서리 반경 조정.
3. 간격: 요소 간의 간격을 조정.
4. 폰트: 텍스트 스타일 변경.

실습

• 다크 모드로 전환: “Make this dark mode”를 선택하여 생성된 디자인을 다크 모드로 변경합니다.
• 폰트 변경: 브랜드 가이드라인에 맞는 폰트 스타일로 즉시 업데이트.

Image Editing: AI로 이미지 생성 및 수정

Make an image

Make an image 기능을 활용하면 디자인 컨텍스트에 맞는 이미지를 생성할 수 있습니다. 예를 들어, “A serene forest image featuring a variety of edible plants”와 같은 프롬프트로 이미지를 생성해봅니다.

실습

1. 숲 이미지 생성: A serene forest image featuring a variety of edible plants and herbs popular among vegetarians.
2. 자동차 이미지 생성: A sleek and modern Tesla electric car parked on a city street at dusk.

배경 제거

이미지에서 배경을 제거하거나 업스케일링 기능을 사용해 화질을 개선할 수 있습니다.

Riffing and Writing: 텍스트와 콘텐츠의 재작성

Rewrite this

기존 텍스트를 캐주얼한 톤이나 공식적인 톤으로 변환할 수 있습니다.
예를 들어, 뉴스 앱에서 “Make this more casual”을 사용하면 내용을 캐주얼한 표현으로 바꿔줍니다.

Translate to

작성된 텍스트를 다국어로 번역할 수 있습니다.
예: “Translate to Korean”을 통해 한국어로 번역.

Rename layers: 레이어 정리

AI가 레이어 이름을 자동으로 정리해줍니다. 오토레이아웃으로 반복되는 디자인에서 상위 요소를 선택해 이름을 일관되게 변경할 수 있습니다.

Figma AI는 짧은 시간 안에 디자인의 초기 컨셉을 시각화하고, 생산성을 크게 향상시키는 도구로 자리잡을 가능성이 큽니다. 현재는 완성도나 브랜드 아이덴티티의 반영 측면에서 한계가 있지만, 다음과 같은 상황에서 유용합니다.

1. MVP 제작: 초기 아이디어를 빠르게 프로토타입으로 구현.
2. GUI 초안: 비디자이너가 아이디어를 시각화하는 데 도움.
3. 콘셉트 테스트: 다양한 스타일의 시안을 빠르게 생성해 비교.