본문 바로가기
정보 수집

피그마 업데이트(230621) 내용 리뷰 - Overview

by 강정파티 2023. 6. 25.

참고 페이지 : https://www.figma.com/whats-new/

 

What's New in Figma

Learn about our latest features and updates.

www.figma.com


1. 데브모드 (Dev Mode)

같은 페이지에서 모드 전환을 통해 디자이너와 개발자가 협업하는 그림을 만들었다고 하네요!
제가 몰랐을 수도 있지만, 기존에 Editer와 viewer 각각 권한마다 보여지는 Inspect 상태에서 간격 보기 구동방식이 달라서 익숙하지 않은 개발자분들은 제플린을 쓰자고 하는 경우를 자주 맞닥들였었어요. 피그마에서 간격들을 보는데 매번 레이어를 따로 선택해서 하는데 불편해보이더라구요.
겉핥기로 보긴 했지만 이런 관점에서 보면 개발자 친화적인 기능들의 추가 및 변화로 유용해질 것 같다는 생각이 드네요!

크게는 아래같은 기능들을 소개하고 있어요.

1-1 호버 활용의 효율성 증가

마우스 포인트의 Hover만으로 바로 Space, Styles 등을 확인할 수 있다!
→ 기존에 개발자분들은 viewer권한에서 오브젝트 하나마다 하나씩 나와서 보기가 어렵다는 피드백이 많았는데 어떻게 변할지 궁금하네요

1-2 핸드오프 프로세스 지원으로 협업

Ready for Dev 디자이너의 핸드오프와 핸드오프된 프레임을 받아 코딩에 집중할 수 있는 프로세스를 지원한다!
→ 이 부분은 이전 업데이트에서 새로생긴 section기능이랑 맞물려 사용할 수 있다고 하는데요 기대가 됩니다.^^

1-3 플러그인을 통한 워크플로우

워크플로우를 피그마로 가져올 수 있는 SaaS 툴(Jira, GitHub,Storybook 등)의 플러그인을 지원한다!
→ 화면마다 일일이 화면을 이동해서 태스크를 관리하던 것과 달리 플러그인을 통해 피그마에서 바로바로 다른 업무 관리 도구에 기록할 수 있다고 하네요! 어느정도 깊이로 가능할지 기대가 되는 부분입니다.

1-4 VS Code 확장을 지원

이건 제가 개발자가 아니라 잘은 모르겠지만, 프론트 개발자 분들이 많이 사용하시는 Visual Studio Code로 바로 디자인을 코드로 연결해주고, VSC에서 리뷰하면서 조금 더 공수가 덜 들 수 있도록 초안을 잡아준다는 느낌으로 이해했어요. 프론트엔드 관련 지식이 있는 디자이너와 협업했을 때 굉장히 시너지가 날 수 있겠네요! (확실하진 않습니다^^)

그런데 한 가지 아쉬운건, 이 기능(Dev Mode)은 현재 베타버전이라 2023년까지만 무료로 사용 가능하다고 해요. 이후엔 유료 전환하나봄 ㅠ

돈내고 쓰는건 지당하신 말씀...이지만... 베타 쫌 더 쓰게 해줘...

 


 

2. 변수 관리

컴포넌트의 변수 관리가 고도화 되어 별도로 변수들만 모아서 관리하는 기능이 추가되었습니다.
이거 해보려고 무료 플랜 쓰다가 유료플랜으로 업그레이드 했어요! 무료 플랜은하나밖에 쓸 수 없게 되어있어요.
컬러 / 폰트 토큰, 라이트 / 다크모드 등 설정해서 바로바로 사용할 수 있을 듯 합니다.
엄청 꼼꼼하게 설정해놓아야 사용할 수 있을 것 같다는 건 함정!
‘컬러 토근’같은 것들 관리하는 것에 있어서 테이블로 관리할 수 있으니 기존에 패널에서 관리할 때보다는 편리할 것 같아 보여요.

이걸 설정해놓으면 전체 컴포넌트에 어떤 부분을 시스테믹하게 설정해놓고 간편하게 사용할 수 있을 것 같아요. 그전에는 매번 하나하나 바꿔주던지, 아예 큰 단위의 컴포넌트를 만들어놓는다던지 했어야 했는데 이것만 있으면 …!!! (물론 내가 잘 쓸줄 알아야겠지만… 크흠...)


 

3. 변수를 활용한 프로토타이핑

위에 소개된 변수 관리를 가지고와서 해당 변수들을 프로토타이핑 할 화면에 그대로 적용해가지고 각각 따로 화면을 만들지 않아도 인터렉션이 가능하도록 만드는 것이 가능해진(?)것 같아요.

아직 안써봐서 자세하게는 모르겠지만 해봐야 알 수 있을 것 같습니다.
영상 가이드를 봤을 때 if - else 방식에 눈길이 가서 일단 몇 번 해보면 쓸 수는 있을 것 같은데 연습이 많이 필요해보이긴 해요. ㅎㅎㅎ
매번 프로토타이핑 만들때 인터렉션 하나 구현하려면 여러 화면을 만들어놓고 이어붙였어야 했는데 조금은 수고가 덜 들어갈런지…^^


 

3. 기타

3-1 새로운 방식의 오토레이아웃 기능 추가

이건 정말 직접적으로 다가오는 업데이트 ㅠ
이거 정말 … 칩 UI 그릴 때 정말 필요했었는데요. 원래는 가로나 세로로만 오토레이아웃이 가능했는데, 줄바꿈은 대응하지 못했었거든요.
그런데 이번에는 줄바꿈도 지원해서 칩UI 형태를 여러개로 만들어서 붙여놓지 않아도 되게 되었어요!

3-2 폰트를 찾는 방법 

모든 폰트 / 자주쓰는 폰트 / PC에 설치되어있는 폰트 / 구글공유폰트 등 필터링해서 검색할 수 있다고 해요.
이거 항상 새로 추가한 시스템 폰트가 있을 때마다 폰트 이름 다시 확인해서 직접 입력해가지고 검색하고 했었는데 그런 수고가 덜겠어요.

3-3 홈에서 원하는 내용 찾기

업데이트 된 것 중에 검색할 때 여기도 카테고리별로 쪼개서 각각의 결과를 보여주고, 각 결과마다 추가정보도 보여주는 걸로 업데이트 되었다고 하니 기대가 되네요!
파일 찾을 때마다 여기저기 워크스페이스 돌아다니거나 recent 열어서 스크롤 해보다가 발견하곤 했는데 잘 됐어요. 이런거 필요했다는…

 


'정보 수집' 카테고리의 다른 글

데이터분석 프레임워크 : AARRR  (0) 2022.04.25

댓글