서론
어제 배웠던 'Component'와 'Veriants' 기능을 효과적으로 사용하기 위해 'Figma'의 'Design Library' 기능과 Design System을 알아보고 활용하여 화면 Clone Design을 진행해보는 시간을 가졌다.
'Figma'의 'Design Library'
'Figma'에는 다양한 'Component' 자료들이 저장되어 있는데 이 자료들을 효율적으로 활용하기 위해서 'Design Library' 기능을 사용한다.
1. Main 화면 좌측하단의 'Explore Community'접속
2. 원하는 'Design System' 자료파일 선택
3. 'Use template' 선택
이후 Panel의 좌측 상단에서 'Library' 기능으로 저장된 파일을 확인 가능하다.
이번 수업에서는 'CLASS101, OPS'를 활용하였는데 'Component' 살펴보기에서 Design System에 대한 설명과 Component에 대한 설명이 포함되어 있었다.
Design System
앞서 말한 'CLASS101, OPS'를 통해 Design System을 심도있게 알아보고 직접 활용하여 'CLASS101 Main Page'를 Colne Design 할 수 있었다.
CLASS101
Design System을 활용하기 위해서는 Library에 Component가 포함된 파일을 저장해두어야 하고 저장할 경우 'Assets'에 Design System 내의 Component 활용이 가능한 것을 볼 수 있다.
수업은 Navigation, Banner, Carousel을 제작하는 시간을 가졌다.
> Navigation
'Assets'에서 Navigation Component 불러오고 위치 잡아주기
※ 여기서 Header 부분들의 명칭을 헷갈리지 않게 다시 정리했다.
-Header : WEB 기준으로 머리부분 (상위개념)
-Navigation : BreadCrumb 부분을 말하며 내가 접속했던 일련의 과정들을 표시해주는 영역 (여기서 이전 단계를 누르면 이전 Page가 나옴)
-GNB(Global Navigation Bar) : 상단에 Menu를 구성하는 등 상단에 위치 되어 있는 UI
아래는 여러요소의 명칭을 이해하기 쉽게 정리해둔 곳으로 참고용으로 보면 좋을 듯 하다.
'WEB'용어 정리
> Banner
- 'Assets'에서 Button불러오기
- Banner 영역을 'Frame'이나 'Rectangle' 도구로 잡아주기
- Banner 포함 Image를 다 제작했으면 각 요소 구분선택 후 'Auto Layout'해주기 ('Auto Layout' 내 하나의 객체 간격을 조절해주고 싶은 세부 'Auto Layout'만들기)
- 간격 조절
※ 'Auto Layout'으로 구조를 잘 짜둬야 작업하기가 편하며 'Group'보다 'Auto Layout'사용을 권장 (레이어 확인을 항상 잘하기)
> Carousel
- 'Assets'에서 CoverCard 가져오기
- 원하는 옵션으로 변경 ('Veriants')
※ 'Component'의 부분 수정을 원하는 경우 'Detatch instance(Ctrl+Alt+B)'를 통해 수정이 가능하다. ('Component' 우클릭-Detatch instance 선택으로도 가능)
알아두기
- 'Bottom' 최하단에 고정되어 있는 영역을 'Fixed Bottom'이라고 함
- 'Loading' 중인 화면을 표시하는 영역을 'Skeleton'이라고 함
- 'Variant'가 제작되어 있는 곳에 'Property'로 항목명 수정가능 (
'Property명 = 항목명')- 'Component' 내에 부분수정을 한 내용을 상시사용하고 싶을 경우 'Component' 우클릭 후 'Go to main component'선택
부분수정 후 'Library'에서 'Publish' 선택
변경사항 확인 후 'Publish' 선택- 배경이 'Rectangle'로 되어있고 항목을 'Auto Layout' 설정한 경우
'Rectangle' 우클릭 후 'Frame selection'선택 또는 Ctrl+Alt+G
'Frame'으로 변경해주기
(처음부터 배경을 'Frame'으로 제작하는 게 편함)- 'Image'를 'Circle' 안에 구성되도록 하고 싶은 경우
'Circle' 제작 → Flugin에 Unplash → 'Circle'을 Image layer 뒤에 두기 → 우측 Panel에 Mask 선택- 'Component'를 불러왔을 때 Typography에서 Font 옆에 'A?'가 떠있을 경우
현재 보유중이 Font가 아닌 Font가 파일 내에 있다는 뜻
(Font가 깨질 우려가 있으므로 바꾸어줘야 함)
Clone Design 해보기
수업중에 배우고 실습한 내용을 토대로 나머지 'CLASS101' Main Page Clone Design을 완성해보는 시간을 가졌다.
여기서 'CLASS101, OPS' Design System을 많이 활용하게 되었다.
▼ 아래는 내가 'Figma'를 활용해 Clone Design한 'CLASS101' Main Page이다.
<'CLASS101' Clone Design>
확실히 점점 기능을 배워나가며 수정하는 방법과 레이어 구성에 관한내용에 대해 추가적으로 알 수 있어서 UX/UI 디자인에 한 발 더 나아간 느낌이다. 초반보다 'Figma' 기능을 사용하는 것도 익숙해지고 제작시간도 줄여나가니 뿌듯하다. 아직 갈 길이 멀지만 계단식으로 기초를 단단하게 해서 모든 기능을 능숙하게 사용하고 싶다.
