[Day 13-14] Basic Figma

📍목차
1. 피그마 인터페이스
2. 단축키를 활용한 기능 사용
3. 컨포넌트

---

1.  인터페이스

 

4가지

 

 

• 디자인 속성은 오른쪽 디자인 탭에서 설정
• 생성한 레이어들은 왼쪽 탭에서 확인
• 툴바에 있는 툴들을 사용하여 선, 도형, 프레임 등을 작업

 

💡 좋은 UI ?
1. 사용자가 헷갈리지 않고 쉽게 사용가능
2. 원하는 정보를 빠르게 찾을 수 있음
3. 클릭이나 조작이 직관적이고 편리함

ex. 네비게이션, 입력, 버튼, 카드, 알림
** 일관성 / 직관성 / 접근성 / 피드백 제공이 중요하다

 

---

2. 단축키와 기능사용

▶ 단축키

우클릭 → use mask : 도형이나 글씨 안에 이미지 넣기

cmd + (+/-): 확대/축소

option + 드래그: 복제

cmd + 요소 선택: 가장 안쪽의 개체 선택

option + 개체에 마우스 올리기: 간격 확인

Shift + R: 자

option + 한쪽 모서리 드래그: 해당 모서리만 둥글게

Shift + S: 섹션

F / A : 프레임 

cmd + G : 그룹화

cmd + Shift + ? : 단축키 설명

단축키	기능
우클릭 → use mask	도형이나 글씨 안에 이미지 넣기
cmd + (+/-)	확대/축소
option + 드래그	복제
cmd + 요소 선택	가장 안쪽의 개체 선택
option + 개체에 마우스 올리기	간격 확인
Shift + R	자
option + 한쪽 모서리 드래그	해당 모서리만 둥글게
Shift + S	섹션
F / A	프레임
cmd + G	그룹화
cmd + Shift + ?	단축키 설명
cmd + d	복제
Shift + A	오토레이아웃

** 오토레이아웃이란?

상하좌우에 패딩값을 줘서 여러 요소들을 한 묶음으로 만들어 그 속에서 일정한 간격을 유지하도록 도와주는 기능

(디바이스 크기가 바뀌거나 텍스트가 길어져도, 레이아웃이 유지되도록 도와준다.)

오토레이아웃

 

 

▶ 섹션 옆 </> 표시 = 개발에 들어가도 된다는 표시 (ready to dev)

 

🚨 오토레이아웃을 사용하여 디자인 할 때, 덩어리를 어떻게 묶을지 알아야한다. 

'오토레이아웃 → 크기 조정 → 컨테이너 채우기 → 위치 정렬'

 

 

디자인 탭의 속성들 사용 실습

 

오토레이아웃 활용한 버튼, 유듀브 뮤직 클론

---

3. 컨포넌트

재사용이 가능한 각각 독립된 모듈

종류	설명
App bar: Top	상단에 위치하고 '로고, 메뉴, 검색, 뒤로가기' 등 포함됨
Bottom navigation	홈, 마이페이지, 카테고리
Search bar	검색창
Tab bar	관련있고 동일한 계층구조의 컨텐츠 묶음
Check box	동시에 여러개 선택할 때 사용
Radio button	하나를 선택 또는 취소하기 위해 사용
Toggle button / Switch	두가지 모드 변경할 때 사용하는 토글 on / off 를 설정할 때 사용하는 스위치
Tool tip	사용자가 특정 메뉴에 마우스를 올리면 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공
Card	단일 주제에 대한 컨텐츠, 작업 표시
Banners	중요하고 간결한 메시지 표시, 사용자가 선택해야 사라지는 (직접 작업이 있어야하는) 것
Buttons	사용자가 취할 수 있는 작업 전달
Sliders	막대를 따라 범위값 선택
Snackbars	앱이 수행했거나 수행할 프로세스를 하단에서 알려줌 사용자 경험을 방해하지 않으며 사용자 입력 없이 자동으로 사라짐

**스낵바는 토스트바와 혼용해서 사용하기도 한다. (그냥 사라지는 공통점이 있다)

 

---

실습 1. 나만의 비전보드 만들기

 

경제적 여유, 여유로운 일상, 간단한 식사, 포근한 집, 본인의 일

 

실습 2. 앱 서비스 클론 (배달의 민족)

 

야식이 땡긴다는 이유로 선정한 배민 ㅎ

 

실습 3. 컴포넌트, 디자인 가이드 리서치 후 레퍼런스 정리

 

 

실습 4. 수업시간에 실습한 유튜브 뮤직 클론 = 오토레이아웃을 사용하여 혼자 다시 해보기

 

왼쪽은 이미지 / 오른쪽이 클론 실습 결과물

 

---

반응형 만들기