📃 요약

요소 기술 :

– Basic : Figma

📃 기술 구현

스펙 :

- figma 디자인 협업툴

📃 Figma 기본 실습

디자인 툴의 구조 및 용어를 알아봄

– 디자인 화면

왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널

실습 예제 복사 및 가져오기

처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행

참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기

1) 좌측 아래 Explore Community 클릭

2) 검색양식 : 처음 만나는 피그마

3) Open in Figma 버튼 클릭

4) Figma 에서 예제 파일 자동으로 열림

14장 와이어프레임과 프로토타입으로 화면 설계하기

- 와이어프레임 : 화면에 필요한 요소들을 단순한 선과 면으로 그려놓은 것, 화면의 뼈대
- 프로토타이핑 : 정적인 화면을 실제 구현한 것처럼 작동시켜볼 수 있도록 실사와 비슷한 작업을 더하는 것

– 홈 화면 와이어프레임

아이폰 11 pro 해상도에서 홈 화면 작업 :

1) 툴바 – Frame 선택 – 디자인 패널

• iPhone 14 & 15 Pro 선택
• Frame 명 수정 : Main

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

– 프로토파이핑으로 동적인 화면 만들기

- 인터렉션 기능으로 화면간에 연결 가능

1) UI Kit – UI/BottomBar 마스터 컴포넌트 선택

• 홈 / 북마크 / 내 피드 글자 수정
  2) 홈 클릭 :
• 디자인 패널 – Prototype 탭 클릭
• interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
• on clike 선택
• none 클릭 : Navigate To 선택
• none 클릭 – 드롭다운 화면 : Main 선택

3) 북마크 클릭 :

• 디자인 패널 – Prototype 탭 클릭
• interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
• on clike 선택
• none 클릭 : Navigate To 선택
• none 클릭 – 드롭다운 화면 : Bookmark 선택

4) 내 피드 클릭 :

• 디자인 패널 – Prototype 탭 클릭
• interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
• on clike 선택
• none 클릭 : Navigate To 선택
• none 클릭 – 드롭다운 화면 : MyFeed 선택

5) 상단 햄버거 클릭 :

• 디자인 패널 – Prototype 탭 클릭
• interaction 옆에 + 클릭 : 왼쪽 옆에 팝업 보임
• on clike 선택
• none 클릭 : Open Overlay(화면을 덮으며 표시됨) 선택
• none 클릭 – 드롭다운 화면 : Side Menu 선택

6) 오른쪽 상단 – 프리젠테이션 뷰 클릭 :

• 햄버거 버튼 클릭

- 북마크 버튼 클릭

- 내 피드 버튼 클릭