First Draft를 사용하면 몇 분 안에 아이디어를 편집 가능한 와이어프레임 또는 디자인으로 변환할 수 있습니다. 이렇게 하면 광범위한 디자인 가능성을 빠르게 살펴볼 수 있어, 처음부터 초기 디자인 컨셉을 구축하는 데 드는 수고를 덜어 줍니다.
작동 방식
Figma AI는 Figma가 구축한 와이어프레임과 디자인 라이브러리를 디자인 생성의 기초로 사용합니다.
각 라이브러리에는 제공한 설명을 기반으로 디자인을 구성하는 데 사용되는 컴포넌트 세트 또는 컴포넌트 스택이 있습니다.
이 라이브러리는 웹사이트와 모바일 앱의 일반적인 디자인 패턴과 일치하는 디자인을 생성하는 데 탁월합니다. 하지만 이러한 디자인 프레임워크 외부에서 컨셉을 생성할 때 문제가 발생할 수 있습니다.
다음 프롬프트는 일반적으로 강력한 출력을 생성합니다.
- BBQ를 판매하는 상점의 결제 페이지
- 반려동물 사료를 위한 배달 앱
- 콘텐츠 전략 컨설팅 회사를 위한 마케팅 웹사이트
Figma AI는 웹사이트나 모바일 앱에서 흔히 볼 수 있는 디자인 패턴을 사용하지 않기 때문에 다음과 같은 프롬프트를 사용하는 데 어려움을 겪을 수 있습니다.
- 소설을 위한 책 레이아웃
- 생일 파티 초대장
- 물고기 모양의 전단지
디자인을 생성한 후에는 다른 프롬프트나 스타일 컨트롤 컬렉션을 사용하여 디자인을 변경할 수 있습니다.
팁: 자체 디자인 시스템을 사용하여 디자인을 생성하는 것은 불가능하지만, 곧 해당 기능을 제공할 예정입니다.
First Draft 만들기
- 도구 모음에서 Actions(액션)를 클릭합니다.
- First Draft(초안)를 선택합니다.
- 필요한 경우 라이브러리를 클릭하여 웹사이트 또는 모바일 앱 와이어프레임 또는 기본 디자인을 만듭니다. 라이브러리를 선택하지 않으면 Figma AI가 프롬프트에 가장 적합한 라이브러리를 선택합니다.
- '개발자 도구 스타트업을 위한 가격 책정 페이지'와 같은 프롬프트를 입력하거나, 사용 가능한 제안 사항 중 하나를 클릭합니다.
- Make it(만들기)을 클릭합니다.
- 프롬프트 아래의 썸네일을 클릭하여 다양한 테마를 미리 봅니다.
- 디자인이 마음에 들면 Actions(액션) 메뉴를 닫습니다. 더 세밀하게 조정하려면 Make changes(변경하기)를 클릭합니다.
디자인 변경하기
참고: Actions(액션)를 닫으면 First Draft(초안) 라이브러리를 사용하여 디자인을 변경할 수 없습니다. 대신 다른 디자인과 마찬가지로 속성을 수정하여 디자인을 계속 편집할 수 있습니다.
Make changes(변경하기) 버튼을 클릭하면 디자인을 수정할 수 있는 두 가지 옵션이 있습니다.
하나의 디자인을 변경하는 동안 각 옵션 간에 전환할 수 있습니다.
팁: 다양한 디자인 버전을 비교하고 싶으신가요? Windows의 경우 Control D, MacOS의 경우 Command D를 사용하여 선택한 프레임을 복제한 다음 계속 변경해 보세요.
프롬프트를 사용하여 디자인 사용자 지정하기
프롬프트를 사용하면 디자인의 테마, 콘텐츠 또는 구조를 수정할 수 있습니다. 예를 들면 다음과 같습니다.
테마
- 수박 테마 사용하기
- 다른 색 구성표 시도하기
- 더 생생하게 만들기
콘텐츠
- 설정 아이콘을 톱니바퀴로 변경하기
- 팟캐스트가 아닌 오디오북을 중심으로 제작하기
- 고객 후기 섹션에서 고객 이름 변경하기
구조
- 차트 상단에 '독일에서 인기'라는 섹션 추가하기
- 탐색 표시줄 아래로 추천 섹션 이동하기
팁: 선택한 요소에만 프롬프트를 적용하려면 디자인의 한 부분 이상을 선택합니다.
스타일 컨트롤을 사용하여 테마 사용자 지정하기
스타일 컨트롤을 사용하여 테마를 조정하면 디자인의 색상, 테두리 반경, 간격, 타이포그래피를 제어할 수 있습니다.
색상
또는 을 클릭하여 밝은 모드와 어두운 모드 사이를 전환합니다. 사전 설정된 색상 중 하나를 선택하거나 색상환을 클릭하여 원하는 색상을 선택하면 테마에 새 색상을 적용할 수도 있습니다.
테두리 반경
해당 개체의 테두리 반경을 늘리거나 줄이려면 슬라이더를 드래그합니다.
간격
항목 사이의 간격을 늘리거나 줄이려면 슬라이더를 드래그합니다.
글씨체
제목, 본문 또는 레이블을 클릭하여 변경할 텍스트 요소 그룹을 선택합니다. 그런 다음 새 글꼴을 클릭하여 디자인에서 미리 봅니다.
팁: 예상대로 작동하지 않나요? Figma Design에서 AI 도구 문제 해결 가이드를 확인하세요 →