실무에서 바로쓰는 피그마 11 - Figma와 외부 도구 연동 : 개발자 핸드오프 및 통합 워크플로우

 

지금까지 Figma의 강력한 디자인 및 협업 기능을 깊이 있게 다루었습니다. 이제 Figma를 넘어선 확장성과 통합의 영역, 즉 Figma와 외부 도구의 연동에 대해 알아볼 시간입니다. 현대의 제품 개발 워크플로우는 디자인 도구 하나만으로 완성되지 않습니다. 기획, 디자인, 개발, 마케팅, 애자일 관리 등 다양한 분야의 전문 도구들이 유기적으로 연결될 때 비로소 효율적인 통합 워크플로우가 구축됩니다. Figma는 이러한 통합의 중심에서 뛰어난 연동성을 제공하며, 특히 개발자 핸드오프(Develop Handoff)를 원활하게 하는 데 결정적인 역할을 합니다.

 

11.1 통합 워크플로우의 중요성 : 왜 연동이 필요한가?

제품 개발 프로세스에는 다양한 역할과 전문 도구가 존재합니다. 디자이너는 Figma, Sketch, Adobe XD 등을 사용하고, 개발자는 VS Code, Jira, GitHub 등을 활용하며, PM은 Notion, Confluence 등으로 기획 및 문서를 관리합니다. 각 단계와 역할에 맞는 최적의 도구를 사용하는 것은 중요하지만, 이 도구들이 서로 고립되어 있다면 다음과 같은 문제점이 발생합니다.

• 정보의 단절 : 디자인 변경 사항이 개발 팀에 즉시 공유되지 않거나, 기획 문서와 디자인 간의 불일치가 발생합니다.
• 비효율적인 소통 : 스크린샷, 구두 설명, 수동 문서화 등 비효율적인 방식으로 정보를 전달하게 됩니다.
• 잦은 오류 발생 : 디자인 스펙이 명확하게 전달되지 않아 개발 단계에서 오류가 발생하고, 이는 재작업으로 이어져 시간과 비용을 낭비하게 됩니다.
• 버전 불일치 : 각 도구마다 최신 버전 관리가 어려워 혼란이 초래됩니다.
• 생산성 저하 : 소동 작업이 많아지고 불필요한 대기 시간이 발생하여 전반적인 생산성이 저하됩니다.

Figma는 이러한 문제점들을 해결하기 위해 강력한 API를 제공하며, 이를 통해 수많은 외부 도구들과 유기적으로 연동되어 진정한 통합 워크플로우(Intergrated Workflow)를 구축할 수 있게 돕습니다.

 

11.2 개발자 핸드오프의 핵심 : Figma 개발자 모드 활용

디자인이 완료되면, 그 디자인을 실제 제품으로 구현하는 개발팀에게 전달하는 과정, 즉 개발자 핸드오프가 매우 중요합니다. Figma는 이 과정을 놀랍도록 효율적으로 만듭니다.

 

11.2.1 개발자 모드(Dev Mode)의 심층이해

지난 글에서 간략히 언급했듯이, 2023년 Figma Config에서 발표된 개발자 모드(Dev Mode)는 개발자를 위한 Figma의 핵심 기능입니다. Figma는 디자이너 도구이지만, 개발자 모드를 통해 개발자에게 필요한 모든 정보를 맞춤형으로 제공합니다.

1. 개발자 모드 활성화 : Figma 파일 우측 상단의 <>(꺽쇠 괄호)아이콘을 클릭하여 개발자 모드를 활성화합니다.

2. 레이어 스펙(Specs)자동 추출 : 

• 캔버스에서 어떤 레이어(프레임, 도형, 텍스트, 이미지)든 클릭하면, 우측 패널에 해당 레이어의 모든 디자인 스펙(Specs)이 자동으로 표시됩니다.
• 크기 및 위치 : width,height, x, y좌표, margin, padding 등
• 색상 : fill, stroke의 HEX, RGB, HSL값 및 변수(Figma Style, Variables) 이름
• 텍스트 : font-family, font-size, font-weight, line-height, letter-spacing, text-align 등
• 효과 : box-shadow, border-radius, opacity 등
• 코드 스니펫 : 이러한 스펙은 단순히 나열되는 것이 아니라, 웹(CSS), iOS(SwiftUI, UIkit), Android(Compose, XML) 등 개발환경에 맞는 코드 스니펫(Code Snippet)으로 변환되어 제공됩니다. 개발자는 복사 버튼 클릭 한 번으로 필요한 코드를 바로 가져다 쓸 수 있습니다.

3. 간격 및 정렬 시각화 : 

• 개발자 모드에서는 요소를 선택하고 Alt(Window) 또는 Option(Mac)키를 누르면, 주변 요소들과의 간격(마진,패딩)이 정확한 픽셀 단위로 시각화됩니다.
• Auto Layout이 적용된 경우, 내부 요소들의 정렬 및 간격 규칙이 더욱 명확하게 표시됩니다.

4. 컴포넌트 인스턴스 정보 :

• 인스턴스를 클릭하면, 해당 인스턴스가 어떤 마스터 컴포넌트에 기반하는지, 어떤 베리언트 속성이 적용되었는지, 어떤 오버라이드가 있는지 등 컴포넌트 라이브러리 정보를 제공합니다.
• 마스터 컴포넌트의 위치로 바로 이동하는 링크도 제공되어, 개발자가 컴포넌트의 전체적인 맥락을 이해하는 데 도움을 줍니다.

5. 디자인 시스템(Variables) 연동 :

• Figma의 Variables 기능(색상, 숫자, 문자열 토큰 등)을 사용하면, 개발자 모드에서 해당 변수 이름이 코드 스펙에 함께 표시됩니다. 이는 디자인 시스템 토큰을 개발 코드에 직접 매핑하는 데 매우 중요합니다.
• 예를 들어, fill : var(--color-primary-500); 와 같이 변수 이름으로 코드가 추출되어, 디자인 시스템을 코드로 구현하는 데 필요한 정보를 명확하게 제공합니다.

6. 개발자 전용 주석 : 

• 개발자 모드에서만 보이는 주석을 추가할 수 있습니다. 이는 특정 UI 요소의 구현 방식에 대한 팁, 제약사항, 또는 참고 링크 등을 개발자에게 전달할 때 유용합니다.

7. 플러그인 및 위젯 통합 :

• 개발자 모드에서는 Jira, GitHub, Storybook 등 개발 관련 플러그인과 위젯을 직접 연동하여 작업 흐름을 통합할 수 있습니다. 예를 들어, Figma 디자인에서 Jira티켓을 생성하거나, Git 브랜치를 연결하는 등의 작업이 가능합니다.

개발자 모드의 장점 :

• 정확성 : 수동 측정 오류를 없애고, 정확한 디자인 스펙을 제공합니다.
• 효율성 : 개발자가 디자인 도구에 대한 깊은 이해 없이도 필요한 정보를 빠르게 얻고 코드를 추출할 수 있습니다.
• 일관성 : 디자인 시스템의 변수를 직접 연동하여 디자인-코드 간의 일관성을 유지합니다.
• 커뮤니케이션 감소 : 불필요한 질문과 답변을 줄여 디자이너와 개발자 모두의 시간을 절약합니다.

11.3 외부 디자인/프로토타이핑 도구와의 연동(과거 및 특수 목적)

Figma의 개발자 모드가 매우 강력하지만, 경우에 따라 Figma의 기능을 보완하거나 특정 워크플로우를 위해 다른 전문 도구와의 연동이 필요할 수 있습니다.

 

11.3.1 Zeplin, Abstract, Supernova 등 (레거시/특수목적)

과거에는 Figma와 같은 올인원 도구가 나오기 전,  Zeplin, Abstract, Avocode등은 디자인 스펙을 공유하고 버전 관리를 하는 데 특화된 도구들이었습니다. Figma의 개발자 모드가 등장하면서 이들의 필요성이 많이 줄었지만, 여전히 특정 조직에서는 기존 워크플로우와의 호환성 또는 추가 기능(예 : 코드 컴포넌트와의 연동)때문에 사용될 수 있습니다.

• Zeplin : 디자인 파일에서 요소의 스펙, 에셋, 텍스트 스타일 등을 추출하여 개발자에게 공유합니다. Figma플러그인을 통해 연동 가능합니다.
• Abstract : Sketch 파일을 위한 Git 기반 버전 관리 시스템으로, 디자인 변경 사항을 추적하고 브랜치 및 병합 기능을 제공합니다. Figma는 자체 버전 히스토리가 강력하여 별도의 Abstract 연동은 불필요하지만, Sketch파일과의 연동이 필요한 경우 고려될 수 있습니다.
• Supernova : 디자인 시스템을 코드베이스로 변환하고 유지하는 데 특화된 도구입니다. Figma와 연동하여 디자인 토큰, 컴포넌트 등을 코드 컴포넌트로 변환하는 데 활용될 수 있습니다.

11.3.2 Framer (고급 프로토타이핑)

Figma와 함께 사용되는 경우가 많은 Framer는 코드 기반의 고급 프로토타이핑 도구입니다.

• Figma-Framer 연동 : Figma 디자인을 Framer로 가져와 더욱 복잡하고 실제에 가까운 인터랙션과 애니메이션을 구현할 수 있습니다. 특히 React 컴포넌트를 직접 활용하여 개발에 더 가까운 프로토타입을 만들 때 유용합니다.
• 활용 : Figma에서 정적인 UI와 기본 인터랙션을 만든 후, 특정 핵심 인터랙션이나 애니메이션을 상세하게 구현해야 할 때 Framer로 가져와 작업합니다.

11.4 프로젝트 관리 및 문서화 도구와의 연동

디자인은 프로젝트 관리 및 문서화와 뗄 수 없는 관계입니다. Figma는 이러한 도구들과의 연동을 통해 프로젝트의 모든 측면을 통합적으로 관리할 수 있게 돕습니다.

 

11.4.1 Jira / Trello (프로젝트 관리)

• 플러그인/위젯 : Figma Community에서 Jira, Trello 등 인기 있는 프로젝트 관리 도구의 플러그인 및 위젯을 설치하여 연동할 수 있습니다.
• 활용 :
  Figma 디자인 요소와 특정 Jira 티켓을 연결하여, 해당 디자인이 어떤 개발 작업과 관련되어 있는지 명확히 합니다.
  Jira 티켓의 상태(예 : In Progress, Done)를 Figma에서 직접 확인하거나 변경할 수 있습니다.
• 디자인 변경 사항이 있을 때 자동으로 Jira티켓을 업데이트하거나 댓글을 추가하는 워크플로우를 구축할 수 있습니다.

 

11.4.2 Notion/Confluence(문서화 및 지식 공유)

• 위젯 : Notion 위젯을 Figma 캔버스에 추가하여 Notion 페이지를 직접 임베드할 수 있습니다.
• 링크 임베드 : Notion이나 Confluence 문서에 Figma 파일 또는 특정 프레임의 공유 링크를 임베드하면, 해당 문서에서 Figma 디자인을 직접 미리보고 댓글을 달 수 있습니다.
• 활용 : 기획 문서 ,사용자 스토리, 디자인 가이드라인 등 중요한 문서를 디자인 파일과 연결하여 팀 전체의 지식 공유를 원활하게 합니다.

11.5 개발 워크플로우 및 코드 도구와의 연동

Figma는 단순한 디자인 전달을 넘어, 개발 워크플로우에 깊숙이 통합될 수 있는 방법을 제공합니다.

 

11.5.1 Storybook / Code Snadbox (컴포넌트 라이브러리 및 코드 기반)

• Storybook : UI 컴포넌트의 개발 및 테스트를 위한 오픈 소스 도구입니다.
  Figma-Storybook 연동 : Figma의 컴포넌트와 Storybook의 코드 컴포넌트를 연결하여, 디자이너는 Figma에서 실제 구현된 컴포넌트의 최신 버전을 확인하고 개발자는 디자인 시스템을 시각적으로 탐색할 수 있습니다. Figma 플러그인을 통해 Storybook 컴포넌트를 Figma로 가져오는 것도 가능합니다.
• Code Sandbox : 웹 프로젝트를 온라인에서 빠르게 개발하고 공유할 수 있는 환경입니다.
  Figma-Code Sandbox 연동 : Figma 디자인에서 추출한 코드 스니펫을 Code Sandbox로 가져와 바로 프로토타이핑하거나 개발을 시작할 수 있습니다.

11.5.2 Git/GitHub(버전 관리 및 개발 협업)

• Figma-Git 통합(플러그인) : 일부 플러그인(예 : Git Sync)은 Figma 파일의 버전을 Git 리포지토리와 동기화하여, 디자인 변경 사항을 개발 코드 변경 사항과 함께 관리할 수 있도록 돕습니다. 이는 개발 워크플로우에 디자인을 더 깊이 통합하고자 할 때 유용합니다.
• GitHub/Git_Lab/Bitbucket 연동 : 개발자 모드에서 관련 플러그인을 통해 디자인 요소를 특정 GitHub 이슈와 연결하거나, 변경 사항을 커밋 메시지로 남기는 등의 기능을 활용할 수 있습니다.

11.6 마치며 : 디자인 생태계의 허브,Figma

이번 글에서는 Figma와 외부 도구의 연동이라는 주제로, 통합 워크플로우의 중요성부터 시작하여 개발자 핸드오프의 핵심인 Figma 개발자 모드를 심층적으로 다루었습니다. 또한, 프로젝트 관리 도구, 문서화 도구, 그리고 개발 워크플로우 및 코드 도구들과 Figma가 어떻게 유기적으로 연결될 수 있는지 다양한 예시를 통해 살펴보았습니다.

 

Figma는 더이상 단순한 디자인 툴이 아닙니다. 디자인 프로세스 전체를 아우르며, 기획부터 개발, 마케팅에 이르는 모든 이해관계자들을 연결하는 중앙 허브(Central Hub) 역할을 수행하고 있습니다. Figma의 강력한 연동성을 최대한 활용하면, 팀의 생산성을 극대화하고, 커뮤니케이션 비용을 절감하며, 궁극적으로 더 빠르고 효율적으로 고품질의 제품을 시장에 출시할 수 있습니다.

 

사실 개발자 도구의 경우 기획하시는 분들 같은 경우 크게 신경쓸 일은 없지만 개발자분들의 질의에 따라 화면을 봐야할 수도 있어서 기능적인 요소만 설명을 드렸습니다. 

 

이제 Figma의 핵심 기능과 확장성에 대한 여정의 거의 끝에 도달했습니다. 다음으로 다룰 주제는 파일 정리 및 최적화 : 대규모 프로젝트 관리 노하우입니다. 여러분의 Figma파일이 복잡해지고 커질수록 관리의 주용성은 더욱 커집니다. 최적화된 파일 관리를 통해 끊김 없는 디자인 경험을 유지하는 방법을 다음 글에서 다루겠습니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!