Comento 피그마 실무 PT 4주차 강의

Comento 피그마 강의

2022. 07. 09 (4주차 강의)

 

Variants

: 컴포넌트를 경우에 수에 따라 만들어두고 Drop box, Toggle button으로 상태를 변경하며 사용할 수 있는 기능

즉, On/Off 상태 모양의 버튼을 미리 만들어두고 필요에 따라 상태를 변경해가며 쓸 수 있는 기능

각각의 컴포넌트 요소는 각자의 값(Property)를 지정해줘야 함

 

*생성방법

1. 완성된 2개 이상의 Master component 선택>우측 패널의 Combine as variants 버튼 클릭

2. 2개 이상의 개체 선택>상단의 Create component set 클릭

 

Resizing

: Autolayout이 걸린 프레임에 속해 있는 Container와 Contents의 속성을 지정해주는 옵션

속성에 따라 Fill Container/ Hug Contents/ Fixed size 옵션이 뜸

속성이 적용된 Container, Contents는 속성의 특징에 따라 서로 영향을 주기도, 주지 않기도 함

반응형 페이지 작업시 유용함

1. Fixed width : Container와 Contents가 지정한 값으로만 고정되어 있는 상태로 각각의 크기 변화가 서로에게 영향을 주지 않음

2. Hug Contents : Container가 Contents 크기 변화에 따라 반응하도록 지정해주는 속성으로 Container가 Contents를 감싸는 형태 (패딩값 제외)

3. Fill Container : Contents가 Container 크기에 맞추어 반응하도록 지정해주는 속성으로 Contents는 Container가 어떤 크기로 변하든 꽉 채우는 형태를 띔 (패딩값 제외)

 

Prototyping

: 출시 전 간단히 핵심 기능을 넣어 제작하고 테스트해보는 방법

시제품, 견본품이라 하며 Prototyping 과정을 통해 상품화 되기 전 flow상 치명적 오류나 부족한 부분 개선할 수 있음

프로토타입 옵션은 Trigger(액션)>Work(리액션)로 이어지도록 설정

 

Prototyping 패널

1. Flow starting point : 프로토타입이 시작되는 지점을 정해주는 기능. 각 플로우별로 설정 가능

2. Interactions : 요소에 인터렉션을 추가하는 기능, +를 누르면 기본 인터렉션 추가하기 위한 Trigger, Work 선택 가능

3. Overflow scrolling : 화면 디바이스 크기 기준을 넘어가는 요소들에 대해 스크롤 적용 선택하는 부분, 세로/가로/세로&가로 옵션

4. Setting : 프로토타이핑의 기준이 되는 디바이스 크기, 기기색상, 배경색상, Interative component 허용 여부 체크

 

Interactive Component

: Component set(Variants)내에서 인터랙션을 주어 인터랙션이 걸린 컴포넌트를 만들어내는 방법

따로 Prototype에서 라인을 연결하지 않아도 컴포넌트 자체에 인터랙션이 걸려있어 어떤 화면에 적용하더라도 해당 인터랙션 요소를 그대로 가져갈 수 있음

탭, 토글버튼, 버튼의 상태별 변경 등에서 활용할 수 있음

 

*생성방법

만들어져있는 Variants 요소>개체간 Interaction 라인으로 연결>세부요소 설정

버튼과 같이 클릭했을 때 다른 상태값이 되는 경우 Work를 Change to로 설정

ex) On Tap(꺼짐 버튼) > Chage to(켜짐 버튼)

만들어진 개채를 드래그 후 복사한 뒤 Play버튼을 눌러 테스트

 

Interactions 걸어주는 방법

1. 우측패널>Frame 선택>Prototype 탭 선택>Interaction 버튼 클릭

2. Prototype모드>+ 버튼 클릭>드래그

Prototyping 적용방법

: 화면전환 방법에 따라 다른 애니메이션 방법 지정, 속도 전환 방법, 지속 시간 등을 지정해줘야함

1. Animation : 화면 전환 종류 선택하는 부분

2. 운동방법 : 애니메이션 속도를 어떻게 구성할 것인지 정하는 부분

3. 지속시간 : 애니메이션 지속 시간을 정하는 부분, 1000ms = 1초

4. 스크롤 위치 유지 : 스크롤 위치 유지를 사용하면 화면간 전환 시 동일한 스크롤 위치를 유지할 수 있음

Smart animation : 자동으로 스크롤 위치 유지

Instant, Dissolve : 스크롤 위치 유지가 선택사항

Slide, Move : 애니메이션 사용시 스크롤 위치 유지 사용할 수 없음

 

Smart Animation

: 레이어명이 같은 요소를 인식해 자동으로 애니메이션 효과를 걸어주는 기능

색, 투명도, 크기, 위치등을 자동으로 인식해 변화된 부분을 감지하고 두 화면 사이의 간극을 애니메이션 효과롤 표현해줌

 

*생성방법

1. 애니메이션이 들어갈 요소간 차이를 줌(색, 투명도, 크기, 위치 등)

2. 애니메이션을 걸어줄 요소의 레이어 명을 통일해 줌

3. 애니메이션을 걸어줄 프레임 두개를 연결하고 애니메이션 효과를 Smart Animation으로 설정

 

Prototyping 확인 방법

1. Figma app>작업한 화면 프레임 선택>Begin Mirorring (웹/앱 로그인 된 아이디가 동일해야함)

2. 프레임에 스타팅 포인트 추가>Play 버튼 클릭

3. Figma.com/mirror 접속>작업된 Figma 클릭

 

 

https://bit.ly/3D9XCOz

LIVE로 배우는 실무 PT ㅣ 코멘토