시작하기 전에
이 기능을 사용할 수 있는 사람
Figma Make는 유료 요금제의 풀 시트에서 사용할 수 있습니다.
다른 시트와 요금제에서 Figma Make를 사용해 볼 수 있습니다.
작동 가능한 프로토타입이나 웹 앱의 코드를 직접 Figma Make 편집기를 사용하여 편집하고 싶은 경우 Figma Make가 파일 내에서 가벼운 편집기를 제공하니 사용해 보세요.
코드 편집기에 접근하려면 Figma Make 파일 상단에서 코드를 클릭하세요.
Figma Make는 코드 작업을 위한 여러 가지 기능을 제공합니다.
- 코드 편집기에서 Figma Make에서 생성한 코드를 변경하거나, 직접 코드를 작성하거나 가져올 수 있습니다. 변경한 내용을 형식으로 지정하거나 편집기에 붙여 넣을 수도 있습니다.
- 작동 가능한 프로토타입이나 웹 앱의 파일 탐색기에 있는 모든 파일을 포함하여 코드를 다운로드하는 방법입니다.
- Figma Make로 생성된 파일을 탐색하고 이동하는 데 사용하는 파일 탐색기입니다. 파일 탐색기에서 직접 파일을 만들 수는 없지만, Figma Make에게 파일을 만들어 달라고 요청할 수 있습니다.
- Figma Make가 작동 가능한 프로토타입이나 웹 앱의 코드 생성 시 따를 가이드라인을 추가할 수 있는 장소입니다. 자세한 내용을 확인하려면 Figma Make에 가이드라인 추가하기를 참조하세요.
코드 편집
코드 편집기에서 파일 탐색기의 파일을 직접 수정할 수 있습니다. 작동 가능한 프로토타입이나 웹 앱의 메인 파일인 App.tsx가 파일 탐색기에서 기본적으로 선택됩니다.
기존 코드를 편집하거나, 직접 코드를 작성하거나, 편집기에 코드를 직접 붙여 넣을 수 있습니다.
코드 변경 사항 되돌리기
코드를 수정할 때마다 Figma Make는 그 변경 사항에 대한 체크포인트를 만듭니다. 코드 변경 사항을 대화의 가장 최신 단계의 파일 버전으로 되돌릴 수 있습니다.
AI 채팅에서 파일의 변경 사항을 되돌리려면 되돌리려는 파일 옆에 있는 버튼을 클릭하세요.
코드 서식 지정
코드 서식을 지정하려면 CMD + S(Mac) 또는 CTRL + S(Windows)를 누르거나 코드 편집기의 오른쪽 상단 모서리에 있는 코드 서식 지정을 클릭하세요. 서식을 지정할 때 Figma Make는 줄 바꿈과 들여쓰기를 수정하여 코드를 깔끔하게 정리합니다.
코드 다운로드
Figma Make 파일의 모든 파일을 포함하는 .zip 파일을 다운로드하려면 코드 편집기의 오른쪽 상단 모서리에 있는 코드 다운로드를 클릭하세요.
파일 탐색
코드 편집기 왼쪽에 있는 파일 탐색기에서 폴더를 클릭하여 확장하고 파일을 선택할 수 있습니다. 파일을 선택하면 파일의 내용이 코드 편집기에 나타납니다.
파일 탐색기에서 파일을 만들거나 삭제할 수는 없습니다. 파일 탐색기에 새 파일을 추가하려면 AI 채팅에서 Figma Make에게 지시하세요. 예를 들면 '일부 템플릿 코드가 포함된 Toolbar.tsx 파일을 추가해' 같은 지시입니다.