무료 UI KIT로 디자인시스템 만들기
용어 정리 잠깐 먼저 할게요. 앞으로 제가 UI KIT 파일이라는 용어와 제품 디자인 파일이라는 용어를 종종 사용하게 될거에요. UI KIT 파일은 디자인 스타일, 컴포넌트들만 모아둔 파일이에요. 그리고 제품 디자인 작업 파일은 그 컴포넌트를 가지고 실제 출시할 웹사이트나 모바일 앱 화면 디자인 작업을 하는 파일이에요.
디자인 시스템 하면 이런 유아이 키트(UI KIT)가 떠오르실거에요. 이런 유아이 키트(UI KIT) 는 이미 잘 만들어져 있는 파일이 아주 많아요. 우리는 이 중에 하나를 선택해서 각자의 제품에 맞게, 조금씩 커스터마이징을 해나갈 거예요.
그러려면 우선 디자인 시스템 유아이 키트(UI KIT) 파일을 하나 선택해 주세요. 이 강의에서는 피그마를 쓸거라서, 웬만하면 피그마 파일을 사용해 주세요. 유아이 키트(UI KIT) 파일은 해당 파일 제작사 웹사이트에 가서 다운받으셔도 되고, 피그마 커뮤니티에서 검색해서 다운받으셔도 돼요. 웹사이트에서 찾아보는 방법은 어려운 게 없으니까 저는 피그마 커뮤니티에서 디자인 시스템 UI KIT 파일을 어떻게 검색하고 열 수 있는지에 대한 방법을 설명드릴게요.
● 피그마 계정이 없으신 분은 먼저 피그마 계정을 하나 만들어주세요. 계정을 만드셨으면 로그인 하시고 피그마 화면, 좌측 상단의 홈 아이콘을 클릭해주세요.
● 본인 이메일 주소 부분을 클릭하면 드롭다운이 하나 열리는데 거기서 커뮤니티를 클릭해 주세요.
● 커뮤니티 화면이 열리면 화면 중앙에 있는 검색창에서 아까 골랐던 디자인 시스템 이름을 입력하고 검색해 주세요.
● 저는 머티리얼 디자인 시스템을 사용하려고 해요. 검색창에 그대로 입력해볼게요.
● 사용할 파일을 클릭하고, 우측 상단에 있는 파란 버튼을 클릭해주세요. 그럼 해당 파일이 열리게 돼요.
이번에는 이 파일을 복제해줄거에요. 이 파일을 그대로 써도 되긴 하지만, 파일을 복제하는 방법을 아시긴 해야 하니까 지금 복제를 한 번 해볼게요.
● 피그마 화면 상단 부분을 봐주세요. 거기 중앙에 보면 파일 제목이 보일거에요. 만약 제목이 안보인다면 키보드의 Esc키를 눌러주세요. 파일 제목이 안 보이는건 피그마 화면에서 뭔가 클릭한 상태여서 그럴 수 있어요. 그럴 땐 Esc키를 눌러서 선택 해제를 해주시면 돼요.
● 제목이 보이게 되면, 제목의 우측에 있는 조그만 화살표를 클릭해주세요. 그러면 드롭다운이 열릴거에요. 드롭다운 메뉴들 중 Duplicate을 클릭해주세요. 그럼 해당 파일이 복제돼요.
● 그리고 복제본 제목을 수정하고 싶으시면 제목 부분을 클릭해서 수정해주시면 돼요.
다음 편에 계속 ...
연구하고 공부하고 정리하는 것을 좋아해요. 그래서 UXUI 분야가 잘 맞다고 생각하면서 일하고 있어요.
공통 관심사를 갖고 있는 사람들과 이야기를 나누는 것은 재미있으면서 역량을 키우는데에도 큰 도움이 되고 있어서 제가 좋아라하는 공부 방식이에요. 그러니 UXUI와 관련된 것이라면 무엇이든 편하게 물어봐주세요! =)
https://open.kakao.com/o/sKYOZ7Dc
�️ 온라인 강의
