피그마 활용법(2)_3주차 숙제

💡 프로토타입 기능과 원리를 어느정도 배웠으니, 배운 걸 최대한 응용해보세요!

---

1. 이미지 슬라이드 만들기
- ① 프레임 준비(375*812), 슬라이드 프레임 준비(375*500)
- ② 슬라이드 이미지 배열 후, 슬라이드 프레임에 넣기
- ③ 슬라이드 프레임에 프로토타입 패널에서 Scroll behavior, Horizontal 추가

슬라이드 프레임을 따로 만들어서 그 속에 넣기 (Carousel 전체 페이지 선택X)

2. 어코디언 만들기 (accordion=foldable,collapsible)
- ① 프레임 준비(375*812), 어코디언 프레임 준비(375*000)
- ② 어코디언 컴포넌트 제작(펼쳤을 때, 안펼쳤을때 배리언츠 컴포넌트)
   ‣ 참고영상 : (https://www.youtube.com/watch?v=SsTtjgvwXIA)
- ③ 버튼컴포넌트(안펼쳤을때) 배열 후 오토레이아웃하기, 어코디언 프레임에 넣기
- ④ 어코디언프레임에 프로토타입 패널에서 Scroll behavior, vertical 추가

(좌) 어코디언 프레임(Prototype/position-Scroll with parent/vertical) / (우) variant properties(On,Off)

3. 당근 앱의 글쓰기 버튼(심화)
- 확실히 심화 숙제는 심화였다. 하면서 헤매고 시간 소모를 많이 했다.
처음 잘못 생각한 부분은 1개의 375*812 프레임 안에서 보여줄 수 있다고 생각했다.
그래서 한 화면에서 작업하느라고 프로토타입이 꼬여 작동이 잘 되지 않았다.
프로토타입 트리거-액션도 설정을 while pressing, mouse up 으로 진행했다.
다이얼로그 overay 액션에서 버튼의 크기가 다르니 한 자리에 고정되서 올라가지 않았다.

튜터님의 예제를 보고 다시 작업을 진행했다.
우선 프레임을 3개 사용하셨고, 각 프레임 마다 액션이 다른 값을 화면에 직관적으로 배치하셨다.
액션도 mouse down, mouse up으로 깔끔하게 진행하셨다.
다이얼로그 overay는 프레임을 더 생성해서 그 위에 배치하셨다.

나는 너무 복잡하게 생각했던 것 같다. 화면을 쪼개서 각 화면위에 작업하는 방법도 있구나 하고 알게 되었다.
그런데, 조금의 의문점이 있다. 이렇게 화면을 세분화하여 각 화면마다 작업을 진행하면 효율적인 부분에서 큰 결점일 것 같다.
무언가 더 효율적인 방법이 있을거라고 생각한다. 아직은 내 수준에서 구현할 수 있는 방법은 이것 인것 같다.

HSL 수치 변경(명도변화)

블루스파게티 몇 가닥

Carousel

Accordion

Button-smart animate/ mouse down&up