Design Editor문서에디터 사용법
캔버스와 도구
캔버스가 창 전체를 채우고 패널은 그 위에 떠 있습니다. 모든 도구에는 한 글자 단축키가 있습니다.
1도구
| 도구 | 기능 |
|---|---|
선택 V | 레이어를 선택, 이동, 크기 조절합니다. |
프레임 F | 프레임을 그립니다. 최상위 프레임은 보드, 화면 또는 슬라이드가 됩니다. |
사각형 R | 도형 슬롯입니다. 메뉴에 다각형, 별, 선, 아이콘, 브라우저도 있습니다. |
타원 O | 원과 타원, 그리고 호와 도넛 모양입니다. |
다각형 Y, 선 L | 정다각형과 직선입니다. |
펜 P | 여러 앵커로 이루어진 패스를 그립니다. Enter나 Escape로 패스를 마칩니다. |
연필 Shift+P | 자유롭게 그린 선을 부드러운 곡선으로 만듭니다. |
텍스트 T | 클릭하면 내용에 따라 늘어나는 텍스트 상자, 드래그하면 고정 너비 상자가 됩니다. |
메모 N | 나 또는 에이전트를 위한 메모, 컨텍스트, 프롬프트 카드입니다. |
| 이미지 | PNG, JPEG, GIF, WebP, SVG 파일을 배치합니다. |
손 H | 캔버스를 이동합니다. Space를 누르고 있어도 같습니다. |
2특수 도형
- 별: 안쪽 반경이 있는 다각형입니다. 패널에서 꼭짓점 수와 안쪽 반경을 설정합니다.
- 타원 호: 패널의 시작, 스윕, 내경으로 타원을 부채꼴, 호, 도넛 모양으로 바꿉니다.
- 아이콘: Lucide, Feather, Simple Icons(브랜드), Material Symbols(outlined, rounded, sharp), Phosphor에서 고릅니다.
- 연필 스무딩: 설정의 시스템에서 정밀, 균형, 부드럽게 중 하나를 선택합니다. 펜 커서 스타일도 여기에 있습니다.
3캔버스 위의 실시간 웹 페이지
브라우저 도형은 실제 웹 페이지를 데스크톱, 태블릿, 휴대폰 기기로 보여 주며, URL, 확대/축소, 스크롤을 설정할 수 있습니다. 컴퓨터에 이미 설치된 Chrome, Chromium, Edge 또는 Brave를 사용합니다. 다른 브라우저를 쓰려면 DE_BROWSER_PATH를 설정하세요.
연 파일 안의 페이지는 페이지 불러오기를 클릭할 때까지 일시 중지되어 있으므로, 파일을 여는 것만으로 사이트에 접속하지는 않습니다.
4메모와 스크립트
메모, 컨텍스트, 프롬프트 카드는 캔버스에만 존재하며 어떤 내보내기에도 포함되지 않습니다. 그래서 디자인 바로 옆에 에이전트를 위한 지시를 남겨 둘 수 있습니다.
스크립트 노드는 JavaScript로 그리는 프레임입니다. @input 매개변수는 패널의 스크립트 섹션에 입력 필드로 표시됩니다.
6정렬, 스냅, 결합
레이어를 드래그하면 스마트 가이드가 나타나고 주변 레이어의 가장자리와 중심에 스냅됩니다.
패널에서 왼쪽, 가운데, 오른쪽, 위, 중간, 아래로 정렬합니다. 레이어를 셋 이상 선택하면 가로나 세로로 균등 분배할 수 있습니다.
불리언 연산으로 도형을 결합합니다: 합치기 Cmd+Alt+U, 빼기 Cmd+Alt+S, 교차 Cmd+Alt+I, 제외 Cmd+Alt+X. 레이어 메뉴에도 있습니다. 다른 레이어를 담고 있는 프레임은 결합할 수 없습니다.
7복사와 붙여넣기
복사, 잘라내기, 붙여넣기는 레이어 단위로 동작합니다. Figma에서 레이어를 복사해 여기에 붙여넣으면 편집 가능한 레이어로 들어옵니다. 어디서 복사한 HTML이든 붙여넣으면 레이어로 바뀝니다.