Microsoft, 개발자 및 사용자를 위한 Fluent Design 업데이트 발표

블로그 게시물, Microsoft는 개발자와 사용자를 위한 Fluent Design 환경의 새로운 개선 사항을 발표했습니다.

디자인 프레임워크는 현재 Outlook, Teams, OneDrive 및 Microsoft와 같은 앱에서 사용됩니다. 최근 발표된 Fluent UI, 공유 헌장에 따라 웹 및 모바일 UI 라이브러리를 통합합니다.

Microsoft는 디자이너, 개발자, 접근성 및 국제화 전문가, 작가의 의견을 반영하여 개발자 프레임워크의 진화를 발표했습니다. 개선할 부분을 파악하고 올해는 디자인 토큰 시스템을 시작으로 디자인과 코드의 간극을 좁히는 것을 목표로 하고 있다.

새로운 크로스 플랫폼 라이브러리

Fluent UI는 코드, 디자인 및 상호 작용 동작을 공유하는 웹 및 모바일 앱을 만들기 위한 UX 프레임워크 모음입니다.

Microsoft의 구성 요소 사용 유창한 UI 반응 (편물), 유창한 UI 애플 (iOS 및 macOS) 및 유창한 UI 안드로이드 GitHub 라이브러리는 Microsoft 365 앱 및 서비스가 플랫폼 전반에서 보다 직관적이고 일관성을 유지하면서 강력한 도구로 유지되도록 합니다. 그들의 새로운 추가로 Fluent UI React 네이티브 라이브러리에서 Microsoft는 크로스 플랫폼 구성 요소를 만들고 있어 JavaScript 개발자가 여러 장치에서 고객에게 보다 빠르게 경험을 제공할 수 있도록 합니다.

네이티브 Windows 경험을 구축하는 개발자의 경우, WinUI Fluent 디자인 시스템을 계속 구현합니다.

각 장치에 고유하며 여전히 고유한 Fluent

Microsoft는 사용자 지정 탐색 모음과 같은 Fluent 디자인 요소를 통해 앱이 플랫폼 간에 고유한 Fluent 및 일관된 느낌을 주는 동시에 기본 iOS 및 Android 플랫폼에 적합하다고 생각한다고 말합니다.

보다 일관되고 생산적인 경험 제공

모든 Microsoft 365 앱에 동일한 디자인 언어를 사용하면 사용자가 한 앱에서 다른 앱으로 쉽게 이동할 수 있으며 탐색 및 작업 수행 방법에 대한 좋은 아이디어를 얻을 수 있습니다. 플랫폼도 마찬가지입니다. Microsoft는 사람들이 한 장치에서 작업을 시작하고 다른 장치에서 완료하는 경우가 많기 때문에 여러 플랫폼에서 일관된 경험을 생성하면 고객의 인지 과부하를 줄일 수 있다는 점에 주목합니다.

Microsoft의 테마 아키텍처 현대화

현재 Microsoft 제품은 모두 연결이 끊긴 테마 접근 방식을 사용합니다.

Microsoft는 확장 가능하고 미래 지향적인 디자인 시스템을 만들기 위해 테마 아키텍처를 현대화하려고 합니다. 향후 테마는 Microsoft 프레임워크 전반에 걸쳐 공통 테마 인프라, 분류 및 중앙 집중식 교차 플랫폼 스타일 라이브러리 집합을 사용하여 모든 플랫폼에서 디자인 값을 더 쉽고 빠르게 업데이트할 수 있도록 합니다.

이를 위해 고정된 값에서 더 많은 불가지론적 변수 또는 디자인 토큰으로 이동하고 있습니다. 디자인 토큰은 UI 표면의 시각적 속성을 정의하고 공통 구문을 사용하여 디자인을 코드에 연결합니다. 설계 도구와 개발 도구 모두에서 액세스할 수 있는 중앙 집중식 스타일 라이브러리는 코딩된 구성 요소를 수정할 필요 없이 업데이트할 수 있는 장소 역할을 합니다.

토큰의 힘을 노출하고 복잡성을 완화하기 위해 Microsoft는 기존 디자인 도구 내에서 디자이너를 만날 수 있는 방법을 모색하고 있습니다. Microsoft의 대부분의 설계자는 Figma를 사용하기 때문에 Microsoft는 마찰이 거의 또는 전혀 없이 설계 토큰을 지원하도록 해당 도구의 기능을 확장하는 방법을 찾았습니다.

결과는 기본 속성 패널을 대체할 Figma 플러그인이었습니다. 속성 패널을 통해 색상이나 획 너비를 할당하여 디자인을 만드는 대신 디자이너는 레이어에 토큰을 할당합니다. 필요한 경우 이러한 토큰을 다른 값으로 다시 매핑하여 변경 사항이 디자인 전체에 전파되도록 할 수 있습니다. Microsoft는 또한 이러한 디자인 토큰을 플랫폼별 값으로 변환하는 개발 파이프라인을 구축하고 있습니다.

이러한 노력은 함께 설계 값을 코드베이스에 직접 배포하여 제품 설계자와 개발자에게 완전히 통합된 설계-코드 워크플로를 제공하는 데 도움이 됩니다.

이것은 최종 사용자에게 연쇄 효과가 있습니다. 사람들은 자신이 만드는 앱의 테마 라이브러리에 쉽게 옵트인할 수 있습니다. 그런 다음 이러한 라이브러리를 사용자 지정하여 제품 브랜드 또는 서비스를 더 잘 반영하고 생태계 전반에 걸쳐 더 일관성을 느낄 수 있습니다.

https://vimeo.com/417688279

수백 명의 개발자와 수백만 명의 소비자가 매일 사용하는 기본 모양과 느낌을 존중하고 UX 구성 요소를 포함하는 디자인 시스템을 찾는 개발자는 여기에서 Fluent를 사용해 보세요.. 내부 및 외부 개발자 모두 Fluent UI Microsoft GitHub 조직 그리고 창조를 시작하십시오.

Microsoft는 온라인에서 Fluent UI와 Fluent Design System에 대한 향후 열망에 대해 더 자세히 이야기할 것입니다. 마이크로소프트 빌드 2020 컨퍼런스 19월 20일부터 XNUMX일까지 무료이며 모두에게 열려 있습니다.