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 클릭
LIVE로 배우는 실무 PT ㅣ 코멘토
8명 소수정예 라이브로 배우는, 진짜 실무 퍼스널 트레이닝!
comento.kr
'Comento' 카테고리의 다른 글
Comento 피그마 실무 PT 3주차 강의 (0) | 2022.07.08 |
---|---|
Comento 피그마 실무 PT 2주차 강의 (0) | 2022.06.30 |
Comento 피그마 실무 PT 1주차 강의 (0) | 2022.06.21 |