마이크로소프트가 워
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 팀에서 제품 경험의 포용성을 높이는 업무를 담당했다. - 접근성이 제품 개발 마지막 단계에 덧붙이는 작업으로 취급되는 문제를 지적했다. - 그녀는 디자이너들이 초기 단계부터 접근성을 고려하도록 돕는 플러그인을 개발했다. - 제공된 글은 해당 플러그인의 구체적인 기능 설명이 중간에 끊겨 있어 상세 내용까지는 확인할 수 없다. 조직에 맞는 승인 콘텐츠, 디자인 토큰과 라이브러리, 반복 작업을 플러그인으로 연결하면 디자인 시스템의 실제 활용도를 크게 높일 수 있다. 특히 팀 내 반복 작업을 먼저 찾아 작은 자동화 도구로 해결한 뒤, 효과가 검증된 도구를 조직 전체로 확장하는 접근이 실용적이다.
원문 읽기(새 탭에서 열림)