피그마, 개발자 모드 공개

디자이너와 개발자 협업 시스템 개선

디자인 도구 피그마가 개발자 친화적인 작업 공간을 제공하는 '개발 모드(Dev Mode)'를 도입했다.

피그마는 22일(현지시간) 미국 샌프란시스코에서 개최한 '콘피그 2023' 컨퍼런스에서 '데브 모드'를 발표했다.

피그마는 전체 주간활성사용자의 30%를 차지하는 개발자에게 더 편안한 환경을 제공하기 위해 데브 모드를 도입한다고 설명했다. 개발자 고유의 워크플로우와 기본설정에 최적화할 수 있다고 했다.

피그마 데브 모드는 크롬 브라우저의 개발자모드처럼 디자인 파일의 설계를 검사할 수 있다. 디자인 개체에 마우스 포인터를 가져가 클릭하면 치수, 사양, 스타일 등의 세부정보를 확인할 수 있다. 준비 완료된 디자인을 CSS 코드, iOS 스위프트UI 코드, 안드로이드 코드 스니펫 등으로 생성할 수 있고, 플러그인을 사용해 사용중인 프레임워크에 맞게 코드를 커스터마이징 할 수 있다.

피그마 플러그인은 깃허브, 지라 등 다양한 개발 워크플로우를 디자인 도구에 통합하게 해준다. AWS 앰플리파이스튜디오, 구글 릴레이, 애니마 등의 플러그인도 있다.

피그마 토큰으로 디자인 파일과 코드에서 동일한 언어를 사용하고, 다른 개발자 리소스를 확인할 수 있다.

피그마 데브 모드 공간에서 디자인 객체의 정보를 확인하고 CSS나 스위프트UI 등의 코드를 바로 생성할 수 있다

피그마는 비주얼스튜디오코드(VS코드)용 확장을 제공한다. VS코드에 피그마에서 작성한 디자인 파일을 가져오고, 검사할 수 있다. VS코드 사이드바에 디자인 파일을 표시하고 실시간으로 디자이너와 협업할 수 있다. 알림 수신, 코드 제안 등이 VS코드에서 가능해진다.

섹션 상태를 활용하면 디자이너가 명확하게 레이블을 지정한 화면을 확인해 작업 내용을 파악할 수 있다. 프레임을 이전 버전과 비교해 어떤게 바뀌었는지 확인할 수 있다. 디자이너에게 디자인 문서의 섹션을 개발 준비로 표시하는 기능이 제공된다.

새로운 프로토타이핑 도구는 색상, 숫자, 문자열 변수, 불리언 등을 지원한다. 변수를 업데이트하면 모든 속성이 업데이트되도록 속성값을 변수 기반으로 설정할 수 있다. 화이트모드 및 다크 모드 등 각각의 색상값을 다르게 설정하는 별도의 변수그룹을 만들 수 있다.

피그마 VS코드용 확장

숫자를 늘리거나 변수를 다른 값으로 설정하는 등의 논리를 사용해 버튼 클릭 같은 트리거를 정의할 수 있다.

피그마는 VS코드용 피그마 데브모드의 베타 기간동안 모든 사용자에게 무료로 체험 기회를 제공한다. 데브 모드와 피그마 편집기 라이선스는 내년부터 유료 구독자에게만 제공된다. 조직 플랜의 요금은 월 25달러, 엔터프라이즈 플랜 요금은 월 35달러다.