Material UI Sync plugin 🧪

Sync는 디자인(design)에서 바로 코드로 Material UI 테마를 생성해주는 Figma 플러그인이에요.

:::error Material UI Sync 플러그인의 개발은 2024년에 중단되었어요. 앞으로 이 프로젝트에 업데이트가 있을 것으로 기대해서는 안 됩니다. :::

출처: 문서

본문

Introduction (소개)

Material UI Sync는 Material UI for Figma Design Kit에서 테마를 생성할 수 있게 해주는 Figma 플러그인이에요.

Customizing the Material UI Switch component in Figma with the Sync plugin running.

Sync는 Material UI for Figma Design Kit v5.16.0 이상과 함께 동작해요.

Running the plugin (플러그인 실행하기)

Material UI for Figma Design Kit의 완전한 최신 버전을 설치하지 않았다면, 대신 Community 버전을 사용해서 플러그인을 테스트할 수 있어요.

설치하고 Figma에서 열었다면, Community 탭의 Material UI Sync 플러그인 페이지로 이동해서 **Open in…**을 클릭하고 Material UI for Figma Design Kit을 선택해요.

Accessing Material UI Sync via the Resources menu in Figma.

Customizing design tokens (디자인 토큰 커스터마이징)

디자인 토큰은 Design Kit의 로컬 변수 컬렉션(local variable collections)에 정의되어 있으며, 색상 팔레트, 브레이크포인트, 모양(shape), 간격(spacing) 토큰을 포함해요. 타이포그래피와 그림자 관련 토큰은 로컬 스타일 컬렉션(local styles collection)에서 찾을 수 있어요.

Altering existing tokens (기존 토큰 수정하기)

Design Kit는 Material UI React 라이브러리의 기본 테마에 매핑되는 디자인 토큰이 가득 담겨 있어요.

기존 토큰을 커스터마이즈하려면, 아래 그림처럼 필터 아이콘을 클릭해서 로컬 변수 모달을 열어요. 컬렉션에 있는 변수들(팔레트, 브레이크포인트, 모양, 간격 등)을 원하는 대로 조정해요.

The Local variables menu in Figma, where all design tokens are stored and new ones can be added.

그런 다음 Material UI Sync 플러그인을 열고 Generate theme을 클릭해요.

The Generate theme button in the Material UI Sync plugin UI.

수정된 토큰이 포함된 테마가 생성되어 플러그인의 Theme 탭에 표시돼요.

The generated theme displayed in the Material UI Sync plugin UI.

Storybook 미리보기 탭으로 이동하면 생성된 테마와 커스터마이즈된 토큰을 미리 볼 수도 있어요.

The generated theme previewed in Storybook in the Material UI Sync plugin UI.

Adding new tokens (새 토큰 추가하기)

기존 로컬 변수 컬렉션에 새 변수를 추가하거나, 로컬 스타일 컬렉션에 새 elevation 및 typography 스타일을 추가해서, 기존 토큰 집합을 자신만의 것으로 확장할 수 있어요. 커스텀 토큰을 추가한 후에는 Regenerate theme을 클릭해서 이 토큰들을 테마에 포함시켜요.

The Regenerate button in the Connect plugin UI.

Customizing components (컴포넌트 커스터마이징)

:::warning 이 기능은 실험적이며 Button, Switch, Typography 컴포넌트로 제한돼요. :::

Sync 플러그인은 커스터마이즈된 컴포넌트에 대한 테마 스타일도 생성할 수 있어서, Figma 안에서 컴포넌트의 룩앤필을 완전히 바꾸고 자신만의 커스텀 디자인 시스템을 만들 수 있게 해줘요.

예를 들어, Switch 컴포넌트의 체크된 상태, 중간 크기, primary 색상을 커스터마이즈해서 iOS 룩앤필을 재현하는 방법은 다음과 같아요:

A specific variant of the Switch component selected in the Design Kit.

:::warning Sync가 커스텀 컴포넌트 스타일을 올바르게 추출하고 테마를 생성하려면, Design Kit의 컴포넌트 레이어 계층 구조와 레이어 이름이 변경되지 않은 상태로 유지되어야 해요. :::

Sync 플러그인은 커스터마이즈된 Switch에 대해 다음 테마 코드를 생성해요:

{
  components: {
    MuiSwitch: {
      styleOverrides: {
        root: {
          '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': {
            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))':
              {
                width: '40px',
                height: '21px',
                padding: '0',
                '& .MuiSwitch-switchBase': {
                  transform: 'translateX(19px) translateY(2px)',
                  padding: '0',
                  '& .MuiSwitch-thumb': {
                    width: '17px',
                    height: '17px',
                    background: '#FAFAFA',
                  },
                  '& + .MuiSwitch-track': {
                    width: '38px',
                    height: '21px',
                    background: 'var(--mui-palette-success-light)',
                    opacity: '1',
                  },
                },
              },
          },
        },
      },
    },
  },
}

생성된 테마는 위에서 정의한 특정 Switch 구성에 해당하는 클래스를 대상으로 하므로, 스타일은 Material UI 컴포넌트의 props와 상태가 커스터마이즈된 Figma 컴포넌트와 일치할 때만 적용돼요.

다른 상태를 커스터마이즈하려면, 다음 단계에 따라 Figma에서 각 변형(variant)에 원하는 디자인 변경을 적용해야 해요:

단일 "기본(base)" 변형을 커스터마이즈해요—예를 들어 체크된 상태, 중간 크기, primary 색상의 Switch 컴포넌트요.
이 변형을 복제하고, 커스터마이즈하려는 다음 변형을 대상으로 이름을 바꿔요—예를 들어 복제본의 이름을 Checked=True, Size=Medium, Color=Primary, State=Enabled에서 Checked=False, Size=Medium, Color=Primary, State=Enabled로 바꿔요.
같은 변형의 이전 버전을 삭제해요.
새 버전을 변형 그리드의 올바른 칸으로 이동해요.
변형의 하위 레이어들에 필요한 스타일 조정을 해요.

이 과정을 커스터마이즈하려는 각 변형마다 반복해요. 다음과 같은 모습이 될 수 있어요:

A fully customized Switch component in the Material UI Design Kit.

여기에서 Sync를 실행해 새 테마를 생성하면, 위 예제에서 다음과 같은 결과가 생성돼요:

{
  components: {
    MuiSwitch: {
      styleOverrides: {
        root: {
          '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': {
            width: '40px',
            height: '21px',
            padding: '0',
            '& .MuiSwitch-switchBase': {
              padding: '0',
              '& .MuiSwitch-thumb': {
                width: '17px',
                height: '17px',
                background: '#FAFAFA',
              },
              '& + .MuiSwitch-track': {
                width: '38px',
                height: '21px',
                borderRadius: '100px',
                opacity: '1',
              },
            },
            '&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(3px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: '#BDBDBD',
                },
              },
            },
            '&:not(:has(.Mui-checked)):has(.Mui-disabled):not(:has(.Mui-focusVisible))': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(3px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: 'rgba(229, 229, 229, 0.99)',
                },
              },
            },
            '&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):has(.Mui-focusVisible)': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(3px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  border: '1px solid #000',
                  background: '#BDBDBD',
                },
              },
            },
            '&:has(.Mui-checked):has(.Mui-disabled):not(:has(.Mui-focusVisible))': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(19px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: 'rgba(187, 231, 188, 0.99)',
                },
              },
            },
            '&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(3px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: '#616161',
                },
              },
            },
            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(19px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: 'var(--mui-palette-success-light)',
                },
              },
            },
            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(19px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  background: 'var(--mui-palette-success-dark)',
                },
              },
            },
            '&:has(.Mui-checked):not(:has(.Mui-disabled)):has(.Mui-focusVisible)': {
              '& .MuiSwitch-switchBase': {
                transform: 'translateX(19px) translateY(2px)',
                '& + .MuiSwitch-track': {
                  border: '1px solid #000',
                  background: 'var(--mui-palette-success-light)',
                },
              },
            },
          },
        },
      },
    },
  },
}

:::info 생성된 테마에는 특정 하위 클래스를 대상으로 하는 CSS has() 선택자가 포함될 수 있어요. 이 선택자는 예전에 브라우저 지원이 제한적이었기 때문에 문서의 다른 테마 관련 예제에서는 사용되지 않았어요. 지금은 모든 최신 브라우저가 지원해요. :::

Storybook 미리보기를 확인해서 컴포넌트의 Material UI 버전을 테스트할 수도 있어요.

A fully customized Switch component in Storybook.

Using the generated theme (생성된 테마 사용하기)

Sync로 생성된 테마를 코드베이스에 추가하는 방법의 예는 다음과 같아요:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  cssVariables: true,
  shape: {
    borderRadiusRound: 999,
  },
  components: {
    MuiSwitch: {
      styleOverrides: {
        root: {
          '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': {
            '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))':
              {
                width: '40px',
                height: '21px',
                padding: '0',
                '& .MuiSwitch-switchBase': {
                  transform: 'translateX(19px) translateY(2px)',
                  padding: '0',
                  '& .MuiSwitch-thumb': {
                    width: '17px',
                    height: '17px',
                    background: '#FAFAFA',
                  },
                  '& + .MuiSwitch-track': {
                    width: '38px',
                    height: '21px',
                    background: 'var(--mui-palette-success-light)',
                    borderRadius: 'var(--mui-shape-borderRadiusRound)',
                    opacity: '1',
                  },
                },
              },
          },
        },
      },
    },
  },
});

export default function MyApp(props) {
  const { Component, pageProps } = props;

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Feedback and bug reports (피드백과 버그 리포트)

피드백이 있다면 의견을 들려주세요.

더 알아보기 (Learn more)

Material UI for Figma Design Kit — Figma에서 사용하는 디자인 키트
Material UI Sync 플러그인 — Figma 커뮤니티 플러그인 페이지