피그마(Figma)는 2022년 5월 11일 자로 업데이트되었습니다. 업데이트 규모가 꽤 컸습니다. 그래서 제가 업데이트 리뷰를 진행했습니다. 본 글은 피그마 업데이트 내용을 정리하는 글입니다. 디자이너가 자주 사용할 기능 위주로 정리했습니다. 대부분의 내용은 피그마 공식 사이트를 참고한 것입니다.
업데이트를 크게 4가지로 분류했습니다. 시스템(System), 타이포그래피(Typography), 오토레이아웃(Auto-layout), 컴포넌트(Component)입니다. 신기하고 효율적인 기능들이 많이 추가되었습니다.
System
먼저 Spotlight me입니다. Spotlight me로 발표가 쉬워졌습니다. 발표를 시작하면서 상단 프로필에서 이 기능을 클릭하면 본인이 공유할 화면을 참여자들에게 바로 보여줄 수 있습니다.
또한 피그마는 다크모드를 지원하기 시작했습니다. UI는 멋있습니다. 하지만 권하지 않겠습니다. 검은색을 많이 사용하면 다크 모드에서 파악하기 어렵기 때문입니다.
Typography
일립시스 기능이 추가되었습니다. 일단 이 용어는 ..., 점점점, 말줄임표, 일립시스(ellipsis) 등 다들 다르게 부르는 것 같습니다. 모두 ...을 의미합니다. 저는 일립시스라고 부르겠습니다.
피그마 업데이트 이후 텍스트 박스에 일립시스를 설정할 수 있게 되었습니다. 너비를 Hug content만 아니면 자동으로 ... 찍히게 설정할 수 있습니다. 상당히 효율적으로 바뀌었습니다. 업데이트 전까지 일립시스를 표현하려고 디자이너가 텍스트 박스에 직접 입력했습니다. 손빨래하던 집에 세탁기 하나 장만한 기분입니다.
다음은 베이라인 정렬입니다. 업데이트 이전에는 정렬을 위해서 추가 프레임을 만들고 오토레이아웃(Auto-layout)으로 정렬을 맞추는 방식으로 작업했습니다. 이제부터는 텍스트 한정 Baseline Alignment로 한 프레임만 사용할 수 있습니다.
참고로 확대해 보면 살짝 어긋납니다. 하지만 충분합니다.
다음은 폰트의 무게 제어입니다. 약간의 CSS 개념입니다. 보통 디자이너가 Regular라 부르는 것은 개발자에게 font-weigth: 400;입니다. 그리고 Medium은 font-weigth: 500;입니다.
이번 피그마 업데이트로 Regular와 Medium 사이 450을 설정할 수 있게되었습니다. 이 기능은 Variable Font라고 부릅니다. 자유도가 높아져서 좋습니다. 하지만 많이 쓸 것 같지는 않습니다. 개발이 힘들 것 같습니다. 이런 부분이 추가되었다는 게 흥미롭습니다. 참고로 지원하는 범위는 서체마다 다릅니다.
Type settings는 Tabs로 분리되었습니다. 스크롤로 내려서 접근했던 Stylistic sets 같은 기능을 옆 탭 Details로 옮겨졌습니다. 기능 추가는 아닙니다. UI 변경입니다. Stylistic sets 같은 기능은 옛날부터 지원했습니다. 하지만 많이 사용을 안 했던 기능입니다. 다른 기능들이 많아지면서 관심을 못 받았습니다. 이제는 맥락에 맞게 다른 탭으로 옮기면서 공부할 기회로 삼아야겠습니다.
Auto-layout
오토레이아웃(Auto-layout)은 디자이너와 개발자 모두에게 이로운 방향으로 업데이트되었습니다. CSS에서만 가능했던 부분들이 피그마의 기능으로 생겼습니다.
UI는 맥락에 맞추어 그룹화되었습니다. 가로 값, 세로 값 설정 바로 아래 Hug contents, Fill container, Fixed 설정을 할 수 있게 되었습니다. 디자이너 입장에서 좌우 padding, 상하 padding을 따로 입력하는 것을 알고 분리되었습니다.
스트로크(Stroke) 기능이 업데이트되었습니다. 이제 스트로크를 상하좌우 따로 넣을 수 있게 되었습니다. 밑줄만 나오는 텍스트 필드(text field) 디자인할 때 유용할 것입니다.
또 오토레이아웃 프레임에서 스트로크 설정을 외부, 내부 설정할 수 있게 되었습니다. CSS의 박스사이징(box-sizing) 설정이랑 개념이랑 같아졌습니다.
마진(margin)에 음수(-) 값을 입력할 수 있게 되었습니다. 업데이트 전까지는 수동으로 배치했습니다. 이제는 겹치는 간격도 자동으로 배치할 수 있습니다. 프로필 목록 같은 디자인에 활용하기 유용할 것입니다.
한편 오토레이아웃의 문제점도 해결되었습니다. 기존에는 프레임 속에 하위로 프레임을 넣는 방식으로 해결했습니다. 이제는 오토레이아웃 프레임 1개로 해결할 수 있습니다. 즉 독립적으로 배치할 수 있도록 업데이트되었습니다.
Component
컴포넌트(Component)는 유용성도 난이도도 같이 높아졌습니다.
텍스트와 아이콘 같은 요소 변경이 쉬워졌습니다. 참고로 아이콘 베리언트는 모두 같은 프레임에 넣기를 권장합니다.
베리언트 내부에서 아래 조그마한 보라색 버튼이 나옵니다. 그러면 베리언트 내에서 같은 오브젝트를 선택할 수 있습니다. 참고로 레이어를 기준으로 선택합니다. 규모가 큰 베리언트 변경 작업도 이제는 쉬워졌습니다.
컴포넌트 속에서 다른 컴포넌트로 변경을 할 수 있습니다. 이 기능을 보고 인스턴스 스와프(Instance swap)라고 부릅니다. 위에서 아이콘을 변경하는 방법이 인스턴스 스와프하고 같은 방법입니다. 하지만 변경할 때 주의할 점이 있습니다. 변경할 베리언트끼리 같은 프레임(Frame)에 넣기를 권장합니다.
이해를 돕기 위한 이미지입니다. 아래는 랩노트 디자인 시스템의 일부입니다. 모두 프레임 단위로 PNG 복사했습니다.
위 인풋 템플릿(Input Template) 베리언트 속에는 아래의 텍스트 필드(Text fild) 컴포넌트가 들어있습니다. 유형별로 활용하기 위해 다른 프레임에 정리하고 있습니다. 이 업데이트 덕분에 디자인을 정리하고 협업하는 방식을 바뀔 것입니다.
결론
피그마는 닭잡는 칼도 소잡는 칼도 아닙니다. 이제는 T군의 건틀릿입니다.
Applaud가 1,000개 넘기면 모든 이미지는 gif로 바꾸겠습니다. 그리고 숨겨진 밈들을 모두 공개하겠습니다.
