📅 날짜 : 5/27
😎 강사님: 1기 김지은님
🔗 강의시간 : 120분
세션 후기
오늘의 집과 배민 모바일을 클론하며, 기본 사용법 부터 Tip들을 빠르게 쏟아낸 세션이었다.
8px 그리드 법칙과 이를 활용한 디자인 방식을 적용하는 것이 인상적이었고,
데브코스내의 프로젝트 뿐만 아니라, 실제 현업에서 디자이너들과의 협업 상황에서도 도움이 될 Tip들을 많이 얻어가는 세션이었다.
- Figma 홈페이지 (링크)
- 오늘의 집 클론 실습 (링크)
1. 레이아웃 관련
TipFrame으로 가장 먼저 화면을 선택하고, 내부 요소를 추가하여 디자인 진행- Frame → DeskTop → Imac 선택
TipDeskTop의 경우 Grid를 주로 12개로 잡고, Mobile의 경우 Grid를 주로 6개로 잡는다.- Layout grid 에서 columns을 선택하여 설정하기
사진
2. Design 관련 Tip
Tip8px 그리드 법칙- 모든 요소들을 8px을 기준으로 잡는 것
- 8은 2로나누어도 4로나누어도 짝수이기 때문에, 소수점으로 끊어지지 않고 px을 유지할 수 있기 때문이다.
Tip하나의 같은 섹션에서는 같은 radius를 사용해야한다
Tip뒷 배경을 주로 회색으로 하고, 컴포넌트를 하얀색으로 간다면 실패하지 않는 조합을 보여줄 수 있다.
Tip좋은 디자인을 많이 보는 것이 중요하다- Behance
- Awwwards
- dribble
- 검색어
- social media UI design 등으로 키워드 검색
3. Figma 관련 Tip
기본 단축키
Tip자주 사용하는 것들은 단축키를 활용하여 사용- R : Rectangle
- L : Line
- T : Text
- I : 스포이드로 색상 뽑기
tipoption 누르면서 드래그하면 복사하면서 위치 지정 가능
Tip이모티콘은 플랫티콘에서 주로 사용 (Link)
Tipcolor 에서 변수처럼 색상을 설정할 수 있다- point, font, componentColor, alertColor 등
Tip요소안의 텍스트, 요소안의 요소를 정렬하고 싶을 때에는, 드래그를 통해 같이 선택한 이후에 정렬 버튼을 눌러 한 번에 가능- Header 안의 logo, menu, searchBar 등 한 번에 수직정렬