brunch

You can make anything
by writing

C.S.Lewis

by BUNDI Jun 03. 2018

Sketch x Zeplin, Asset 내보내기

Exporting assets from symbols in Sketch

Sketch를 사용 중이신가요? 그렇다면 Zeplin도 사용해보시는 건 어떤가요? Zeplin에서 Override 된 심벌들을 내보내는 방법에 대한 글을 가져왔습니다. Symbol로 지정된 아이콘들을 Exportable로 만들어주는 것이 핵심입니다. *지금부터는 아래 글에 대한 번역입니다.

https://blog.zeplin.io/exporting-assets-from-symbols-in-sketch-1 e1 b44 d33722





Sketch Asset 내보내기


Sketch에서 레이어들을 exportable 하게 만들면, 제플린은 당신이 작업하고 있는 플랫폼과 해상도에 따라 필요한 Asset들을(각기 다른 포맷과 크기로) 만들어낼 것입니다. 이건 꽤나 간편합니다. 그럼에도 Zeplin에서 심벌을 최대한 활용하는데 도움이 될만한 몇 가지 팁과 요령들이 있습니다.





심벌을 Exportable 하게 만들기


심벌은 여러분의 디자인 전반에 걸쳐 아이콘들을 활용할 수 있는 훌륭한 방법입니다. 심벌들을 Exportable 하게 만들면, 당신이 어디에서 Asset들을 사용했든지 간에 Zeplin에 있는 Asset들에 접근할 수 있습니다. Overrride상황에도 말이죠.



심벌을 사용함에 있어 가장 큰 장점 중 하나는, 바로 투명한 배경과 함께 Asset들을 Export 할 수 있다는 점입니다. (일반적으로 투명한 배경을 유지하려면 slice기능을 사용해야 합니다.) 이것은 다시 사용될 수 있는 아이콘들을 정리하는데 정말 효과적인 방법이며, 이를 통해 개발자들은 언제나 정확한 크기의 Asset들로 작업할 수 있습니다. 


다른 Exportable 레이어와 비슷하게, 심벌의 이름이 곧 Zeplin 속 Asset의 이름입니다. 만약 </>을 통해 심벌들을 그룹으로 묶어준다면, 이름의 마지막 부분만 사용될 것입니다:

/some/long/path/icCameraSelected는 icCameraSelected가 됩니다. 


여기 Exportable 심벌이 Zeplin의 iOS프로젝트에서 어떻게 보이는지 나와있습니다:





Override 사용하기


Nested심벌 속, Override상황에서도 Asset은 사용됩니다. 바로 여기, 위에 있는 아이콘 심벌을 사용한 Nested 심벌의 예시가 있습니다.


Icon 심볼을 따로 Exportable할 필요가 없습니다. 이미 Icon에 해당되는 심볼들이 Exportable하기 때문이죠



디자인에서 심벌을 사용할 때, Override를 통해 Sketch의 오른쪽 패널에서 아이콘을 다른 아이콘으로 바꿔가며 사용할 수 있습니다.




추가적인 노력 없이도, Zeplin에서 3개의 아이콘을 위한 모든 Asset들에 접근할 수 있습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari