Material UI for Figma

Material UI for Figma (Figma용 Material UI)

Material UI와 Figma 사이의 디자이너-개발자 협업을 강화하는 디자인 키트에 대해 알아봅니다. React 컴포넌트와 동일한 디자인을 Figma에서 쓸 수 있어요.

출처: 문서

본문

Material UI for Figma는 라이브러리의 React 컴포넌트를 Figma에서도 표현할 수 있게 해 주어, 디자이너와 개발자가 더 효율적으로 소통하고 반복 작업을 할 수 있게 도와줍니다. 이 디자인 키트에는 다음이 포함됩니다.

  • Material UI와 동일한 디자인의 컴포넌트
  • Material Design이 다루지 않는 추가 컴포넌트와 기능
  • props, 변수, 디자인 토큰 등 React 라이브러리와 공유되는 용어

커뮤니티 버전 vs 전체 버전

Material UI 디자인 키트는 커뮤니티(무료) 버전과 전체(유료) 버전으로 제공됩니다.

Community Full version
Components without customizations All All
Components with customizations 4 All
Figma variables - ✅

전체 버전 설치하기

.fig 파일이 들어 있는 .zip 아카이브를 먼저 압축 해제하세요. 그 다음 Figma의 가져오기 가이드를 따르거나, 팀 라이브러리에 추가하면 됩니다.

변경 로그 (Changelog)

새 디자인 키트 버전을 추적하려면 GitHub의 Releases 탭을 방문하세요.

테마 (Theme)

로컬 변수 (Local variables)

디자인 키트는 Figma의 로컬 변수를 사용해 Material UI 코드의 테마 구조와 비교할 수 있는 스타일 모음을 만듭니다. 아래 영상의 단계를 따라가면 사용 가능한 모든 변수를 확인할 수 있어요.

색상 커스터마이즈 (Customizing colors)

변수 패널을 사용해 색상을 커스터마이즈할 수 있어요. 아래 영상에서 확인해 보세요.

타이포그래피 커스터마이즈 (Customizing typography)

타이포그래피 커스터마이즈는 로컬 변수가 아니라 로컬 스타일을 사용합니다. 색상을 수정하는 것과 비슷한 느낌이에요. 아래 영상에서 확인해 보세요.

라이트/다크 모드 전환 (Switching between light and dark modes)

디자인 키트는 Figma의 로컬 변수를 사용해 변수 모드를 라이트와 다크 사이에서 전환할 수 있게 해 줍니다. 아래 영상에서 확인해 보세요.

컴포넌트 (Components)

메인 컴포넌트 편집 (Editing the main components)

Similayer 플러그인을 사용하면 어떤 속성을 공유하는 여러 컴포넌트를 한 번에 선택할 수 있어요.

Table 컴포넌트

새 컬럼 추가 (Adding new columns)

아래 영상은 셀을 행 컴포넌트에서 분리해 새 컬럼을 추가하는 방법을 보여줍니다. 이렇게 하면 콘텐츠를 자유롭게 움직일 수 있어요.

메인 컴포넌트에서 새 컬럼 추가 (Adding new columns in the main component)

Table과 Data Grid 컴포넌트는 기본적으로 제한된 수의 컬럼을 가지고 있습니다. 아래 영상은 메인 컴포넌트에서 셀을 직접 복사해 새 컬럼을 추가하는 방법을 보여줍니다.

코드 동기화 (Code sync, beta)

테마 토큰과 컴포넌트 커스터마이즈를 코드로 내보내려면 Figma용 Sync 플러그인을 사용할 수 있어요. 디자인 키트는 React 컴포넌트에 최대한 가깝게 만들어져서, 코드와의 통합이 자연스럽게 이뤄집니다.

Material UI 테마 구조에 대해 더 알아보려면 Theming과 Default theme viewer 페이지를 방문하세요.

새 디자인 키트 버전 사용하기

업데이트에서 우리는 일반적으로 파괴적인 변경을 만들지 않습니다—대신 새 콘텐츠를 추가하지요. 업데이트된 단일 컴포넌트를 교체해야 한다면 몇 가지 방법이 있습니다.

  1. 디자인 키트의 새 버전을 라이브러리로 추가하고 새 Figma 라이브러리 교체 기능을 사용합니다. 두 라이브러리의 컴포넌트 이름이 같아야 해요.
  2. 새 컴포넌트를 관찰하고 기존 프로젝트에 변경 사항을 다시 적용합니다. 여러 프로젝트를 업데이트해야 할 때 권장하는 방법이에요.
  3. 새 컴포넌트를 기존 프로젝트에 복사해 붙여 넣고 다른 임시 이름을 준 뒤, 토큰을 새 컴포넌트에 다시 연결합니다. Select Similar 플러그인을 쓰면 5분이면 끝나요. 그런 다음 옛 컴포넌트를 제거하고 새 컴포넌트 이름으로 업데이트하면 됩니다.

피드백과 버그 리포트

피드백이 있다면 우리에게 알려 주세요.

통합 (Integrations)

Anima

Anima를 사용하면 Figma 디자인을 Material UI 코드로 손쉽게 변환할 수 있어요. Anima는 Figma의 디자인 컴포넌트를 가장 관련성 높은 코드 API와 지능적으로 매칭해, 생성된 코드가 깔끔하고 재사용 가능하며 프로덕션에 바로 쓸 수 있게 보장합니다. Anima는 Figma와 VS Code를 모두 지원하므로, 자신에게 맞는 워크플로를 선택하면 됩니다.

자세한 내용은 Anima를 방문하세요.

Quest

Quest는 이 디자인 키트와의 네이티브 통합을 제공합니다. 키트로 컴포넌트를 디자인하면 Quest 플러그인을 사용해 Figma 디자인을 Material UI 코드로 변환할 수 있어요. 생성된 코드는 깔끔하고 프로덕션에 바로 쓸 수 있어야 합니다.

자세한 내용은 Quest 문서를 방문하세요.

더 알아보기 (Learn more)