제품 개발에서 개발자와 디자이너 간의 협업은 종종 효율적인 팀워크를 방해할 수 있는 수많은 장애물을 제시합니다. 이러한 어려움은 디자인 프로세스에 대한 참여가 충분하지 않거나 디자인 리소스가 불완전하기 때문에 발생하는 경우가 많습니다.
디자이너와 개발자 간의 협업을 강화하기 위해 피그마는 디자인에서 개발로 원활하게 전환할 수 있는 최신 기능인 ‘피그마 개발 모드’를 출시했습니다.
개발자로서 피그마의 개발 모드를 활용하면 다양한 방식으로 워크플로우에 영향을 미칠 수 있습니다. 그 효과를 완전히 이해하려면 플랫폼의 개발 모드 기능을 자세히 살펴보고 기능을 검토하여 익숙해지는 것이 현명할 것입니다. 또한 최적의 사용 기술을 채택하면 이 기능의 효율성을 크게 향상시킬 수 있습니다.
피그마 개발 모드란 무엇인가요?
호평을 받고 있는 그래픽 사용자 인터페이스 디자인 애플리케이션인 Figma는 프로토타입을 제작하고 웹 페이지 시뮬레이션을 제작하는 데 그 기능을 활용하는 팀들 사이에서 널리 인정받고 있습니다. 최근에는 컨피그 2023 컨퍼런스에서 개발자의 작업 공간으로 활용하기 위한 최신 혁신 기능인 개발자 모드를 공개했습니다. 이 새로운 기능은 개발자와 피그마 캔버스 간의 상호 작용에 상당한 어려움이 있다는 사실을 깨닫고 도입되었습니다.
개발 모드는 구글 크롬의 검사 도구와 비슷한 기능을 공유하지만, 개발자의 디자인 의도를 더 알아보기 쉬운 언어로 표현합니다.
Figma의 개발자 모드 은 검사, 코드 스니펫, 플러그인, 디자인 시스템, 섹션 상태 및 변경 사항 비교 기능을 포함한 다양한 기능을 제공합니다. 이러한 기능은 커뮤니케이션을 개선하고 프로세스를 간소화하며 디자인에서 개발까지 일관된 워크플로를 유지하는 데 도움이 됩니다.
개발 모드는 현재 베타 버전이며, 따라서 액세스하려면 Figma 베타 데스크톱 애플리케이션을 사용해야 합니다.
개발 모드를 통한 원활한 커뮤니케이션
디자인 파일에 액세스하면 해독하기 어려운 전문 언어로 가득 찬 패널을 만나게 될 수 있습니다. 게다가 이러한 자료가 너무 방대해서 어디서부터 시작해야 할지 막막할 수도 있습니다. 하지만 버튼 클릭 한 번으로 쉽게 알아볼 수 있는 환경으로 이동하여 더 쉽게 접근할 수 있습니다.
이미지 출처: Figma
새로 디자인된 탐색 패널은 프레임과 레이어를 사용하여 시각적으로 매력적인 방식으로 여러 하위 메뉴를 포함하는 드롭다운 메뉴와 함께 더 넓은 레이아웃을 특징으로 합니다.전반적인 효과는 정리와 사용 편의성 개선입니다.
가장 최근에 수정된 내용을 보여주는 타임스탬프가 눈에 띄는 주요 속성 중 하나입니다. ‘검사’ 패널의 ‘변경 사항 비교’ 옵션에 액세스하면 수정 사항의 세부 사항을 검사할 수 있습니다. 이 기능을 사용하면 기술 문서 작성에 일반적으로 사용되는 요소인 버전 기록과 마찬가지로 업데이트를 모니터링하고 추적할 수 있습니다.
코드. 이 기능을 통해 사용자는 자신의 작업에 더 적합한 플러그인을 검토하고 통합할 수 있습니다. 개발 모드는 다양한 대화형 기능을 제공하여 사용자가 커서
등 다양한 수단을 통해 서로 소통하고 아이디어를 교환할 수 있습니다. 이러한 특성을 활용하면 동일한 플랫폼 내에서 실시간으로 코멘트가 표시되므로 설계와 개발의 동시 조율이 용이해집니다. 이를 통해 효율성이 향상되고 워크플로 프로세스가 빨라집니다.
효율적인 에셋 추출
설계자는 때때로 부적절한 설계 에셋을 제공하기도 하는데, 이는 리소스 접근성과 컴포넌트 가용성을 우선시하는 개발자의 불만을 초래하여 구축 효율성을 극대화하는 데 걸림돌이 됩니다. 다행히 개발 모드를 활용하면 최소한의 노력으로 에셋을 원활하게 추출할 수 있어 프로세스가 간소화됩니다.
특정 프레임워크를 선택하면 검사 패널에 여러 파일 구성으로 다운로드할 수 있는 옵션과 함께 활용된 에셋의 카탈로그가 표시됩니다.
이 도구를 활용하면 디자인 그룹과 반복적으로 커뮤니케이션할 필요 없이 리소스에 대한 진입 권한을 얻을 수 있습니다. 이를 통해 실수나 모호함을 방지할 수 있으므로 다른 업무에 집중할 수 있어 효율성이 높아집니다.
간소화된 핸드오프 프로세스
개발 모드는 핸드오프 관리를 위한 포괄적인 솔루션을 제공하여 사용자가 워크플로우를 사용자 지정하고 다음과 같은 효율적인 기능을 통해 핸드오프 프로세스를 간소화할 수 있도록 지원합니다:
제품을 설계하고 개발하는 프로세스가 통합 플랫폼 또는 시스템 내에서 진행되므로 워크플로우가 간소화되고 효율성이 향상됩니다.
실시간 협업은 여러 사람이 함께 작업하고 정보를 동기식으로 교환하여 효과적이고 효율적으로 협업할 수 있는 기능을 말합니다.
다양한 코드 세그먼트의 기능을 평가하고 확립된 표준을 준수하는지 확인하기 위해 다양한 코드 세그먼트에 대한 검사가 수행되었습니다.
디자인 시스템을 기존 프레임워크에 통합하는 것은 일관되고 효과적인 사용자 경험을 만드는 데 있어 매우 중요한 요소입니다.
앞서 언급한 섹션은 ‘개발 준비’를 포함하되 이에 국한되지 않는 개발 프로세스의 다양한 단계 지정과 관련이 있습니다.
개발 모드 사용 모범 사례 및 팁
피그마의 개발 모드는 워크플로 내에서 활용될 수 있지만, 그 잠재력을 극대화하는 것은 어려울 수 있습니다. 여기에서는 피그마에서 개발 모드의 활용도를 높이기 위한 몇 가지 권장 사항을 제시합니다.
⭐ 개발자 리소스와 플러그인을 사용하여 환경을 맞춤 설정하고, 개발자 모드 내에서 이미 사용 중인 도구를 연결하여 워크플로를 간소화하세요. GitHub부터 스택의 프레임워크까지 다양한 리소스를 선택할 수 있습니다. 
⭐ 검사 및 코드 스니펫 기능을 사용하여 디자인 요소의 치수, 사양, 스타일 및 에셋에 액세스하세요. 플러그인을 사용하여 다른 라이브러리에서 코드를 생성할 수도 있습니다. 
세부 사항을 누락하지 않으려면 디자인 수정 사항을 기록하고 버전 관리 시스템으로 작동하는 변경 사항 비교 기능을 활용하는 것이 좋습니다. 이 기능을 정기적으로 검토할 것을 적극 권장합니다.
댓글, 커서 채팅 등 디자이너와 소통할 수 있는 다양한 협업 도구를 활용하여 효율적이고 효과적인 상호 작용이 이루어질 수 있도록 합니다.
⭐ 새로운 피그마 VS 코드 확장 기능으로 VS 코드에서 요소를 검사할 수도 있습니다. 또한 파일 탐색, 변경 사항 추적, 디자이너 협업, 디자인 구현 가속화 등 더 많은 작업을 VS Code에서 벗어나지 않고도 수행할 수 있습니다. 
최첨단 개발 동향을 파악하고 잠재적인 이점을 이해하여 숙련도를 향상하세요.
개발 모드를 도입하여 워크플로우 간소화
피그마의 개발 모드를 활용하면 필수 기능을 제공하여 디자이너와 개발자 간의 협업을 개선하여 워크플로우의 효율성을 높일 수 있습니다.
피그마 생태계는 여러 구성 요소를 포함하고 있으며, 광범위한 사용으로 인해 다양한 전문 작업에서 필수적인 도구가 될 수 있습니다.