GIF로 피그마 프로토타 (새 탭에서 열림)

Figma는 디자인 시스템의 효율성을 극대화하기 위해 컴포넌트 관리 기능을 강화하고, 외부 생태계 확장을 위한 플러그인 베타 프로그램을 공개했습니다. 이번 업데이트의 핵심은 디자인 요소에 풍부한 컨텍스트를 제공하여 협업의 정확도를 높이고, 개발자 중심의 확장성을 통해 반복적인 디자인 작업을 자동화할 수 있는 토대를 마련한 것입니다.

컴포넌트 문서화 및 정보 관리 강화

  • 설명(Description) 필드 추가: 각 컴포넌트에 구체적인 사용 용도나 제약 사항을 입력할 수 있는 필드가 추가되어, 팀원들이 라이브러리 탐색기에서 해당 컴포넌트의 의도를 즉각적으로 파악할 수 있게 되었습니다.
  • 외부 문서 링크 연결: 컴포넌트 내에 디자인 가이드라인이나 코드 문서(예: Storybook)로 연결되는 링크를 직접 포함할 수 있습니다. 이를 통해 디자인과 실제 구현 코드 사이의 간극을 줄이고 단일 진실 공급원(Single Source of Truth)을 구축하기 용이해졌습니다.
  • 검색 효율성 증대: 추가된 설명과 메타데이터는 컴포넌트 검색 시 키워드로 활용되어, 대규모 라이브러리 내에서 필요한 자산을 더 빠르게 찾을 수 있도록 돕습니다.

플러그인 베타(Plugins Beta)와 확장성

  • 플러그인 생태계 구축: Figma 내부의 기능을 확장하거나 외부 데이터를 실시간으로 불러올 수 있는 플러그인 시스템의 비공개 베타를 시작했습니다. 이는 폐쇄적인 디자인 도구를 넘어 하나의 오픈 플랫폼으로 진화하는 중요한 단계입니다.
  • 웹 어셈블리(WebAssembly) 활용: 플러그인은 웹 표준 기술을 기반으로 구동되며, 특히 WebAssembly를 사용해 복잡한 연산이나 대량의 레이어 수정 작업 시에도 네이티브 앱에 준하는 강력한 성능과 보안을 유지합니다.
  • 워크플로우 자동화: 반복되는 레이어 이름 변경, 데이터 채우기, 디자인 정합성 체크 등 수동으로 진행하던 작업들을 자동화하여 디자이너가 창의적인 문제 해결에 더 집중할 수 있는 환경을 제공합니다.

사용성 개선 및 세부 기능 업데이트

  • 정교해진 선택 도구: 캔버스 위에서 여러 개체를 선택할 때의 시각적 피드백을 개선하여, 복잡한 레이어 구조 속에서도 어떤 요소가 선택되었는지 명확하게 식별할 수 있습니다.
  • 색상 선택기(Color Picker) 최적화: 문서에서 자주 사용되는 색상과 최근 사용한 색상에 대한 접근성을 높여, 일관된 색상 팔레트를 유지하며 작업하는 속도를 향상했습니다.
  • 파일 브라우저 개선: 프로젝트와 파일의 구조를 더 직관적으로 볼 수 있도록 UI를 다듬어 팀 단위의 협업 효율을 높였습니다.

이번 업데이트를 통해 디자이너는 단순한 화면 그리기를 넘어 시스템 구축과 자동화라는 더 넓은 영역으로 역할을 확장할 수 있게 되었습니다. 향후 정식 출시될 플러그인을 원활하게 활용하기 위해 현재의 디자인 시스템에 문서화 링크를 미리 보강하고, 반복되는 업무 중 어떤 부분을 자동화할 수 있을지 팀 내에서 논의해 보는 것을 추천합니다.