Figma 자동 익스포트 for Xcode, Android Studio

피그마에서는 아직까지 기존의 스케치 > 제플린 환경처럼 폰트, 이미지, 컬러를 개발툴 (AOS, iOS)에서 바로 사용할 수 있도록 익스포트 하는 기능이 제공되고 있지 않다. 물론 이미지를 익스포트 하는 기능은 훌륭하지만,,

 

컬러셋, 아이콘, 이미지, 타이포그래피에 대해

개발자가 한땀 한땀 각각의 컴포넌트를 직접 개발툴에서 만들거나 옮겨야 하기 때문에 적지 않은 공수와 노력이 든다.
또한 디자인 변경으로 인한 컴포넌트 업데이트 시에도 피그마에서 해당 컴포넌트를 찾아 변경된 값을 확인 후 개발툴에서 직접 수정해야 하므로 관리도 상당히 어렵고 사람이 직접 하므로 실수가 유발 될 수 있다.

 

이러한 이유로 피그마 커뮤니티 플러그인을 비롯해 유틸리티를 찾던 중 러시아 iOS 개발자가 만든 figma-export 라는 오픈 소스를 발견하여 몇일 간 디자이너와의 프로토타이핑을 거쳐 만족할 만한 결과를 얻었다. (지난 4월만 해도 스타 수 가 40중반이었는데 어느새 400이 넘었다.)

 

이제 이를 활용하여 컴포넌트를 활용한 디자인 시스템을 구현할 수 있게 된 것이다.

 

Design requirements

각 디바이스 플랫폼 별로 Color, Icon, Image, Typography를 사용할 경우 피그마 스타일의 description 필드에 각각 iOS, android, web을 명시하고 특정 컴포넌트를 디자이너가 개별적으로 사용 시에는 none으로 명시하여 퍼블리싱 되지 않게 설정해준다.

 

스타일과 컴포넌트는 반드시 Team Library로 퍼블리싱 해야함.
중요한 점은 팀 라이브러리로 익스포트하여 사용하기 위해서는 프로 버전이나 Organization 라이선스가 필요하다.

 

Colors

기본적으로 다크모드 지원 시 Figma 프로젝트에서 2개의 파일로 구성되어야 하며, 하나는 라이트 컬러 팔레트로 다른 하나는 다크 컬러 팔레트로 구성한다.

 

단일 파일로 구성할 때는 다크모드 컬러의 이름 뒤에 _dark 서픽스를 추가한다.
(suffix는 config에서 정의할수 있다.)

iOS를 위한 High Contrast 를 지원하게 될 경우는 총 네개의 파일이 필요할 수 있다.

 

Icons

아이콘 컴포넌트들은 Icons 로 명명된 프레임에 구성해야한다.
(또는 해당 프레임을 Config에서 정의한다. common.icons.figmaFrameName)
다크모드 지원 시 별도 파일로 분리해야한다. 컬러와 동일

 

Images

일러스트레이션 컴포넌트들은 Illustrations 로 명명된 프레임에 구성해야한다.
(또는 해당 프레임을 Config에서 정의한다. common.images.figmaFrameName)
다크모드 지원 시 별도 파일로 분리해야한다. 컬러와 동일

 

Typography

피그마 파일은 텍스트 스타일로 연결해야한다.

 

 

샘플 파일 링크
sample - [RTC Key] UI kit
light version - FigmaExport Example File [Light]
dark version - FigmaExport Example File [Dark]