섹션 0. 프로토타이핑 기능 ~ 팀 라이브러리 기능

1. 프로토타이핑 기능

프로토타입에서 화면 스크롤 기능 (세로) 추가하기

-> 프레임의 사이즈를 상하로 길게 늘려준다.

-> 프로토타입의 Overflow 를 Vertical (세로) 로 설정한다.

 

* 여기서 탭바를 고정하려면?

: 탭바의 포지션을 Fixed 로 변경한다.

 

메뉴 버튼 눌렀을 때, 메뉴 나타나게 하기

-> 메뉴 프레임을 새로 만든다. (프레임 안쪽은 자유롭게 꾸민다.)

-> 프로토타입 탭에서 네비게이션 바의 메뉴 아이콘과 메뉴 프레임을 연결한다.

-> On tap (터치했을 때) & Open Overlay (오버레이로 열기) & Manual (사용자 설정) 으로 설정한다.

-> 어디에 오버레이 될 것인지 위치를 조정하고, 애니메이션을 설정한다.

 

* 닫기를 하려면?

: 닫기 버튼에 Close Overlay 를 적용한다.

-> Close when clikcing outside (오버레이 바깥쪽을 터치했을 때 닫기) 를 적용할 수도 있다.

 

* 오버레이가 나타났을 때, 나머지 부분이 어두워지게 하려면?

: Add background behind overlay (오버레이 뒤에 배경 추가) 를 적용한다.

 

세부 화면에서 뒤로가기 기능 추가하기

-> 세부 화면으로 사용할 프레임을 새로 만든다.

-> 닫기 버튼을 추가하고, 해당 버튼에 기능을 추가한다.

 

* 애니메이션을 추가하려면?

: Interaction details 에서 애니메이션을 추가할 수 있다.

 

뒤로가기 버튼은 항상 같은 기능을 수행하는데, 이 기능을 매번 일일히 추가해야할까?

-> 마스터 컴포넌트에서 뒤로가기 버튼에 뒤로가기 기능을 추가해두면 된다.

 

* 마스터 컴포넌트 (네비게이션 바) 에 뒤로가기 버튼이 없으면?

: 마스터 컴포넌트 (뒤로가기 아이콘) 에 설정하면 된다.

 

프로토타입에서 화면 스크롤 기능 (가로) 추가하기

-> 두가지 방법이 있다.

 

첫번째 방법 : 화면 두개를 만들어, 두 화면을 smart 애니메이션으로 잇는 방법

-> 가로로 스크롤하지 않은 화면 (기본 화면) 과, 가로로 스크롤한 화면을 만들어 두 화면을 잇는다.

-> Smart annimation & Is in and out 적용한다.

-> 이건 과거에 사용했던 방법이다. (Navigate to 기능)

 

두번째 방법 : 스크롤 하고자 하는 객체들을 프레임으로 변경한다.

-> 프레임으로 변경한 그룹은 Overflow Behavior 를 적용할 수 있다.

-> Horizontal scrolling (가로 스크롤) 을 적용한다.

 

* 이때 유의해야 할 점

: 프레임 사이즈와 객체 사이즈가 같으면 안된다.

-> 프레임 사이즈보다 객체 사이즈가 클 때, 프레임 바깥으로 나가는 객체만큼 스크롤이 가능한 것이기 때문에.

-> Ctrl 누른채로 사이즈 조절하면, 프레임 사이즈만 줄어든다.

 

프로토타입에서 화면 스크롤 기능 (가로 & 세로) 추가하기

-> 프레임 안에 프레임 보다 사이즈가 큰 사각형 오브젝트를 하나 배치한다.

-> Map Maker 플러그인을 사용하여, 사각형을 지도로 채워준다.

-> Horizontal & Vertical 스크롤을 적용한다.

 

---

 

2. 개발자와 공유 방법 Zeplin 과 Share 기능

 

Zeplin 사용

-> 플러그인에서 Zeplin 설치

-> 프로젝트 안에서 Zeplin 실행

-> Zeplin 에서 프로젝트를 하나 만든다. (Web, iOS, Android 중 택1)

-> Figma 에서 Zeplin 플러그인 실행, 만들어둔 프로젝트에 Export 할 프레임 선택.

-> Zeplin 에서 성공적으로 Export 되어있는 것 확인!

 

* 아이콘, 이미지 등 Export 가 추가적으로 필요한 것들

: Export 를 + (추가) 해주어야한다.

-> Export 를 준비해주어야, Zeplin 에서 Export 가 가능하다.

-> 마스터 컴포넌트에 적용해주면, 인스턴스들에도 모두 적용된다.

 

* Style Guide 

: 만들어둔 스타일 가이드 (색, 폰트, 레이아웃) 리스트를 확인할 수 있다.

 

Figma Share 사용

-> invite 사용

-> 다른 팀원들을 프로젝트에 공유할 수 있다.

 

* Figma Dev Mode 사용

: Zeplin 을 사용했던 과거와는 다르게, 이제 Figma 에서도 Zeplin 과 동일한 기능을 수행할 수 있다.

-> Dev Mode 는 유료 버전에서만 사용 가능하니 주의.

 

---

 

3. 팀 라이브러리 기능

: 팀 라이브러리는 유료 기능이므로 주의.

 

팀 라이브러리 생성-> 새로운 팀을 만들고, 원하는 플랜을 선택한다. (Free 버전에서는 팀 라이브러리 관리가 불가능하다.)-> 타이틀, 컬러, Input 박스 등 여러 컴포넌트를 만든다.-> Libraries 에서 Publish library 버튼을 눌러 라이브러리를 추가한다.

 

팀 라이브러리 가져오기-> 새로운 파일을 만들고, Libraries 에서 위에서 만든 팀 라이브러리를 On 한다.-> 성공적으로 기존에 만든 Styles 를 사용할 수 있다.