techlist.io
KREN
figma

피그마 2.0: (새 탭에서 열림)

figmaprototypingandroidioscssdeveloper-handoffcloud-collaboration

Figma 2.0은 디자이너 간 협업을 넘어 마케팅, 경영진, 개발자까지 포함한 전체 팀의 협업을 목표로 한다. 이를 위해 디자인 파일과 발표용 프로토타입을 연결하는 프로토타이핑 기능과, 개발자가 디자인 정보를 직접 확인하는 개발자 핸드오프 기능을 추가했다. 핵심은 내보내기·동기화·버전 관리 같은 중간 단계를 줄이고 하나의 클라우드 문서를 모든 팀원이 함께 사용하는 것이다.

디자이너 협업에서 전체 팀 협업으로

  • Figma 1.0은 클라우드 기반 디자인 환경을 구축하는 데 초점을 맞췄다.
    • 저장, 내보내기, 동기화, 이메일 공유가 거의 필요 없다.
    • 여러 사용자가 동시에 편집하는 멀티플레이어 기능을 제공한다.
    • 팀 단위 컴포넌트 라이브러리로 디자인 요소를 공유할 수 있다.
  • Figma 2.0에서는 협업 범위를 디자이너 밖으로 확장했다.
    • 마케팅 부서, 경영진, 엔지니어 등 다양한 이해관계자가 같은 디자인 자료를 활용할 수 있다.
    • 제품 개발 전반에서 하나의 진실 공급원(single source of truth)을 유지하는 것이 목표다.

클라우드 기반 프로토타이핑

  • 디자이너가 디자인을 별도 도구로 내보내지 않고 같은 장소에서 발표와 테스트까지 진행할 수 있다.
  • 주요 활용 목적은 다음과 같다.
    • 디자인 리뷰와 피드백
    • 경영진 대상 프레젠테이션
    • 사용자 인터랙션 테스트
  • Figma는 고급 모션 그래픽보다 슬라이드쇼와 핫스팟 기능을 우선적으로 제공했다.
  • 프로토타입은 정적인 결과물이 아니라 원본 디자인과 연결된 “살아 있는 문서”로 동작한다.
    • 원본 프레임을 수정하거나 화면을 추가하면 발표 화면에도 실시간 반영된다.
    • 별도의 내보내기나 동기화가 필요 없다.
  • 프레임을 노드로 연결해 화면 이동을 구성하고, 개별 객체를 핫스팟으로 설정할 수 있다.
  • 컴포넌트에 핫스팟을 지정하면 해당 컴포넌트의 모든 인스턴스에 내비게이션 동작이 적용된다.
  • 프레임 순서를 정해 간단한 프레젠테이션으로 사용할 수도 있다.
  • 발표자는 휴대폰으로 프레젠테이션을 탐색할 수 있다.
  • 아트보드 순서를 맞추기 위한 복잡한 파일명이나 버전 관리가 줄어든다.
  • 다만 모든 프로토타이핑 시나리오를 지원하는 것은 아니며, Framer 같은 전문 도구와의 연동도 계속 추진할 계획이다.

개발자 핸드오프

  • 디자이너는 개발자에게 파일을 보기 전용(view-only)으로 공유할 수 있다.
  • 개발자는 편집 권한 없이도 오른쪽 속성 패널의 ‘Code’ 모드에서 디자인 정보를 확인할 수 있다.
  • 객체를 선택하면 다른 객체와의 간격을 빨간색 측정선(redline)으로 확인할 수 있다.
  • 다음 플랫폼에 필요한 정보를 추출할 수 있다.
    • CSS
    • iOS
    • Android
  • 정보는 두 가지 방식으로 제공된다.
    • 테이블 보기: 속성을 항목별로 나누어 빠르게 확인
    • 생성된 코드 보기: 구현에 활용할 수 있는 마크업 및 코드 제공
  • 개발자가 편집자 좌석을 구매하지 않아도 되므로 팀의 비용 부담을 줄일 수 있다.
  • 디자인 파일 자체를 기준으로 치수와 스타일 정보를 확인하므로, 별도의 스펙 문서나 수동 전달 과정이 줄어든다.

하나의 문서로 줄어드는 추상화 계층

  • 기존에는 디자인 파일, 프로토타이핑 도구, 발표 자료, 개발자용 스펙 문서가 분리될 수 있었다.
  • Figma 2.0은 디자인과 발표, 디자인과 구현 사이의 변환 단계를 줄인다.
  • 원본 디자인이 수정되면 연결된 프로토타입과 공유 정보에도 즉시 반영된다.
  • 팀 구성원마다 별도의 파일이나 도구를 관리하는 대신, 클라우드 문서를 중심으로 협업할 수 있다.

확장되는 도구 생태계

  • Figma는 모든 팀의 워크플로를 하나의 제품으로 대체하려 하기보다 다양한 도구와 함께 작동하는 생태계를 지향한다.
  • 전문 프로토타이핑 도구 및 다른 협업 도구와의 통합과 파트너십을 다음 단계로 제시했다.
  • 궁극적인 목표는 더 나은 소프트웨어를 함께 만들 수 있도록 팀 전체의 협업 장벽을 낮추는 것이다.

실무적으로는 디자인 파일을 단순한 작업물이 아니라 발표·검토·개발의 기준 문서로 운영하는 방식이 Figma 2.0의 가장 큰 장점이다. 팀은 프로토타입과 개발자 핸드오프를 같은 파일에서 관리하고, 개발자에게는 필요한 최소 권한인 보기 전용 접근을 제공하는 것이 효과적이다.