Navigating the intersection of design and business: a conversation with Airbnb’s Brian Chesky | Figma Blog (새 탭에서 열림)

Figma는 Config 2023을 통해 디자인과 개발의 경계를 허물고, 제품 개발의 전체 과정을 하나의 플랫폼으로 통합하겠다는 강력한 비전을 제시했습니다. 특히 디자이너와 엔지니어가 동일한 언어로 소통할 수 있도록 '개발자 모드(Dev Mode)'와 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 업데이트의 핵심입니다. 이를 통해 Figma는 단순한 디자인 도구를 넘어 팀이 함께 제품을 빌드하는 통합 협업 환경으로 진화했습니다.

개발 생산성을 높이는 '개발자 모드(Dev Mode)'

• 엔지니어가 디자인 파일에서 코드를 추출하고 구현에 필요한 정보를 더 쉽게 찾을 수 있도록 돕는 전용 인터페이스를 제공합니다.
• VS Code 익스텐션을 지원하여 개발자가 브라우저와 코드 에디터를 오가지 않고도 Figma의 디자인 가이드를 코드 바로 옆에서 확인할 수 있습니다.
• Jira, GitHub, Storybook과 같은 도구와 플러그인을 통해 연동할 수 있어, 디자인의 변경 사항을 개발 워크플로우 내에서 실시간으로 추적하고 관리할 수 있습니다.
• 디자인의 준비 상태(Ready for Dev)를 표시하는 기능을 통해 디자이너와 개발자 간의 불필요한 커뮤니케이션 비용을 줄여줍니다.

유연한 디자인 시스템을 위한 '변수(Variables)'

• 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 토큰(Design Tokens)을 체계적으로 관리할 수 있게 되었습니다.
• 하나의 디자인 레이아웃 안에서 라이트 모드와 다크 모드, 혹은 모바일과 데스크톱 환경을 즉시 전환할 수 있는 '모드(Mode)' 기능을 지원합니다.
• 디자인 시스템의 재사용성을 높이고 개발 시 코드상의 변수 구조와 일치시켜 핸드오프 시의 오차를 최소화합니다.

고도화된 프로토타이핑과 오토 레이아웃의 진화

• 프로토타이핑에 조건부 로직(If/Else)과 수학 연산식을 도입하여, 수많은 프레임을 만들지 않고도 복잡한 인터랙션을 정교하게 구현할 수 있습니다.
• 오토 레이아웃에 '줄바꿈(Wrap)' 기능을 추가하여 CSS의 Flexbox와 유사한 반응형 레이아웃을 더 직관적으로 설계할 수 있습니다.
• 요소의 최소 및 최대 너비(Min/Max Width)와 높이를 설정할 수 있어, 다양한 화면 크기에 대응하는 디자인 명세가 명확해졌습니다.

이제 Figma는 단순한 시각적 산출물을 만드는 곳이 아니라 실제 코드로 이어지는 '살아있는 명세서'의 역할을 수행합니다. 디자인 시스템을 구축할 때 새롭게 도입된 '변수' 기능을 적극 활용하고, 개발자와 함께 '개발자 모드'를 테스트하며 워크플로우를 최적화해 보시길 권장합니다.