Figma의 Config 2022에서 발표된 이 글은 현대 제품 개발의 복잡성과 속도에 대응하기 위해 디자인 도구가 나아가야 할 방향을 제시합니다. 디자인과 개발 사이의 간극을 좁히는 기능적 업데이트를 통해 팀이 더 빠르게 협업하고 창의적인 문제 해결에 집중할 수 있는 환경을 구축하는 것이 핵심입니다. 결국 디자인 도구는 단순히 화면을 그리는 수단을 넘어, 실제 제품의 작동 방식을 더 정교하게 반영하는 플랫폼으로 진화해야 함을 강조합니다.

디자인 시스템의 효율을 극대화하는 컴포넌트 속성

컴포넌트 속성(Component Properties): 이전에는 작은 변화를 위해서도 수많은 변체(Variants)를 만들어야 했으나, 이제는 불리언(Boolean), 텍스트 교체, 인스턴스 교체 속성을 통해 하나의 컴포넌트 내에서 복잡한 구성을 제어할 수 있습니다.
복잡도 감소: 이를 통해 디자인 시스템 관리자는 유지보수해야 할 레이어 수를 획기적으로 줄일 수 있으며, 디자이너는 필요한 컴포넌트를 더 직관적으로 찾아 사용할 수 있습니다.

실제 레이아웃 로직을 반영하는 오토 레이아웃의 진화

절대 위치 지정(Absolute Positioning): 오토 레이아웃 프레임 안에서도 특정 요소를 흐름에서 제외하고 자유롭게 배치할 수 있어, 툴바나 알림 배지 같은 요소를 훨씬 쉽게 구현할 수 있습니다.
음수 간격(Negative Spacing) 및 쌓기 순서 제어: 요소 간의 겹침을 허용하고 쌓이는 순서를 조절할 수 있게 되어, 아바타 스택과 같은 디자인을 별도의 수작업 없이 구현 가능합니다.
캔버스 제어 직관화: 복잡한 설정창을 거치지 않고 캔버스 위에서 직접 간격과 패딩을 드래그하여 조절할 수 있는 사용자 경험이 강화되었습니다.

디테일한 표현력과 개발 친화적 도구들

가변 글꼴(Variable Fonts) 지원: 글꼴의 굵기, 너비, 기울기 등을 세밀하게 조정할 수 있어 타이포그래피의 표현력이 극대화되었습니다.
개별 테두리(Individual Strokes): 상하좌우 각 면의 테두리 두께를 다르게 설정할 수 있게 되어 CSS의 border 속성과 동일한 방식으로 디자인이 가능해졌습니다.
다크 모드 및 스포트라이트: 사용자의 눈 피로를 줄이는 다크 모드와 협업 시 발표자의 화면을 실시간으로 따라가게 하는 스포트라이트 기능으로 업무 효율을 높였습니다.

위젯을 통한 협업의 확장

FigJam 위젯: 단순히 그리는 도구를 넘어 워크플로우를 자동화하고 데이터를 연결할 수 있는 위젯 시스템이 도입되었습니다.
생태계 확장: 커뮤니티 개발자들이 만든 위젯을 통해 팀의 고유한 요구사항에 맞춘 맞춤형 협업 도구를 구축할 수 있게 되었습니다.

디자인 시스템 운영자라면 기존의 방대한 변체(Variants)를 컴포넌트 속성(Component Properties)으로 리팩토링하여 시스템 가독성을 높이는 것을 추천합니다. 또한, 강화된 오토 레이아웃과 개별 테두리 기능을 적극 활용하면 실제 코드 구현 방식과 일치하는 디자인 산출물을 생성할 수 있어 개발자와의 협업 효율을 획기적으로 개선할 수 있습니다.