Figma, 설계-개발 격차를 해소하기 위해 개발 모드, 변수 및 향상된 프로토타이핑 도입

Figma는 샌프란시스코에서 열린 연례 Config 컨퍼런스에서 제품 디자인 플랫폼을 위한 다양한 새로운 기능을 공개했습니다. 목표는 디자인과 개발 간의 격차를 해소하고 협업을 강화하며 창의적인 프로세스를 간소화하는 것입니다. 발표된 기능에는 개발자 모드라고 하는 개발자를 위한 고유한 작업 환경, 설계 변수 및 고급 프로토타이핑이 포함됩니다.

흥미롭게도 플랫폼이 주로 디자인 도구임에도 불구하고 Figma의 주간 사용자 중 1/3 이상이 개발자입니다. Figma의 제품 리더인 Avantika Gomes는 이를 개발자와 같은 더 많은 공동 작업자를 초대하는 플랫폼의 웹 기반 특성에 기인합니다.

Dev Mode는 디자이너와 개발자가 서로 다른 모드에서 작업하면서 동일한 파일 내에서 동일한 디자인으로 작업할 수 있도록 별도의 인터페이스를 제공합니다. 이 설정을 사용하면 이 두 역할 간의 버전 업데이트 및 앞뒤 대화가 필요하지 않습니다. 개발자는 CSS, iOS 및 Android 코드의 프로덕션 준비 스니펫을 생성하는 동안 중요한 정보에 액세스할 수 있습니다. Dev Mode는 원활한 워크플로우 자동화를 위해 Jira, GitHub, Storybook과 같은 도구에도 연결됩니다.

또한 Dev Mode를 사용하면 Figma의 설계 시스템을 구성 요소 코드 및 문서에 연결할 수 있습니다. 이 기능을 사용하면 코드 편집기를 종료하지 않고도 Figma 파일을 검사하고 디자이너와 협업하고 Figma 알림을 쉽게 수신할 수 있습니다. 또한 개발자는 레이블을 활용하여 디자인 상태를 추적하고 개발 단계에 따라 디자인 파일을 구성하며 변경 사항을 신속하게 비교할 수 있습니다.

Dev Mode와 함께 Figma는 코딩의 변수와 마찬가지로 여러 브랜드, 장치 및 테마를 만들고 유지 관리하는 프로세스를 간소화하기 위해 디자인 변수를 도입하고 있습니다. Figma 변수는 색상이나 크기 조정과 같은 일관된 UI 요소를 설정하는 디자인 토큰도 지원합니다. 예를 들어 UI 인터페이스에 밝은 모드와 어두운 모드가 있는 경우 변수를 통해 디자이너는 이러한 모드 간에 집합적으로 전환할 수 있는 영역의 요소를 그룹화할 수 있습니다.

변수 외에도 Figma는 고급 프로토타이핑을 출시하여 사용자가 Figma 캔버스에서 직접 보다 사실적인 프로토타입을 개발할 수 있도록 합니다. 이 향상된 기능은 프로토타입을 디자인하고 테스트하기 위해 서로 다른 도구 또는 창 사이를 전환할 필요성을 최소화합니다. Figma의 제품 부사장인 Sho Kuwamoto는 고급 프로토타이핑이 가장 사실적인 프로토타입을 제공함으로써 더 나은 결과를 낳는다고 믿습니다.

또한 Figma는 완전히 반응하는 디자인을 위한 자동 레이아웃 도구와 더 빠른 글꼴 필터링 및 위치를 위한 새로운 메뉴, 검색 기능 및 시각적 인덱스로 글꼴 선택기를 업데이트합니다. Figma의 파일 브라우저는 또한 공유 파일, 프로젝트 및 알림에 빠르게 액세스할 수 있는 새로운 UI를 보여줍니다.

Dev Mode는 공개 베타 버전이며 2023년까지 무료로 사용해 볼 수 있으며 2024년에는 조직에서 시트당 월 $25, Enterprise에서 시트당 월 $35의 가격 옵션을 사용할 수 있습니다. 변수는 오픈 베타에서 사용할 수 있으며 기능 가용성은 Professional 및 Organization 플랜에 따라 다릅니다. 고급 프로토타이핑은 Professional 플랜 이상 사용자가 액세스할 수 있습니다. 이러한 기능을 통합함으로써 Figma는 증가하는 개발자 사용자 기반을 무시하지 않고 디자이너와 개발자 간의 원활한 협업을 보장합니다.

Figma 및 AppMaster 와 같은 플랫폼은 설계 및 개발을 간소화하는 데 중요한 역할을 합니다. no-code 플랫폼인 AppMaster 사용자가 백엔드, 웹 및 모바일 애플리케이션을 시각적으로 생성할 수 있도록 지원하여 프로세스의 생산성과 비용 효율성을 향상시킵니다.