마이크로소프트가 워 (새 탭에서 열림)

Microsoft는 Figma 플러그인을 활용해 Fluent 디자인 시스템의 도입을 여러 제품·조직·팀으로 확장하고, 디자인 과정의 일관성과 효율성을 높였다. 특히 승인된 콘텐츠를 불러오고, 제품별 라이브러리를 전환하며, 반복 작업을 자동화하는 사내 도구를 개발했다. 이 글은 조직의 고유한 업무 방식에 맞춘 비공개 플러그인이 디자이너의 창의적 작업에 더 많은 시간을 돌려줄 수 있다고 설명한다.

Fluent 디자인 시스템과 플러그인의 역할

• Microsoft는 모든 제품에서 사용성, 일관성, 접근성을 높이기 위해 Fluent 디자인 시스템을 운영했다.
• 여러 제품군과 조직, 팀에 디자인 시스템을 적용하려면 단순한 가이드라인만으로는 부족하고 효율적인 도구가 필요했다.
• Figma 플러그인은 반복 작업을 줄이고, 조직별 데이터와 규칙을 디자인 프로세스에 직접 통합하는 수단으로 활용됐다.
• 공개 플러그인뿐 아니라 특정 팀의 승인 절차와 콘텐츠 정책에 맞춘 사내 전용 플러그인도 개발했다.

승인된 디자인 콘텐츠를 불러오는 Content Reel

• 일반적인 더미 텍스트나 Lorem Ipsum은 실제 디자인 의도와 콘텐츠 특성을 충분히 반영하지 못한다.
• Microsoft는 사내용 Content Reel을 만들어 승인된 다음 요소를 Figma 디자인에 바로 삽입했다.
  • 승인된 텍스트 문자열
  • 아바타
  • 아이콘
• 디자이너가 콘텐츠를 직접 찾거나 사용 승인을 다시 받을 필요가 없어 작업 속도가 향상됐다.
• 조직마다 자체 콘텐츠 저장소와 승인 기준을 연결한 Content Reel을 만들 수 있다는 점을 보여준다.

제품별 라이브러리를 빠르게 전환하는 Themer

• Microsoft는 제품마다 고유한 라이브러리와 스타일을 사용하며, Figma 안에 수백 개의 라이브러리가 존재했다.
• 제품 스타일에 맞게 디자인을 수동으로 변경하는 작업은 규모가 커질수록 비효율적이었다.
• Jackie Chui가 개발한 Themer는 Work, Outlook 등 여러 제품 테마 사이를 빠르게 전환하도록 지원했다.
• 공개 버전 Themer는 라이브러리에서 게시된 스타일을 쉽게 교체하는 기능을 제공한다.
• 이를 통해 하나의 디자인을 여러 제품의 시각적 체계에 맞게 적용하는 비용을 줄였다.

반복 작업을 줄이는 워크플로 도구

Microsoft 디자이너들은 창의적인 문제 해결에 집중하기 위해 반복적인 작업을 자동화하는 여러 플러그인을 제작했다.

• Find and Replace
  • 페이지 내 텍스트를 검색하고 일괄 교체한다.
  • 일반적인 텍스트 편집기의 찾기·바꾸기와 유사하다.
• Paste to Fill
  • 복사한 이미지를 선택한 레이어의 Fill로 붙여 넣는다.
  • 이미지 URL을 입력해 레이어의 이미지 Fill로 불러올 수도 있다.
• Button Resizer
  • 버튼의 라벨 너비에 맞춰 버튼 크기를 쉽게 조정한다.
• Jackie는 Figma API가 공개된 이후부터 플랫폼을 활용해 팀의 디자인 작업을 개선하는 도구를 꾸준히 개발했다.
• Figma가 Microsoft의 주요 디자인 도구가 된 만큼, 그 위에 자체 업무 도구를 구축하는 것이 자연스러운 선택이었다.

접근성을 프로세스에 포함하려는 시도

• Microsoft 디자이너 Tiffany Chen은 Modern Input and Accessibility 팀에서 제품 경험의 포용성을 높이는 업무를 담당했다.
• 접근성이 제품 개발 마지막 단계에 덧붙이는 작업으로 취급되는 문제를 지적했다.
• 그녀는 디자이너들이 초기 단계부터 접근성을 고려하도록 돕는 플러그인을 개발했다.
• 제공된 글은 해당 플러그인의 구체적인 기능 설명이 중간에 끊겨 있어 상세 내용까지는 확인할 수 없다.

조직에 맞는 승인 콘텐츠, 디자인 토큰과 라이브러리, 반복 작업을 플러그인으로 연결하면 디자인 시스템의 실제 활용도를 크게 높일 수 있다. 특히 팀 내 반복 작업을 먼저 찾아 작은 자동화 도구로 해결한 뒤, 효과가 검증된 도구를 조직 전체로 확장하는 접근이 실용적이다.