제가 일하고 있는 기업에서는 주요 디자인 툴로 Figma를 사용하고 있습니다.
Figma는 아직 국내에서는 많이 사용하는 툴이 아니기에 생소하게 느끼시는 분들이 많습니다.
우리가 Figma를 사용하는 이유
1. 강력한 협업 툴
Figma(이하 피그마)는 웹 기반으로 실시간 협업 기능을 가지고 있는 디자인 툴입니다. 하나의 draft를 다수가 공유해 동시에 작업할 수 있으며, 빠른 작업을 돕기 위한 다양한 기능과 플러그인이 제공되고 있어 웹 또는 앱 디자인 업계에서 사용하기에 적합합니다. 공식 사이트 메인 화면 상단에서 강조하고 있는 이미지에서도 알 수 있듯이, 실시간 협업 기능은 피그마를 사용해야 하는 가장 큰 이유입니다.
2. (거의 없는) 환경적 제약
Mac이나 Windows OS를 모두 지원하기 때문에 사용하는 기기나 프로그램 설치에 구애받지 않아 어떤 환경에서도 디자인 작업이 가능합니다. 물론 웹 기반 프로그램이기 때문에 인터넷 이용이 불가능한 환경에서는 사용할 수 없습니다.
3. 다양한 무료 폰트
구글 폰트(900여 개 이상의 무료 폰트)를 활용할 수 있어 협업 과정에서 각 사용자가 폰트를 별도로 설치하거나, 보유하지 않은 폰트가 정상적으로 표시되지 않는 현상을 겪지 않습니다. (물론 사용자가 별도로 보유하고 있는 폰트를 적용할 수도 있습니다.)
4. 편리한 버전 관리와 자동 저장 기능
자동 저장을 기본으로 제공하며, 히스토리를 통해 버전 관리를 할 수 있습니다. 웹 기반 툴이기에 자동 저장과 히스토리 기능을 위한 디스크 스페이스의 부담이 없습니다.
코멘트 기능을 통해 팀 멤버들이 각자의 디자인에 대해 서로에게 noti를 줄 수 있어, 별도의 협업 툴이 필요하지 않습니다.
5. 놀라운 벡터 처리 방법
벡터 포인트가 아닌 라인을 기준으로 벡터를 수정할 수 있습니다. 직관적인 처리 방법을 사용하고 있어, 벡터 이미지 생성에 편리합니다.
피그마에서 로컬 폰트를 사용하는 방법
900여 개의 무료 폰트를 제공하지만, 대다수가 영문 폰트이기에 한글 폰트 사용을 위해서는 보유하고 있는 폰트 파일을 사용할 필요가 있습니다. 피그마에서 로컬 폰트(피그마에서 제공하지 않는 폰트의 폰트 파일을 가지고 있는 경우)를 사용하는 방법은 아래와 같습니다.
- 피그마 Font Installer를 설치합니다.
- 또는 web으로 피그마에 접속하여 “Account Setting” 화면으로 이동합니다. (Web app에서는 폰트 적용 불가)
- “Font” 항목의 “Download Installer to enable local fonts” 버튼을 클릭합니다.
피그마를 통한 프로토타이핑
피그마를 이용한 간단한 프로토타이핑 또한 기획자와 디자이너 그리고 퍼블리셔가 소통하는 데에 많은 도움을 줍니다. 프로토타이핑에 대해서는 추후 별도의 글을 작성하여 소개해보겠습니다.
피그마 공식 유튜브 채널의 프로토타이핑 가이드 영상 참고
피그마→제플린 Export 방법
프론트엔드 개발자 또는 퍼블리셔와의 소통을 위해 제플린에 피그마에서 작업한 디자인을 export 합니다. 작은 규모의 프로젝트인 경우 피그마의 View 권한을 부여하여 퍼블리셔에게 공유하기도 하지만, 규모가 큰 프로젝트에는 제플린을 사용하고 있습니다.
1. Zeplin for Figma 플러그인을 설치합니다.
*Zeplin Plugin 업데이트(2020.4.29)를 통해, 기존의 export 기능은 더이상 지원하지 않습니다. 플러그인을 설치해야만 export가 가능합니다.
2. 제플린과 피그마 app을 최신 버전으로 업데이트합니다.
3. export하려는 frame을 선택한 뒤, 마우스 오른쪽 버튼을 클릭하여 ‘Plugins’->’zeplin’을 클릭합니다.
4. export를 위한 로딩 화면이 출력되고 로딩이 종료되면 Zeplin web app이 열리며, 어떤 프로젝트 파일에 업로드 할 것인지를 물어봅니다.
5. 업로드 할 프로젝트 파일을 선택합니다.
6. 제플린에 frame이 정상적으로 업로드 되었는지 확인한 뒤, 특정 기능 또는 ui에 대한 코멘트가 있는 경우 제플린에 코멘트를 남깁니다.
⚠ Zeplin 업로드 전 유의사항
피그마에서 작업한 디자인 리소스는 export 시 제플린에 CSS 코드로 변환되어 보입니다.
- 모든 리소스가 하나의 frame 내에서 위치한 X, Y 좌표 값을 확인해 주세요.
- 모든 리소스의 Width, Height 값을 확인해주세요.
- text box는 실제 텍스트가 위치한 좌표와 크기에 맞춰주세요.
- 아이콘, 일러스트, 사진 등의 리소스는 Slice tool을 사용해 잘라내 주세요.
⚠ 업로드가 되지 않는 경우의 해결 방법
제플린과 피그마 모두 웹 기반 툴이기 때문에, 버전 업데이트 또는 API 연동 이슈가 발생하는 경우가 있습니다. 이때의 해결 방법은 아래와 같습니다.
- 업로드 할 때 더 적은 수의 frame을 선택
- 중첩된 frame을 분리
- 크고 복잡한 레이어의 수를 줄이기
- 새로운 draft를 생성하여 해당 draft에서 업로드
더 많은 정보는 하단의 링크를 통해 확인할 수 있습니다.
yonyon님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
