📅 2026.05.12(화) - 19일차
디자인 생태계의 중심: Figma Community와 UI Kits
- 슬롯(Slot) 시스템 활용, 유연한 컴포넌트 구조로 시스템적 조립 구축 ➔ 복잡함 down 유연함 up. Slot 기능을 통해 수백 개의 Variant를 줄이고, React의 children 개념을 디자인에 도입하여 확장 가능한 컴포넌트 아키텍처 완성. ➔ 프로덕트의 생산성 완성 & 지속 가능한 디자인 시스템 설계
- 전 세계 디자이너의 지식과 도구가 순환되는 Figma Community 활용 ➔ 업계 표준 습득
- UI Kit은 디자인의 일관성을 유지하는 도구함. 색상, 서체, 컴포넌트가 코드와 1:1로 대응 ➔ 디자이너와 개발자 협업 언어
01. Figma Community: 학습과 생산성의 허브
단순한 리소스 저장소를 넘어 Figma 생태계가 학습·표준·실험을 순환시키는 공간.
- 학습 공간: 실무 수준의 디자인 시스템과 실제 기업 UI 패턴을 파일 단위로 직접 해부하며 학습 가능.
- 브랜딩 공간: 개인과 기업이 공식 리소스를 배포하며 "무엇을 공유했는가"로 실력 증명 가능 ➔ 내가 제작해 공유한 리소스가 다수에게 긍정적인 반응을 받으면 좋은 포트폴리오 재료가 될 수 있음!
- UX/UI 디자이너로서 특히 많이 보면 좋은 공간: Figma > Community > UI Kits https://www.figma.com/files/team/1419906671131168662/resources/community/ui-kits?fuid=1620773440743051278&resource_type=files&editor_type=figma
02. KRDS - 대한민국정부의 디지털 서비스 공식 디자인 시스템
https://www.krds.go.kr/html/site/index.html
03. MUI (Material UI): React 생태계의 강자
Google의 가이드라인에서 시작해 독자적인 디자인 시스템 플랫폼으로 진화한 UI 프레임워크.
MUI 사이트 들어가서 각 components의 이름에 익숙해지는 것이 좋음!
https://mui.com/material-ui/all-components/
 |
 |
 |
 |
 |
 |
 |
04. 피그마 Collection 기능 (이 부분 개념은 이해했는데, 실습 부분은 어려웠음)
피그마의 Variables(변수) 시스템 내에 있는 Collection(컬렉션) 기능:
디자인에 사용되는 다양한 값(색상, 숫자, 문자열, 불리언)을 체계적으로 분류하고 관리하는 가장 높은 수준의 저장소.
컬렉션은 여러 개의 '테마 폴더' 또는 '파일철'과 같음
1) 컬렉션의 핵심 개념
컬렉션은 단순히 변수를 모아두는 곳을 넘어, 디자인 시스템의 복잡도를 제어하는 역할을 합니다.
- 독립된 공간: 각 컬렉션은 서로 완전히 분리되어 있습니다. (예: 'Brand' 컬렉션과 'UI' 컬렉션)
- 모드(Modes) 설정: 컬렉션 단위로 '라이트 모드/다크 모드' 또는 '한국어/영어' 같은 환경을 설정하여 한 번에 디자인을 전환할 수 있습니다.
- 권한 및 게시: 팀 라이브러리에 특정 컬렉션만 선택해서 게시(Publish)할 수 있습니다.
2) 컬렉션 사용 방법
생성 및 이동
- 캔버스의 빈 공간을 클릭한 상태에서 우측 패널의 Local variables 아이콘을 클릭합니다.
- 열린 창의 좌측 상단 메뉴 버튼(컬렉션 이름 표시 부분)을 클릭합니다.
- Create collection을 선택하여 새 컬렉션을 만듭니다.
모드(Mode) 추가
컬렉션을 사용하면 우측 상단의 '+' 버튼을 통해 모드를 추가할 수 있습니다. 예를 들어 'Color' 컬렉션 안에 'Light' 모드와 'Dark' 모드 열을 만들고 각각 다른 값을 입력하면, 레이어의 모드 변경만으로 전체 색상이 바뀝니다.
잘 모르겠어서 gemini에게 "피그마에서 스타일 만들기 (타이포그라피, 컬러, 그라데이션) & 베리어블 만들기 (컬러, 문자, 숫자, 논리) 이거 실습하려고 해. 방법 알려줘." 라고 요청해 봄
[Figma Styles & Variables Mastery]
https://gemini.google.com/share/b295179ae5a5
Gemini - 피그마 컬렉션 기능 설명
Gemini로 생성됨
gemini.google.com
[실습] Figma Community 활용 (다양한 community 자료 활용, 예시 아래 3)
Figma Community에서 Design Kits 검색 ➔ 필요한 부분 검색해와서 수정 ➔ figma make로 가서 앱 화면 만들어 달라고 요청 ➔ 'material ui 기본으로 figma component를 대신해서 만들어줘' 라고 추가 요청
Figma Community에서 Design Kits 검색
- Material 3 Design Kits
- figma.com/files/team/1419906671131168662/resources/community/file/1035203688168086460?fuid=1620773440743051278&q_id=915c2e89-548c-4bc4-a342-159e9a034147
- MUI for Figma
- Wanted Design System
Figma make로 가져가서, 앱 만들어달라고 요청
- 그런데, 나는 wanted design system도 활용했기 때문에 이 경우에는 'material ui 기본으로 figma component를 대신해서 만들어줘' 라고 추가 요청 필요
- 다른 스크린 주면서 '칵테일을 클릭하면 이 화면이 나오도록 해줘. overlay 모달 스크린으로. 밑에서부터 drawer로 나왔다가 들어갈 수 있게.' 라고 요청
- 가이드라인에 스크롤 바 만들지 말라고 요청
 |
 |