![](https://i0.wp.com/www.simple-coding.com/wp-content/uploads/2024/05/course-details-tab-1.png?resize=300%2C300&ssl=1)
📃 요약
요소 기술 :
– Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴
📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
– 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/07aeee74-bb36-4b1c-9136-67ab737271d2/image.png?ssl=1)
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/277c462c-5eb2-4591-a9d3-8f6d30f2b0b5/image.png?ssl=1)
2) 검색양식 : 처음 만나는 피그마
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/56d43908-c7e1-4fd0-91a2-33fe1d09b456/image.png?ssl=1)
3) Open in Figma 버튼 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/3e784f9f-0fe6-4864-99a8-3a555c3f7eb0/image.png?ssl=1)
4) Figma 에서 예제 파일 자동으로 열림
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/a0790348-327d-43ee-b0de-1a12f4501853/image.png?ssl=1)
14장 와이어프레임과 프로토타입으로 화면 설계하기
- 와이어프레임 : 화면에 필요한 요소들을 단순한 선과 면으로 그려놓은 것, 화면의 뼈대 - 프로토타이핑 : 정적인 화면을 실제 구현한 것처럼 작동시켜볼 수 있도록 실사와 비슷한 작업을 더하는 것
– 홈 화면 와이어프레임
아이폰 11 pro 해상도에서 홈 화면 작업 :
1) 툴바 – Frame 선택 – 디자인 패널
- iPhone 14 & 15 Pro 선택
- Frame 명 수정 : Main
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/f756e213-dccf-41de-b7c0-b97c50b471e3/image.png?ssl=1)
2) Wire-frame UI Kit
- UI/NavigationBar : 상단에 복사/붙여넣기
- 타이틀 : 로고 수정
- 버튼 : 업로드 수정
- UI/BottomBar : 하단에 복사/붙여넣기
- 메뉴 : 홈 / 북마크 / 내피드 각각 수정
3) Wire-frame UI Kit
- 20px 폰트입니다. 복사/붙여넣기 : 관심 주제 글 수정
- UI/Image 복사/붙여넣기
- 18px 폰트입니다. 복사/붙여넣기 : 콘텐츠 타이틀이 들어갑니다.
- UI/Icon/Bookmark 복사/붙여넣기 : 콘텐츠 타이블이 들어갑니다. 오른족에 위치시킴
- 14px 폰트입니다. 복사/붙여넣기 : 콘텐츠를 설명하는 문구가 들어갑니다. 여기서는 두 줄 정
도만 보여주는 게 좋을 것 같습니다. 길어지면 말줄임표… - 12px 폰트입니다. 복사/붙여넣기(왼쪽/아래) : 2020.08.12
- 12px 폰트입니다. 복사/붙여넣기(오른쪽/아래) : 조회수 201
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/0557fa28-bf76-400f-a5c2-74f02acf71ed/image.png?ssl=1)
– 프로토파이핑으로 동적인 화면 만들기
- 인터렉션 기능으로 화면간에 연결 가능
1) UI Kit – UI/BottomBar 마스터 컴포넌트 선택
- 홈 / 북마크 / 내 피드 글자 수정
2) 홈 클릭 : - 디자인 패널 – Prototype 탭 클릭
- interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
- on clike 선택
- none 클릭 : Navigate To 선택
- none 클릭 – 드롭다운 화면 : Main 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/873c4e5f-cf4d-450d-9b85-9a8076a8fa2b/image.png?ssl=1)
3) 북마크 클릭 :
- 디자인 패널 – Prototype 탭 클릭
- interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
- on clike 선택
- none 클릭 : Navigate To 선택
- none 클릭 – 드롭다운 화면 : Bookmark 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/9d47c185-00c4-4a38-b966-52d3a0425ecb/image.png?ssl=1)
4) 내 피드 클릭 :
- 디자인 패널 – Prototype 탭 클릭
- interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
- on clike 선택
- none 클릭 : Navigate To 선택
- none 클릭 – 드롭다운 화면 : MyFeed 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/ef170c03-f6c5-4d33-ab91-509ea875047e/image.png?ssl=1)
5) 상단 햄버거 클릭 :
- 디자인 패널 – Prototype 탭 클릭
- interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
- on clike 선택
- none 클릭 : Open Overlay(화면을 덮으며 표시됨) 선택
- none 클릭 – 드롭다운 화면 : Side Menu 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/c250d721-5d6c-4ffd-9371-32d75526089c/image.png?ssl=1)
6) 오른쪽 상단 – 프리젠테이션 뷰 클릭 :
- 햄버거 버튼 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/c3acdf11-2534-4074-a1ad-df78368b3c60/image.png?ssl=1)
- 북마크 버튼 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/9019b08f-a174-48a0-9a32-19ebe6132d71/image.png?ssl=1)
- 내 피드 버튼 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/e7e8837f-1be1-4862-a660-3cd74fe6dce8/image.png?ssl=1)