[앗티끌06] 피그마 Config 2023 : 개발자 모드가 생겼다!

Config 2023 후기 (sanghyo.xyz)

https://yozm.wishket.com/magazine/detail/2084/

개발자 모드 공개한 ‘피그마 Config 2023’ 주요 리뷰 | 요즘IT

---

1. 들어가며

KST기준 23년 6월 22~23일에 Config 2023(피그마 컨퍼런스)가 진행됐다.
공식 홈페이지

 

컨퍼런스의 키노트 세션에서는 2023년의 피그마 업데이트 방향을 소개했다. 앞으로 피그마에서 모든 UIUX작업이 가능하고 개발 친화적인 기능들로 개발자와의 협업을 강화할 수 있도록 변화해 나갈 예정이라고 한다.

 

나도 피그마에서 가장 크게 느낀 변화는 아무래도 새로 생긴 개발자 모드인데, 분명 내 눈에 보이지 않는 변화들도 있을 테니 아티클 정리가 필요하다고 느꼈다.

 

 

 

2. 핵심 기능 4가지의 추가

1. Variables = 디자인 토큰

이제는 피그마에서 구축한 디자인시스템의 토큰 값들을 외부 서드파티를 이용해서 끌어와 사용하지 않아도 된다!

 

간격, border-radious, 색상, 폰트, 다크/라이트모드 등을 토큰값으로 쉽게 관리할 수 있다고 한다.

스타일 가이드의 부족했던 점들이 보완된 것 같아서 유용할 것 같다 :)

 

2. Prototyping

기존에는 피그마에서의 프로토타이핑 기능의 한계로 인해 프로토파이를 사용이 필요하거나, 기능은 부족하지만 피그마만 사용하기 위해 내부 기능으로 만족하고 넘어가기도 했다. 

 

그랬던 피그마가 드디어 프로토타이핑에도 힘을 주기 시작한다고 한다..!

1번의 variable(변수) 기능을 활용하여 특정 버튼 클릭 시, 컴포넌트를 추가한다던가, 동시에 결제 금액을 변경시키는 등 프로토파이에서만 가능했던 조건부(conditional) 프로토타이핑이 가능해졌다.

 

이 정도 기능들만 추가되어도 프로토파이로 이탈 없이 충분히 피그마에서 프로토타입 제작이 가능해 보인다 ㅎㅎ

 

3. Auto layout

Auto layout에 wrap 기능이 추가되었다.

이제는 반응형 웹에서 Auto layout을 지정해 둔 컨테이너의 너비가 줄어들 때에 자동으로 아랫줄로 넘어가도록 설정이 가능하다👍

 

4. Dev mode

개발팀에 피그마 산출물을 넘겨도 막상 작업은 제플린을 사용하시거나, 아예 제플린으로 변환하여 드리는 경우도 있다.

아무래도 피그마가 개발 친화적인 툴이 아닌, 디자인을 위한 툴이기 때문에 불편한 점들이 많았기 때문이다.

피그마도 이를 잘 알고 있었기에 개발자들까지 피그마를 이용하도록 포섭 정책을 쓰는 것 같다. 

 

- 토글버튼으로 개발자모드로 손쉽게 전환 가능

- CSS로만 제공되던 스타일 코드가 iOS와 Android 언어로도 제공

- 각 컴포넌트들에 호버 시, 속성 값들 확인 가능

- inspect에서 px 단위만 제공되지 않고 상대단위인 rem으로도 확인 가능

- 플러그인으로 github, jira에 연결하여 효율적인 관리 가능

- VS Code 자체에서 피그마를 연동 가능 -> 개발에 필요한 패널들만 재구성하여 보여주고, 개발자들이 코드작업을 함과 동시에 디자인을 볼 수 있다는 엄청난 기능이 추가된 것..!

스타일이 CSS만 제공됐었는데 이제는 iOS, Android도 추가됐다.

 

 

3. 그 외 자잘한 기능들

1. 최대, 최소 높이와 너비 지정

반응형 웹을 위해 min, max의 높이와 너비값을 피그마에서 지정이 가능해졌다

 

2. Mark as Ready for dev

대부분의 스타트업들은 애자일 방식으로 진행되기에 개발자들과 피그마를 통해 소통하는 일이 잦다.

기존에는 개발팀에 공유할 피그마 파일을 별도 생성하여 사용하곤 했는데, 이제는 섹션 기준으로 mark as ready for dev 기능을 사용할 수 있기에 디자인까지 완료된 페이지들인지 한눈에 개발팀에 전달이 가능하다!

 

3. 폰트 미리보기 기능

font picker를 통해 적용 전에 폰트 미리보기 기능이 드디어 생겼다.

 

4. AI Support

'diagram'이라는 이름의 AI를 사용하여 디자인 시스템을 만들고 웹사이트를 구축하는 과정에서 피그마의 AI를 사용할 수 있다.

 

 

4. 정리하며

컨퍼런스가 끝난 직후엔 6월 24일에 바로 포스팅을 하려 했는데...

정신없는 현생으로 인해 이렇게 늦어지게 됨을 반성한다😇

 

아직 업데이트된 기능들을 충분히 살펴보지는 못했지만,

변화된 점들을 미리 공부했으니 좀 더 풍부한 피그마 사용이 가능할 것 같은 예감 :)