디자인 시작하기

디자인 시작하기 (Start designing)

Fluent 2 UI 키트를 사용해 아름답고 응집력 있는 Microsoft 경험을 만들어보세요. Figma로 제작된 Fluent 2 UI 키트에는 코드 라이브러리에 매핑되는 디자인 자산이 들어 있어요. 즉 디자인에서 개발로의 매끄러운 핸드오프가 가능하죠.

출처: 문서

본문

Figma의 Fluent 2

우리는 UI 키트를 제작·호스팅하기 위해 Figma를 사용해요. Figma는 최신 디자인 기능과 최적화에 접근하게 해주고, 여러분의 디자인이 항상 Microsoft 스타일에 맞춰지도록 도와줘요.

Fluent 2 Core in Figma

  • Fluent 2 Web UI Kit — Fluent 디자인 자산
  • Fluent 2 iOS UI Kit — Fluent 디자인 자산
  • Fluent 2 Android UI Kit — Fluent 디자인 자산

UI 키트 구성 (UI kit organization)

우리의 복잡한 자산 시스템을 간소화하고 각 파일의 유용성을 최대화하기 위해, UI 키트를 특정 역할과 지침을 가진 네 가지 뚜렷한 계층으로 구성했어요.

UI 키트 설명
Fluent 2 design language 색, 스트로크 너비, 코너 반경, 간격, 크기 토큰을 포함한 Fluent와 Copilot 디자인 스타일링 결정의 진실 공급원(source of truth)
Fluent 2 Core UI Kits 웹·iOS·Android용 코드 정렬 빌딩 블록으로, 구조화된 고품질 컴포넌트로 매끄러운 디자인-개발 핸드오프 보장
Copilot UI Kits Fluent AI와 OneCopilot Mobile에 정렬된 웹·iOS·Android의 AI 중심 컴포넌트와 패턴으로, AI 경험을 위해 Fluent Core를 확장하고 혁신을 촉진하도록 설계
Labs UI Kits 웹과 모바일용 파트너 주도 키트로, 팀이 기여·실험하고 비전 있는 아이디어를 실현

라이브러리 활성화 (Enabling the libraries)

Assets 패널의 Libraries 다이얼로그에서 Fluent 2 UI 키트를 활성화하세요. 초안(drafts)에서 UI 키트를 항상 사용할 수 있도록 Account settings에서 자동 활성화할 수 있어요.

플랫폼 간에 공유되는 자산의 경우 Fluent Iconography와 Fluent Emoji 키트 같은 추가 라이브러리를 활성화할 수 있어요. 더 많은 키트는 Figma 커뮤니티의 Microsoft 페이지에서 확인하세요.

Fluent로 디자인하기 (Designing with Fluent)

컴포넌트는 Assets 패널에 구성돼 있어요. 대부분의 컴포넌트는 표면 가까이에 유지되고 두 단계 이상 중첩되지 않아요.

Variants와 컴포넌트 속성은 컴포넌트 유연성을 제공하고 특정 요구에 맞게 컴포넌트 구성을 최적화할 수 있게 해줘요. UI 키트에서 사용 가능한 속성은 코드에 매핑됩니다.

variants와 컴포넌트 속성에 대해 더 알아보려면 Figma의 도움말 문서를 방문하세요.

Figma Variables로 스타일링 (Styling with Figma Variables)

Fluent 2 design language 파일은 웹과 모바일용 글로벌 및 별칭 스타일링 변수(색, 스트로크 너비, 코너 반경, 간격, 크기 토큰)를 담고 있어요. 디자이너의 사용 편의를 위해 최적화된 Figma variables는 라이트/다크 모드 전환을 쉽게 만들고, 이제 Fluent와 Copilot용 스타일링 자산을 지원해요.

더 알아보기 (Learn more)