그마, 이제 제 (새 탭에서 열림)

Figma는 UI 디자이너와 프런트엔드 개발자 간 협업을 개선하기 위해 Zeplin과의 연동을 지원한다고 발표했습니다. 디자이너는 Figma의 프레임을 Zeplin으로 내보내 개발자 중심의 방식으로 공유할 수 있으며, 기존 업무 흐름을 유지하면서 두 서비스를 seamless하게 사용할 수 있습니다. 다만 원본 디자인이 변경되면 Zeplin으로 다시 내보내야 합니다.

Figma와 Zeplin 연동의 목적

• 팀마다 디자인·프로토타이핑·개발 방식이 다르다는 점을 고려해 다양한 협업 시스템을 지원합니다.
• Zeplin은 UI 디자이너와 프런트엔드 개발자 간 핸드오프에 특화된 도구입니다.
• 개발자에게 디자인 데이터를 직관적으로 제공해 구현 과정의 이해와 협업을 돕습니다.
• Figma 사용자의 요청이 많았던 기능으로, Zeplin을 중심으로 작업하던 팀도 Figma를 도입하기 쉬워졌습니다.

Figma와 Zeplin의 역할 차이

• Figma는 디자인 제작과 협업, 프로토타이핑을 위한 플랫폼입니다.
• Zeplin은 개발자 경험에 초점을 맞춘 핸드오프 도구입니다.
• Figma의 코드 모드와 달리, Zeplin으로 내보낸 디자인은 자동으로 최신 상태가 되지 않습니다.
• Figma에서 디자인을 수정한 경우 변경 사항을 반영하려면 Zeplin으로 다시 내보내야 합니다.

연동 설정 및 사용 방법

• Zeplin을 설치하고 프로젝트를 생성합니다. 실험용 프로젝트도 사용할 수 있습니다.
• Figma의 왼쪽 상단 메뉴에서 Integrations > Zeplin을 선택해 연동을 활성화합니다.
• Figma에서 개발자에게 전달할 프레임을 만듭니다.
• 해당 프레임을 선택한 뒤 Export > Export to Zeplin을 실행합니다.
• 자동으로 열린 Zeplin 앱에서 Import를 선택합니다.
• 이후 Zeplin에서 Figma 디자인을 확인하고 개발 핸드오프에 활용할 수 있습니다.

협업 생태계 확장

• 디자인 도구와 개발 도구 간 통합은 팀의 업무 전환 비용을 줄이고 협업 흐름을 매끄럽게 만듭니다.
• Figma는 Zeplin 같은 외부 파트너와의 연동을 통해 플랫폼 생태계를 확장하려고 합니다.
• 글에서는 새로운 협업 도구와 파트너십 제안을 계속 환영한다고 밝힙니다.

실무에서는 Figma를 디자인의 원본으로 관리하고, 변경이 완료된 시점에 프레임을 Zeplin으로 재내보내는 운영 방식을 권장합니다. 이를 통해 Zeplin에 전달된 화면이 실제 디자인과 불일치하는 문제를 줄일 수 있습니다.