첫 디자인

1홈에서 시작하기

앱을 시작하면 홈이 열립니다. 최근 파일이 그리드나 목록으로 표시되고, 새 파일, 파일 열기, 템플릿, 디자인 시스템, 장면 템플릿을 사용할 수 있습니다.

위쪽의 프롬프트 상자에 한 문장을 쓰면 디자인을 시작할 수 있습니다. 만들 것(랜딩 페이지, 모바일 앱, 웹 앱, 슬라이드, 대시보드, 기타)과 크기(데스크톱, 태블릿, 모바일, 슬라이드)를 고른 뒤 설명을 입력하세요. 내장 에이전트가 새 캔버스에 그립니다.

그 아래의 가져오기 카드로 Figma 파일, 웹 페이지, 재현할 스크린샷, pen.dev 파일을 엽니다. 홈이 보이는 상태에서 Cmd+N을 누르면 빈 파일이 만들어집니다.

2보드 그리기

1. F를 눌러 프레임 도구를 선택하고 캔버스에서 드래그합니다. 최상위 프레임은 보드가 되며, 화면, 페이지 섹션 또는 슬라이드로 쓰입니다.
2. R, O, T를 눌러 그 안에 사각형, 타원, 텍스트를 추가합니다.
3. 레이어를 선택하고 오른쪽 패널에서 크기, 채우기, 선, 효과를 편집합니다.
4. 보드에 자동 레이아웃을 켜면 자식 요소가 간격과 패딩을 두고 쌓입니다.

3저장하기

Cmd+S로 .de 파일을 저장합니다. 일반 JSON 파일이라 git에서 차이를 보기 쉽고 에이전트도 읽을 수 있습니다. 이미지는 기본적으로 옆의 <name>.assets/ 폴더에 저장되며, 에이전트는 모든 이미지를 포함한 단일 파일로 저장할 수도 있습니다.

4미리보기

Cmd+P를 눌러 미리보기를 엽니다. 위쪽에서 휴대폰, 데스크톱, 캔버스 중 하나를 고릅니다. 화면으로 표시한 보드는 웹사이트의 페이지처럼 동작하며 주소 표시줄과 뒤로/앞으로 이동을 쓸 수 있습니다.

5템플릿에서 시작하기

파일의 템플릿에서 새로 만들기를 선택하면 내장 장면 템플릿(카드, 비교, 슬라이드, 인포그래픽, 튜토리얼, 캐러셀)이 열립니다. 어떤 문서든 파일의 템플릿으로 저장을 사용해 나만의 템플릿으로 만들 수 있습니다.

프롬프트 센터에는 시작 화면, 모바일 앱, 웹 페이지, 대시보드, 컴포넌트, 수정 작업을 위한 기성 프롬프트가 있습니다. 자주 쓰는 프롬프트는 나의 프롬프트에 저장하세요.