[UXUI 사전캠프_1일] 피그마 기초 완전 정복 1~3주차 복습

1️⃣주차

• 피그마란?
  • UI/UX 디자인 제작(웹, 앱, 소프트웨어 등)
  • 와이어프레임 및 목업 생성
  • 디자이너와 개발자 간 협업 툴
  • 프로토타입으로 사용자 흐름 테스트

 

• UXUI 디자인의 규칙
  • 8포인트 그리드(8-point grid)
   

8포인트 그리드(8-point grid)_UI의 간격, 여백, 크기 등을 8의 배수 또는 4, 2배수로 나누어 사용하는 것

 

• 1주차 과제

도형툴 패스파인더(Pathfinder), 평탄화(Flatten) 툴, 곡률(Radius)을 사용해 작업한 모습

---

2️⃣주차

• 2주차 과제

각 컨테이너에 들어간 요소들을 오토레이아웃으로 묶어 리사이징 값을 바꾸거나, 프레임 상태에서 컨스트레인 값을 변경한 것. Parent Container을 움직이면 자식요소의 크기 값이 전부 달라진다.

(Auto Layout_Fill, Hug, Fixed & Constraints_T+B, Scale)

 

---

3️⃣주차

• 작업의 체계확립과 편의를 위한 스타일 지정

Styler 플러그인을 사용하여 텍스트 및 컬러 스타일을 지정함

• 텍스트 스타일 지정을 위해  Title 항목에 파운데이션 값 SemiBold, 14~18px, 행간 150%를 사용하였다.
• 컬러 스타일 지정을 위해 따로 생각한 색상을 기준으로 HSL에서 lightness 값을 10 단위로 조정하여 등록했다.

 

• UI 만들기 실습

 

 

 

 

 

 

가장 기본적인 Button, Check Box를 만든 형태이다.

1.  미디움 버튼 컴포넌트의 파운데이션 값은 Title/18px, Fill (FFFFFF), Padding (W_24, H_16), 개체 사이 값_8, Tertiary/400, Radius_16이다.
2. 체크박스 컴포넌트의 파운데이션 값은 Fill (FFFFFF), Layout (W, H_16), Primary/400, Constraints_Center, Radius_4, Layout (W, H_20), Radius_4, (W, H_24) 이다.
3. 라디오 컴포넌트의 파운데이션 값은 Fill (FFFFFF), Layout (W, H_12), Radius_6, Constraints_Center, Primary/400, Radius_4, Layout (W, H_20), Radius_10, (W, H_24) 이다.

 

---

 

❓나의 부족한 점은?

❗시간을 효율적으로 사용함에 있어 부족한 부분이 있다. ➡ 오전 일과 스크럼 시간에 확실한 계획을 세우자!!

 

❗컴포넌트 하나 만드는데 있어서 속도가 느리다.➡ 반복적으로 복습하여 사용감을 익히도록하자!!