1-2 [Figma]

[ 💻 코드스테이츠 x 경남abclab/Section 3 ]

1-2 [Figma]

2023년 11월 28일 15시 08분 51초에 업로드 된 글입니다.

작성자: 만두33

# 단축키

기본 단축키

복사하기 : Command + C
붙여넣기 : Command + V
잘라내기 : Command + X
복제하기 : Command + D 혹은 Option 누른 상태로 드래그
여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
그룹으로 묶기 : Command + G
프레임으로 묶기 : Command + Option + G
그룹, 프레임 해제하기 : Command + Shift + G
간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

오토 레이아웃

오토 레이아웃 추가하기
- 오토 레이아웃 적용할 요소 선택 → Shift + A
- 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
오토 레이아웃 제거하기 : Shift + Option + A

컴포넌트

단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭
컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택
컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
컴포넌트의 인스턴스 생성
- 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
- 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다 놓기

Figma는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인하실 수 있습니다.

Command 키가 아니라 Control 키입니다. 헷갈릴 수 있으니 주의하세요!

# 과제1. Figma 컴포넌트 구현

Bare Minimum Requirements

GNB
Modal
Toggle
Tab
Accordion

Advanced Challenge

Drop Down
Auto Complete

# GNB

GNB (Global Navigation Bar)

요구사항

각 항목을 클릭했을 때 적절한 페이지가 표시되어야 합니다.
어떤 항목이 선택되어 있는지 알 수 있어야 합니다.
어느 페이지에 있든 항상 동일한 위치에 있어야 합니다.

	1. 텍스트 상자 만들기 텍스트 상자 두개를 만든다. Shift + a 로 오토 레이아웃 설정하기 아래 상자는 마우스를 텍스트에 올렸을때, 위 상자는 마우스를 텍스트에 올리지 않았을때 (기본값) * 아래상자 효과 상자 선택 후 - 우측 디자인탭 - stroke - outside/ 굵기:3 / 아랫부분만 선택
	2. Restore Component 적용하기 두 상자를 드래그 하고 Design 탭에서 Restore Component 누른다.
	3. Property 적용하기 Restore Component하면 보라색 점선 상자가 외곽에 생긴다. (중요) 윗 상자 선택후(상자 겉 보라색 실선이 선택된상태) Design- Properties- Values 아래에 윗상자 이름을 Frame1에서 off로 아랫상자 이름은 Frame2에서 on으로 바꿔준다. Frame1 글자를 더블 클릭하면 이름 변경 가능
	4. Interactions 효과주기 컴포넌트1을 GNB로 이름변경했다. GNB 상자안의 윗 상자 선택 후 Prototype탭에 가서 Interactions - on click - change to -property1 켜주기 GNB 상자안의 아랫 상자 선택 후 Prototype탭에 가서 Interactions - on click - change to -property1 꺼주기
	여기까지 작업한 모습 텍스트 상자 사이에 줄이 생겼다! 작업한 요소들은 좌측 Assets탭에 저장 되어있다.

	좌측 assets탭에 가서 GNB를 누르면 기본형인 off가 하나 생긴다. Shift+option으로 6개를 이어 붙이고 각자 텍스트를 수정 해준 뒤, 하나의 컴포넌트로 묶었다. 컴포넌트로 묶으면 어셋에 자동으로 등록이 된다.
	6줄 만들어준 후, 한줄마다 컴포넌트 설정 해준다. 그리고 6개를 동시에 드래그하고 디자인 탭에 Combine as variants 눌러준다. 그리고 상태이름은 모달 mod / 토글 tog/ 탭 tab/ 아코디언 acc/ 드롭다운 drop/ 자동완성 auto
	한줄 한줄 설정을 바꿔준다. 모달 텍스트 상자만 눌러서 off 하고 원하는 텍스트 상자 눌러서 on 해준다.
	여기까지 하고 컴포넌트 (총 6줄) 한줄한줄 눌러보면 Current variant 부분이 다 다르게 표시된다. mod/ tog/ tab/ acc/ drop/ auto 컴포넌트 6줄 합친것 =Component7 이름을 GNB_all 로 변경
	그다음 좌측상단 프레임 버튼을 누른다. 적당한 크기의 프레임을 생성 해 준 뒤, assets에 저장된 GNB_all을 눌러서 프레임 안에 넣어준다. 6개의 상태가 들어가는 6개의 프레임을 만든다. Frame1을 복사해서 만들어준다. Frame2의 상태는 토글이 선택 된 상태여야 한다. 그래서 선택후 design에 가서 GNB_all에서 Property1을 tog로 변경한다.
	6개 다 Property1을 각각 변경해준 상태 각 탭을 선택할때마다 선택된 탭은 밑줄이 생긴다는 의미이다.
	이제 화면 이동 효과를 줄 차례 화면을 열였을때 기본 페이지는 Frame1이다. 여기서 각 탭을 누르면 각 화면으로 이동해야하고, 다른 화면에 있을때에도 탭을 누르면 해당 화면으로 이동해야한다. 사진은 토글 탭을 토글화면(Frame2)에 연결해준 상태. 다른탭도 다 연결해야한다.
	연결하는법 & 연결효과 원하는 요소(탭) 더블클릭 후 +가 나오면 +부터 원하는 프레임(Frame3)에 드래그한다. 그리고 효과는 on click - Navigate to- smart animate - Ease out 300ms 효과는 원하는대로 주면됨! 한번 효과를 주면 그다음으로 만드는 효과도 동일하게 적용됨
	다주고 나서 우측상단 Present 버튼을 눌러서 확인하기

# Modal

요구사항

모달 열기 버튼을 클릭하면 모달 창이 오버레이 되어야 합니다.
모달 닫기 버튼이나 모달 바깥 영역을 클릭하면 모달 창이 닫혀야 합니다.

	1. 모달열기 버튼 만들기 Frame1 안에 사각형을 만든다. 그위에 텍스트 '모달 열기' 를 만들고 두개를 드래그 해서 Shift+a 해준다.
	2. 모달닫기 박스 만들기 Frame1 바깥에 사각형을 만들고 텍스트 '안녕하세요~' 입력한다. 모달열기 버튼을 복사해서 붙여넣기 하고 모달닫기로 텍스트 수정 해준다. 컴포넌트로 요소들을 묶어준다.
	3. interactions 효과주기 - 모달열기 모달열기 버튼을 누르고 prototype- interactions- On click - Open overlay 연결은 모달닫기로 해주고 Close when clicking outside 체크 박스를 선택하면 모달 닫기가 아니라 바깥 아무데나 클릭해도 모달닫기가 닫힌다. Add background 체크 해주고 75% 숫자를 조정해주면 어둡기 조절가능
	4. interactions 효과주기 - 모달닫기 모달닫기는 Prototype-interactions에서 Frame1으로 연결
	5. 완성

# Toggle

요구사항

토글을 클릭하면 On, Off 상태가 바뀌어야 합니다.
On 상태인지 Off 상태인지 직관적으로 알 수 있어야 합니다.

	1. 토글 만들기 네모를 만들고 모서리 각도 40도 안에 동그라미 도형을 넣어준다. off 상태 복사후 원을 오른쪽으로 옮겨준다. on 상태 그리고 원하는대로 색깔을 변경해준다. 두개다 각각 컴포넌트 설정을 해준다.
	2. Combine as variants 해주기 두 요소를 드래그 후 Combine as variants 눌러준다. 이후 상태지정을 해준다. 위 toggle off 아래 toggle on Properties에서 on,off 설정시 자동으로 레이어 이름이 toggle=on / toggle=off 로 바뀐다.
	3. interaction 설정하기 토글 컴포넌트 선택 후 각각 interactions 설정해준다. 위 토글 On click - Change to - toggle on 아래 토글 On click - Change to - toggle on 아래 효과는 원하는 대로 설정한다.
	4. 토글 적용하기 좌측 assets에서 만들어진 toggle을 해당 프레임에 위치시킨다.
	5. 완성

# Tab

요구사항

각 탭을 클릭했을 때 해당 탭에 맞는 내용이 표시되어야 합니다.
어떤 탭이 선택되어 있는지 직관적으로 알 수 있어야 합니다.

	1. Tab 만들기 & variants설정 도형 툴에서 사각형을 만들고 꼭지점 더블클릭 모서리가 동그랗게 변하면 원하는 위치로 드래그 한 후 사다리꼴을 만들어준다. 그 위에 텍스트로 tab 1 만든다. 두개 더 복사 후 tab2, tab3 만들어 준다. 이후 색상변경한다. 각 탭마다 create component 해준 후 세개 동시에 드래그 해서 Design - combine as variants 해준다.
	2. tab 내용 만들기 & variants설정 좌측 assets에서 방금 만든 tab 가져온다. tab 3개가 들어가는 직사각형을 만들고 합쳐준다. 색, 텍스트 변경 이후 세개 동시에 드래그 해서 Design - combine as variants 해준다. variant이름을 보기 쉽게 바꿔준다.
	3. interaction 주기 각 상자마다 interaction준다.
	4. Frame위에 올리면 완성 assets에 들어가서 요소를 누르고 원하는 프레임에 삽입한다. 그럼 완성

# Accordion

요구사항

아코디언이 접힌 상태에서 버튼을 클릭하면 컴포넌트가 펼쳐져야 합니다.
아코디언이 펼쳐진 상태에서 버튼을 클릭하면 컴포넌트가 접혀야 합니다.
아코디언이 펼쳐진 상태일 때 숨겨져 있던 내용이 표시되어야 합니다.
아코디언이 접힌 상태인지 펼쳐진 상태인지 직관적으로 알 수 있어야 합니다.

	1. 요소 만들기 네모 만들어서 모서리 둥글게 텍스트 원 아래 화살표는 plugins - iconify - down 검색해서 벡터요소 import한것 동그라미+화살표 묶어서 컴포넌트 해주고 이 컴포넌트 복사 후 우클릭 해서 Flip vertical 하면 위아래 바뀐 똑같은 요소 만들어짐
	2. variants설정 윗상자 아랫상자 각각 컴포넌트 설정하고 두개 다 드래그 해서 variants준다
	3. interaction 주기 각각 상자에 on click- change to 효과주기
	4. 완성 Frame에 올려주고 재생하면 완성 (내껀 뭘 잘못만져서 크기가 달라짐...^^)