[Figma] 피그마를 제플린으로 내보내기 할 때, 디바이스 별로 편하게 내보내는 플러그인 추천, export presets

저는 원래 스케치를 주로 이용하다가 최근에는

피그마로 작업을 주로 하고 있습니다.

 

아무래도 맥 OS 환경에서만 구동하는 스케치보다는 웹과 윈도우, 맥OS 모두에서 작동하는 피그마가 범용성도 높고

협업과 버전관리가 좀 더 강력하다보니 여러 스타트업과 IT회사에서도 

스케치에서 피그마로 옮겨가고 있는 추세입니다.

 

그런데 아무래도 완성된 작업물만 내보내기 하는 경우에는 

보통 제플린을 사용하는데요.. 

 

피그마의 경우 exportable한 옵션을 만들기 위해서는

스케치와 달리 일일히 스크린 해상도를 지정해주는 문제가 있어서 

찾다보니 이런 플러그인이 있어서, 저도 정리할 겸 이렇게 포스팅을 적어봅니다.

 

Export Presets 플러그인 다운로드 화면

 

바로 Export Presets이라는 플러그인인데요. 

이름과 같이, 아이폰, 안드로이드, 플러터 등 다양한 OS와 작업환경에 맞춰 

내보내기 옵션을 만들어주는 플러그인입니다. 

지원하는 프리셋 종류

지원하는 작업환경별 프리셋은 위와 같이 있습니다.

 

또한 직접 설정한 내보내기 설정을 프리셋으로 저장할 수 있습니다. 

아래 사용방법에서 좀 더 자세히 설명해볼게요. 

 

아래 다운로드 링크에서 손쉽게 다운받아 피그마에서 사용하면 됩니다.

 

 

https://www.figma.com/community/plugin/933557553455124671/Export-Presets

Figma - Export Presets | Create and automatically apply custom Export Settings. Share them across your files and projects....

 

 

---

 

Export Presets 플러그인 사용방법

 

피그마에서 플러그인을 사용하는 방법은 전반적으로 동일하다고 볼 수 있습니다.

 

이해를 돕기 위해서 피그마 공식계정에서 공유한 소셜미디어 템플릿Social Media Templates을 이용하여 

예시를 들겠습니다.

 

 

1) 기존의 디폴트 프리셋을 적용하는 방법(iOS, Android, Flutter, iOS icon, Web Favicon 등) 

 

1. 피그마 PC 프로그램 상단 메뉴바에서 Plugins를 선택한 후 'Export Presets'플러그인을 선택합니다.

 

 

2. 짠, 플러그인을 선택하면 이렇게 플러그인 창이 추가로 화면에 뜨는데요. 

안드로이드나, 플러터, ios, 웹 파비콘 등 다양한 프리셋이 이미 디폴트로 있습니다. 

다양한 디폴트 프리셋

 

 

다만 무조건 레이어나 프레임 등 선택을 한 상태에서 해당하는 디폴트 프리셋을 눌러줘야 합니다. 

그렇지 않으면 위처럼, '계속하려면 레이어를 하나 이상 선택해주세요'라는 문구가 뜹니다.

 

3. 내보내기 하려는 컴포넌트, 프레임, 레이어 등을 최소 하나 이상 선택해 줍니다.

이렇게 선택을 하면 선택된 상태를 이렇게 보라색 박스로 확인할 수 있습니다.

exportable한 옵션을 아무것도 지정해주지 않았기 때문에 오른쪽에 Export 부분에는 아무것도 뜨지 않는 것을 확인할 수 있습니다. 

 

 

4. 내보내기를 원하는 디바이스 프리셋을 선택해주면, 오른쪽 Export 탭에 해당하는 디바이스의 모든 해상도 옵션이 뜨게 됩니다.

 

저의 경우 iOS 디바이스의 PNG 옵션이 있는 프리셋을 선택했고요. 

오른쪽 Export 옵션에, 1x,2x,3x까지 모두 내보내기 옵션에 포함된 것을 확인할 수 있습니다. 

 

필요한 컴포넌트와 애셋을 미리 전부 선택한 후, 

Export Presets 플러그인에 해당하는 디바이스를 선택하면

내보내기 옵션을 한꺼번에 설정할 수 있어서 매우 편하게 제플린으로 내보내기가 가능합니다.

 

---

 

혹시 제플린 zeplin 플러그인이 없으신가요?

아래 링크에서 바로 다운받으실 수 있습니다.

https://www.figma.com/community/plugin/745330164019088593/Zeplin

Figma - Zeplin | Join thousands of users who use Figma and Zeplin together Stay in design flow, publish finalized...

 

제플린은 개발자와의 협업을 위한 정말 강력한 툴입니다. 제플린이 없을 시절에는.. 하나하나... 사이즈에 맞춰.. 디자이너가 디자인하고 일일히 저장해야되는 고통스러운 시간을... 보냈어야 했겠지요... 

 

 

---

 

 

2) 나만의 내보내기 프리셋을 저장하는 방법

 

1. 일단 아무 디자인 요소, 또는 프레임이나 레이어를 선택해 나만의 내보내기 옵션을 먼저 설정해줍니다.

 

저의 경우, 1x,2x,3x의 PNG 파일과 1x사이즈의 PDF 파일을 내보내기 옵션에 추가하고

파일의 접미사suffix로, 파일의 해상도와 제 이름인 kimdee를 추가하였습니다.

 

2. 그 상태(나만의 내보내기 옵션을 설정한 요소가 선택된 상태)에서 Export Presets 플러그인 창의 맨 윗칸에 있는 untitled 부분에,

내 프리셋을 구분할 수 있는 이름을 지정하고 + 버튼을 눌러줍니다.

 

저는 제 이름과, 내보내기하는 파일의 확장자 이름을 명시하였습니다. 

네이밍을 할 때 명확히 적어두어야 나중에 사용할 때도 헷갈리지 않으므로, 네이밍은 신경써서 적는 것이 중요합니다.

 

+ 버튼을 누르면, 프리셋이 적용되었다는 문구가 아래 하단에 뜹니다. 

 

 

3. 이후, 프리셋을 적용하고 싶은 컴포넌트를 선택하여 적용합니다.

 

아래의 다른 디자인 요소들도 한꺼번에 나만의 프리셋을 적용할 수 있는 것을 확인할 수 있습니다. 

 

만약 디자인을 하면서, 개발자와 정해둔 해상도가 있다면(특히 안드로이드!) 

위 기능을 사용하여 프리셋을 미리 만들어 둔다면, 해당 작업을 할 때 손쉽게 작업할 수 있겠죠. 

 

 

---

만약 프리셋을 삭제하고 싶다면

프리셋 이름에 마우스 오버를 하면 뜨는 '-' 마이너스 버튼을 클릭하면

바로 삭제됩니다! 

 

 

---

 

게시글이 도움이 되었다면 공감과 댓글이 큰 도움이 됩니다.

읽어주셔서 감사합니다 😄