프론트엔드를 공부하고 있지만,,, 프론트엔드 개발에 뗄 수 없는 UIUX,,,
디자이너 없이 프로젝트를 하려면 figma를 다룰 줄 알아야 된다고 생각해서 가볍게 figma 기본 강의를 들었다. 잊어버리기 전에 노트정리를 해보려고 한다.

피그마 기본 기능

1. 핸드툴 사용
   1) 단축키: H
   2) 스페이스바를 누르는 동안 핸드툴 사용 가능

2. 화면 조정
   1) 단축키: cmd + scroll
   2) 키보드의 +, - 버튼
   3) 패드는 두 손가락을 이용해 확대, 축소

3. 스포이드
   1) 단축키: I

4. 도형 안에 이미지 넣기
   1) unsplash에서 사진 복사 -> 도형 선택 후 붙여넣기
   2) 이미지 조절: fill -> crop -> 이미지 조절 (완성: enter)

5. 간격 조절
   1) option을 누른 채 요소에 마우스를 대면 간격 px이 나타남.
   2) 그 상태에서 방향키로 간격 조절 가능. shift를 누르면 10px 조절 가능

6. 복제
   1) option을 누르고 드래그하면 복붙
   2) 복제 후 80px 간격 만들기 -> cmd + d 하면 같은 간격으로 복제

7. 레이어 순서 변경
   1) cmd + [ / cmd ]
   2) [, ] 로 맨 앞, 맨 뒤 이동 가능

8. 그룹화
   1) 요소 선택 후 cmd + G
   2) 더블클릭해서 그룹 이름 바꾸기
   3) 그룹해제: cmd + shift + G

9. 프레임
   1) 프레임 설정: option + cmd + G
   2) clip content 선택 -> 프레임 바깥으로 나가는 부분 안 보이게

10. 안내선
    1) 룰러 활성화, 비활성화: shift + R
    2) 원하는 폭, 높이 사각형 만들고 안내선 맞추기

UI 디자인

1. 일관성
   1) 색, 폰트에 하나의 규칙을 적용하기
   2) 안내선을 통해 간격을 일정하게 만들기
   3) input 내의 텍스트를 세로 중앙정렬, 왼쪽 정렬, 왼쪽에서 16px 간격을 띄우면 깔끔
   4) button 내의 텍스트는 위아래 중앙정렬
2. 위계
   1) 비슷한 요소끼리 묶기 (거리감을 주거나 박스로 묶기)
   2) 좌측 상단에 위치한 것- 중요도 큼
   3) 요소의 크기가 크거나, 텍스트의 크기가 크거나, 배경과의 대비감이 클수록 시각적 무게 감이 커진다.
3. 예시 (로그인 페이지)
   1) title은 크기 키우고, bold, 중앙정렬 (중요도 큼)
   2) 로그인 / 간편로그인은 구분선을 통해서 구분
   3) 덜 중요한 내용은 크기 줄이고 색깔 약하게
   4) 중요한 것 (버튼)은 배경과 글씨 대비감 크게

• 여백은 4 또는 8의 배수로 두는 것이 좋다.

피그마 핵심 기능

1. 스타일 만들기
   1) 색 클릭 -> fill 점 4개 클릭 -> styles
2. 셀렉션 컬러
   1) 목적: 같은 색을 가진 모든 요소들을 한 번에 수정하고 싶을 때
   2) 전체요소 드래그 하면 오른쪽 아래에 selection color가 나온다.
3. 컴포넌트
   1) 단축키: cmd + option + k
   2) 컴포넌트를 복제해서 만들면 인스턴스가 된다. 컴포넌트의 색이 변하면 인스턴스도 따라 변함
   3) 인스턴스 덮어씌우기 기능: 덮어씌운 요소만큼은 컴포넌트의 변화를 따라가지 않는다.
   4) 오른쪽 컴포넌트 속성에서 컴포넌트와의 연결을 끊을수도 있고 지금까지 변경 사항을 초 기화할 수 있다.
4. 네스팅
   1) 인스턴스 안에서 아이콘을 바꾸기
   2) 각각의 아이콘을 컴포넌트로 넣고, 기존의 아이콘 자리에 다른 인스턴스를 넣기
5. 스마트 셀렉션
   1) 각 요소의 간격이 일정할 때 순서, 길이 바꾸기
   2) 일정한 간격으로 만들기 -> 요소 드리그 후 오른쪽 아래 파란색 네모 클릭
   3) 핑크색 동그라미를 클릭하여 드래그하면 간격 유지, 순서만 바뀐다.
   4) 핑크색 선을 클릭하여 드래하면 간격이 조정된다.
6. 오토 레이아웃
   1) 단축키: shift + A
   2) 요소들의 간격 조절, 왼쪽, 오른쪽 정렬 등 가능, 패딩 조절 가능
   3) 내부 요소들의 크기가 바뀌면 오토 레이아웃의 크기도 자동으로 변경된다.
   4) fixed, fill 설정을 통해 크기를 바꿀지, 고정시킬지 정할 수 있다.
7. 컨스트레인트
   1) 특정부분 (top, bottom, left, rigth)을 기준으로 고정된 여백 주기
   2) center: 항상 가운데에 위치하기
   3) scale: 프레임의 크기에 비례해서 늘어나기
8. 플러그인
   1) 전체적인 느낌을 확인하고자 이미지, 텍스트 등을 임시로 채워넣을 때
   2) 상단의 네모네모한 아이콘을 클릭하고 plugins 클릭
   3) 이미지를 랜덤으로 선택하고 싶다면 -> unsplash 검색 -> presets 선택
   4) 텍스트를 랜덤으로 선택하고 싶다면 -> contetn reel 검색
   5) cmd + p 단축키로 사용한 적 있는 플러그인을 빠르게 불러올 수 있음
9. 유용한 피그마 커뮤니티
   1) 아이콘

• Feather Icons (정제된 톤의 아이콘 모음)
• Material Design Icons (정제된 톤의 아이콘 모음)
• iconify
  2) 이미지 / 텍스트
• Content Reel (랜덤 텍스트/이미지 생성)
• Unsplash (퀄리티 있는 무료 이미지 + 랜덤 배치)
• Blush (플랫 한 커스텀 이미지 생성기)
  3) 기타
• Remove.bg (배경 제거)
• Blobs (랜덤 한 형태의 모양 생성)
• Stark (대비 체크)
• Breakpoints (반응형 디자인 시뮬레이터)

10. 이팩트 (그림자 효과)
    1) x, y값을 0으로 주고 그림자 색을 보라색으로 하면 보라색으로 빛나는 느낌을 줄 수 있다.
    2) inner blur: 내부의 입체감을 주는 효과
    3) layer blur: 요소 자체에 블러 처리
    4) background blur: 불투명한 유리 효과
    사각형을 만들고 background blur 효과 -> 투명도를 낮춰부면 사각형에 겹치는 부분 블러처리
    5) 테두리 그라디언트: stroke를 이용해서 (유리 모서리가 빛에 반사된 느낌은 위쪽 모서 리를 더 밝게, 아래쪽 모서리를 더 어둡게 처리)
11. 프로토타입
    1) 목적: 완성된 디자인을 미리보기할 수 있음
    2) 왼쪽의 프로토타입 클릭 -> 각 요소를 선택하고 선으로 연결하기
    3) 단축키
    (1) R: 처음부터 다시 보기
    (2) Z: 여러 뷰 모드로 보기
    (3) cmd + \: UI 숨기고 보기
    4) 미리보기 화면은 실시간으로 업데이트 되기 때문에 옆에 띄워놓고 작업하면 편하다
    5) 프로토타입 공유하기: 프로토타입을 보여주는 페이지에서 share prototype 클릭 -> copy link
    6) 스크롤 구현
    (1) 원하는 화면 높이로 맞추기 (design 탭에서 높이 800px 설정)
    (2) prototype에서 vertical scrooll 선택
    (3) 네이게이션 바 fixed 설정