디자인을 내보내는 방법
1
디자인 열기
Flowstep 내에서 내보내려는 디자인으로 이동합니다.
2
내보내기 메뉴 열기
도구 모음이나 디자인 패널에서 내보내기 옵션을 찾습니다. 이를 선택하여 내보내기 설정을 엽니다.
3
형식 선택
사용 사례에 따라 JPG 또는 PNG 중 하나를 선택합니다(아래 비교 참조).
4
파일 다운로드
선택을 확인하고 내보낸 이미지를 기기에 다운로드합니다.
JPG vs PNG: 어떤 형식을 사용할까요?
코드 내보내기
이미지 외에도, Code 버튼은 화면을 React + Tailwind 코드로 내보냅니다. 스니펫을 복사하거나 전체 번들을 ZIP으로 다운로드할 수 있습니다. 번들은 자체 포함됨: 디자인에 사용된 이미지(채팅 패널에 첨부한 이미지 포함)는public/assets/ 폴더에 포함되며 코드가 로컬 경로로 참조하므로, 내보내기가 그대로 실행됩니다.
다운로드된 파일(이미지와 코드 번들 모두)은 소속된 화면 이름으로 지정되며(화면이 이름을 가지지 않은 경우 파일 이름으로 돌아감), 많은 화면으로 작업할 때 내보내기를 쉽게 식별할 수 있습니다.
디자인을 벡터 편집 워크플로우로 가져가야 하는 경우 대신 Figma에 직접 복사합니다. Flowstep 디자인을 Figma에 즉시 복사하기를 참고하세요.