💡 프로토타입 기능과 원리를 어느정도 배웠으니, 배운 걸 최대한 응용해보세요!
1. 이미지 슬라이드 만들기
- ① 프레임 준비(375*812), 슬라이드 프레임 준비(375*500)
- ② 슬라이드 이미지 배열 후, 슬라이드 프레임에 넣기
- ③ 슬라이드 프레임에 프로토타입 패널에서 Scroll behavior, Horizontal 추가
2. 어코디언 만들기 (accordion=foldable,collapsible)
- ① 프레임 준비(375*812), 어코디언 프레임 준비(375*000)
- ② 어코디언 컴포넌트 제작(펼쳤을 때, 안펼쳤을때 배리언츠 컴포넌트)
‣ 참고영상 : (https://www.youtube.com/watch?v=SsTtjgvwXIA)
- ③ 버튼컴포넌트(안펼쳤을때) 배열 후 오토레이아웃하기, 어코디언 프레임에 넣기
- ④ 어코디언프레임에 프로토타입 패널에서 Scroll behavior, vertical 추가
3. 당근 앱의 글쓰기 버튼(심화)
- 확실히 심화 숙제는 심화였다. 하면서 헤매고 시간 소모를 많이 했다.
처음 잘못 생각한 부분은 1개의 375*812 프레임 안에서 보여줄 수 있다고 생각했다.
그래서 한 화면에서 작업하느라고 프로토타입이 꼬여 작동이 잘 되지 않았다.
프로토타입 트리거-액션도 설정을 while pressing, mouse up 으로 진행했다.
다이얼로그 overay 액션에서 버튼의 크기가 다르니 한 자리에 고정되서 올라가지 않았다.
튜터님의 예제를 보고 다시 작업을 진행했다.
우선 프레임을 3개 사용하셨고, 각 프레임 마다 액션이 다른 값을 화면에 직관적으로 배치하셨다.
액션도 mouse down, mouse up으로 깔끔하게 진행하셨다.
다이얼로그 overay는 프레임을 더 생성해서 그 위에 배치하셨다.
나는 너무 복잡하게 생각했던 것 같다. 화면을 쪼개서 각 화면위에 작업하는 방법도 있구나 하고 알게 되었다.
그런데, 조금의 의문점이 있다. 이렇게 화면을 세분화하여 각 화면마다 작업을 진행하면 효율적인 부분에서 큰 결점일 것 같다.
무언가 더 효율적인 방법이 있을거라고 생각한다. 아직은 내 수준에서 구현할 수 있는 방법은 이것 인것 같다.
'UXUI 디자인 입문(23.12.18~24.01.29) > [01.02~01.22] ▸ Figma 활용법' 카테고리의 다른 글
피그마 활용법(2)_복습2 (0) | 2024.01.12 |
---|---|
피그마 활용법(1)_복습1 (1) | 2024.01.11 |
피그마 활용법(2)_2주차 숙제 (0) | 2024.01.09 |
피그마 활용법(2)_중간점검 (0) | 2024.01.08 |
피그마 활용법(2)_3주차 정리 (0) | 2024.01.05 |