목차
- 과제
- Figma
📌 과제
[UI 디자인 패턴 컴포넌트 구현하기!(클릭)]
구현한 내용
- modal 만들기
- toggle 버튼
- Tab
- Accordion
- Drop down
- Auto Complete
🤦🏻♀️ 힘들었던 점 및 알게된 점
❓ Q : 토글 구현시 미끄러지듯이 구현하는 방법
⚒️ A : 애니메이션이 구현할 도형의 이름을 동일하게 해주면 됨 (스마트 애니메이션)
❓ Q : 이등변 삼각형 만드는 방법
⚒️ A : 삼각형 3개 만들어서 그룹했는데,, 사각형을 만들고 클릭하면 각 변에 점이 생기고 해당 점을 이동하면서 원하는 모형으로 만들 수 있음
❓ Q : 아코디언 생성시 자연스럽게 본문도 스르륵~ 내려오게 하는 방법
⚒️ A : 헤더와 목록이 있을때 목록에만 본문을 넣어주는게 아니라 헤더에도 본문의 내용을 넣어주고 안보이게 표시 하면 된다. (글씨색 설정에 눈?표시 누르면 안보임)
❓ Q : Drop down 구현할때 스크롤하는 방법을 어떻게 해야 하나...
⚒️ A :
1) 고정시킬 드롭다운(헤더) 만들기
2) 드롭다운을 눌렀을때 내려오는 선택지 사각형을 만들어서 그룹 해주기
-> 드롭다운과 같이 한번에 그룹을 안묶어주는 이유는 같이 그룹핑을 해주면 드롭다운이 고정이안되고 같이 올라감
3) 바깥 프레임 만들어주고 맨 위에 있는 상자가 프레임 위에 맞게끔 맞춰주기
- 위 : 여백을 두게 되면 스크롤을 올렸을때 여백으로 스크롤의 나머지?가 보임
- 양 옆 : 여백을 두지 말것 -> 두게 되면 헤더와 사이즈 안맞음
- 아래 : 여백을 주어 스크롤을 했을 때 메인 화면에 아래 여백을 보여주게 됨
4) Scroll구현
- 드롭다운 바깥 프레임에 : scroll효과를 주기
- position : Fixed
- 목록 : vertical scroll
5) 스크롤할 사각형들을 보여줄 메인 프레임에 넣고 프레임의 길이조절
📌 Figma
: UI 디자인 & 프로토타이밍 툴
Figma 특징
- 실시가 협업 가능
- 다양한 환경 지원 : 다양한 OS 환경에서 사용 가능
- 자동 저장 및 버전관리
- 다양한 무료 폰트 지원
- 오토 레이아웃 기능 : 요소들 사이의 간격과 정렬에 규칙 부여가능
- 프로토타이핑 :Lo-Fi 프로토타입 - Hi-Fi 프로토토타입까지 제작가능
자주 사용하는 기능 및 단축키
기본 단축키
- 복사하기 : 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 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다 놓기
