Material Design 3 – 정적 색 구성표(번역)

정적 색 구성표는 일관되고 균일한 디자인을 가져야 하는 브랜드 제품에 이상적입니다. Dynamic color – Material Design 3

/base line

베이스라인은 디폴트 정적 색 구성표입니다. 접근성 높은 색상 페어링을 사용하며 라이트 테마 및 다크 테마 모두에 대한 색상을 포함합니다.

베이스라인 색 구성표를 사용하면 최종 사용자는 다음을 볼 수 있습니다.

• 정적 색상을 사용한 접근성 높은 UI

Baseline colors

머티리얼 테마 빌더를 사용하여 피그마에서 베이스라인 색상을 가져옵니다.

Baseline color tokens

Non-dynamic,3P,Light/Dark
Primary colors
-Primary: Main color used across screens and components
–Light: md.ref.palette.primary40
–Dark: md.ref.palette.primary80
-On primary: Text and icons shown against the primary color
–Light: md.ref.palette.primary100
–Dark: md.ref.palette.primary20
-Primary container: Standout container color for key components
–Light: md.ref.palette.primary90
–Dark: md.ref.palette.primary30
-On primary container: Contrast-passing color shown against the primary container
–Light: md.ref.palette.primary30
–Dark: md.ref.palette.primary90

Secondary colors
-Secondary: Accent color used across screens and components
–Light: md.ref.palette.secondary40
–Dark: md.ref.palette.secondary80
-On secondary: Text and icons shown against the secondary color
–Light: md.ref.palette.secondary100
–Dark: md.ref.palette.secondary20
-Secondary container: Less prominent container color, for components like tonal buttons
–Light: md.ref.palette.secondary90
–Dark: md.ref.palette.secondary30
-On secondary container: Contrast-passing color shown against the secondary container
–Light: md.ref.palette.secondary30
–Dark: md.ref.palette.secondary90

Tertiary colors
-Tertiary
–Light: md.ref.palette.tertiary40
–Dark: md.ref.palette.tertiary80
-On tertiary
–Light: md.ref.palette.tertiary100
–Dark: md.ref.palette.tertiary20
-Tertiary container: Contrasting container color, for components like input fields
–Light: md.ref.palette.tertiary90
–Dark: md.ref.palette.tertiary30
-On tertiary container: Contrast-passing color shown against the tertiary container
–Light: md.ref.palette.tertiary30
–Dark: md.ref.palette.tertiary90

Surface colors
-Surface: Surface color for components like cards, sheets, and menus
–Light: md.ref.palette.neutral98
–Dark: md.ref.palette.neutral6
-On surface: Text and icons shown against the surface color
–Light: md.ref.palette.neutral10
–Dark: md.ref.palette.neutral90
-Surface Variant: Alternate surface color, can be used for active states
–Light: md.ref.palette.neutral-variant90
–Dark: md.ref.palette.neutral-variant30
-On surface variant: For text and icons to indicate active or inactive component state
–Light: md.ref.palette.neutral-variant30
–Dark: md.ref.palette.neutral-variant80
-Surface Container Highest
–Light: md.ref.palette.neutral90
–Dark: md.ref.palette.neutral22
-Surface Container High
–Light: md.ref.palette.neutral92
–Dark: md.ref.palette.neutral17
-Surface Container
–Light: md.ref.palette.neutral94
–Dark: md.ref.palette.neutral12
-Surface Container Low
–Light: md.ref.palette.neutral96
–Dark: md.ref.palette.neutral10
-Surface Container Lowest
–Light: md.ref.palette.neutral100
–Dark: md.ref.palette.neutral4
-Inverse surface: Displays opposite color of the surrounding UI
–Light: md.ref.palette.neutral20
–Dark: md.ref.palette.neutral90
-Inverse on surface: Used for text and icons shown against the inverse surface color
–Light: md.ref.palette.neutral95
–Dark: md.ref.palette.neutral20
-Surface tint
–Light: md.ref.palette.primary40
–Dark: md.ref.palette.primary80

Outline colors
-Outline: Subtle color used for boundaries
–Light: md.ref.palette.neutral-variant50
–Dark: md.ref.palette.neutral-variant60
-Outline Variant: Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.
–Light: md.ref.palette.neutral-variant80
–Dark: md.ref.palette.neutral-variant30

Add-ons
Add-ons / Add-on primary colors
-Inverse primary: Displays opposite of the primary color
–Light: md.ref.palette.primary80
–Dark: md.ref.palette.primary40

Add-ons / Add-on surface colors
-Surface Bright
–Light: md.ref.palette.neutral98
–Dark: md.ref.palette.neutral24
-Surface Dim
–Light: md.ref.palette.neutral87
–Dark: md.ref.palette.neutral6
-Scrim: Used for scrims which help separate floating components from the background.
–Light: md.ref.palette.neutral0
–Dark: md.ref.palette.neutral0
-Shadow: For shadows applied to elevated components
–Light: md.ref.palette.neutral0
–Dark: md.ref.palette.neutral0

베이스라인을 사용한 디자인

새 디자인 파일에 디자인 키트 및 M3 베이스라인 색상 사용하기

1. Figma 파일을 만듭니다. Assets(자산) 패널에서 M3 디자인 키트를 활성화합니다.
2. 디자인 키트의 머티리얼 컴포넌트를 사용하여 화면과 레이아웃을 구성합니다.
3. 화면 오른쪽의 디자인 패널에서 요소의 색상 속성(color property)을 마우스로 가리키고 스타일 아이콘(점 4개)을 선택하여 사용자 정의 구성 요소 및 UI 요소에 M3 베이스라인 색상 역할을 적용합니다. 그러면 선택 대화 상자가 열립니다.
4. “M3″를 검색하여 베이스라인 색상 역할을 확인합니다.
5. 사용 사례 및 의도와 가장 일치하는 기준 색상 역할을 선택합니다(어떤 색상을 어디에 사용할지에 대한 자세한 내용은 색상 역할 참조).
6. 모든 사용자 정의 요소가 M3 기준 색상 역할을 사용할 때까지 반복합니다.

기존 파일에 베이스라인 색상 적용하기

먼저, M3 기준 색을 파일에 가져옵니다.

1. Figma 디자인 파일을 엽니다. Figma 도구 모음에서 리소스 버튼을 선택합니다.
2. 머티리얼 테마 빌더 플러그인을 찾아 실행을 선택합니다. 그러면 코어 색상 및 확장 색상을 포함한 기본 색 구성표가 표시된 플러그인 대화 상자가 열립니다.
3. 플러그인의 설정(대화상자 오른쪽 하단의 톱니바퀴 아이콘)을 열고 상태 레이어 생성 확인란을 선택합니다. 이렇게 하면 상호작용을 디자인하는 데 필요한 상태 레이어의 색상이 생성됩니다. 상태 레이어에 대해 자세히 알아보기
4. 설정 외부에서 탐색하기
5. With the Current Theme dropdown at the top of the dialog, select Baseline
6. Select the frames or components in your file and then hit Swap in the bottom right of the dialog. This will automatically update the colors for any M3 Design Kit components.

Then, update any remaining non-M3 color styles

1. Manually change any hex values or non-M3 color styles by selecting all and looking through the Selection colors in the Design panel on the right of the screen
2. Any colors that don’t start with “M3” need to be replaced with a corresponding baseline color
3. Hover on a non-M3 color row in the Design panel and select the Style icon (four dots). This opens a selection dialog.
4. Search for “M3” to see the baseline color roles
5. Select the baseline color role that most closely matches that color’s use case (see Color roles for more information on what color to use where) and select Use style to apply it to the selected objects
6. Repeat until all non-M3 colors in the file have been replaced with M3 baseline color roles

Need to make adjustments to the scheme? Check out Advanced customizations