본문 바로가기
스터디 열기

Export 탭에서 요소 내보내기

요소 내보내기

선택한 디자인 요소를 원하는 형식(확장자)으로 추출해보도록 하겠습니다. 디자인 요소를 Export하는 방법은 다음과 같습니다.

  1. 개체를 선택합니다.
  2. 우측 프로퍼티 패널에서 ‘Properties’ 탭으로 들어갑니다.
  3. 하단 Export 섹션 우측 상단 [+] 버튼을 클릭합니다.
  4. 파일의 해상도를 선택합니다. (배수)
  5. Export 형식을 선택합니다. | 파일 형식 | 설명 | | --- | --- | | PNG | 알파 값(투명도)을 포함한 비트맵 이미지입니다. 로고, 아이콘 등 배경이 투명한 이미지를 출력할 때 적합합니다. | | JPG | 비트맵 이미지입니다. 그림, 사진과 같은 이미지를 출력할 때 적합합니다. | | SVG | 벡터 파일 포멧입니다. 로고, 아이콘 등 해상도에 따른 손실이 없어야 하는 요소를 출력할 때 적합합니다. | | PDF | 벡터 요소를 다른 툴로 이동하여 편집해야 하는 경우, 인쇄해야 하는 경우 등 PDF로도 출력이 가능합니다. |
  6. Export [요소명] 버튼을 누르면 파일이 다운로드됩니다.

Export 탭 자세히 살펴보기

  1. +버튼을 누르면 Export 세부 설정이 나타납니다. → (+) 버튼을 눌러야 해당 요소가 Export 대기 상태가 됩니다.
  2. 배수: 내보내고자 하는 요소의 해상도를 설정합니다. 디자인 해상도 이해하기
  3. *Suffix: 내보내는 파일명 뒤에 ‘접미사’를 붙일 수 있습니다. (하단 고급 내보내기 설정은 잘 사용하지 않습니다 ㅎㅎ)
  4. 파일 형식: 내보내는 파일의 형식을 설정할 수 있습니다.
  5. Export 버튼: 버튼을 누르면 로컬 다운로드 폴더에 요소가 저장됩니다.
  6. Preview: 내보내고자 하는 요소를 미리볼 수 있습니다.

*Suffix란?

  • Suffix 입력란은 Export할 파일 이름에 ‘접미사’를 붙이는 기능입니다.
  • 만약 img-cat 이라는 이름의 이미지에 -big 이라는 Suffix를 입력하면 img-cat-big 이라는 이름의 파일로 Export 됩니다.
  • 같은 이미지이지만 이미지 사이즈 배율 등이 다를 경우 이를 구분하는 용도로 사용할 수 있겠네요!

📌 zip로만 내보내기가 돼요! (😭)

→ export를 할 때 zip로 내보내기가 되는 두 가지 경우가 있습니다.

  1. 여러가지 요소를 한꺼번에 Export하는 경우
  2. 개체의 이름에 ‘폴더’를 의미하는 /가 포함된 경우 → zip로 출력하는 것을 원치 않는 경우 개체의 이름에서 /를 제거하세요.

여러 요소를 한꺼번에 Export하기

우선 내보내고자 하는 요소 선택 > 우측 프로퍼티 패널 Export 섹션에서 [+] 버튼을 눌러 Export 대기 상태를 만들어 줍니다.

1. Main menu

  1. 좌측 상단 Main Menu(피그마 로고 아이콘) > File > Export 버튼을 누릅니다. → 단축키는 Ctrl + Shift + E 입니다.

  1. 피그마 우측 상단에 아래와 같은 모달창이 뜨면, 내보내고자 하는 요소를 체크한 후 Export 버튼을 누릅니다. 선택한 요소가 zip 파일로 Export 됩니다.

2. 레이어 패널 드롭다운 버튼

디자인 파일 레이어 패널, 파일명 우측에 위치한 드롭다운 버튼을 클릭 > Export 버튼을 눌러 위와 같은 기능을 수행할 수 있습니다.

📌 Export 리스트에 요소가 나타나지 않는다면? 내보내고자 하는 요소가 리스트에 나타나지 않는다면, Export 탭에서 (+)버튼을 눌러 해당 요소를 Export 대기 상태로 만들어주세요.

마지막 수정