[피그마] 베리언트, 컴포넌트에 프로토타입 적용

★ 프로토타입 Change to 활용 ★

 

* 컴포넌트 적용 리스트

 

1. 체크박스
2. 라디오
3. 스위치
4. 햄버거메뉴
5. 텍스트
6. 드롭다운메뉴 등
7. 마우스 호버
8. 고급버전

 

 

1.  Checkbox

change to 활용

 

2. Raido

 

- radio와 같은 경우 smart animate 활용하여 테스트

change to smart animate 활용

 

3. Switch (toggle)

 

- switch와 같은 경우 smart animate 활용하여 테스트

 

4. 메뉴

 

- menu와 같은 경우 smart animate 활용하여 테스트

 

* x 버튼 만드는 법

 

1.

-  메뉴 프레임 오토레이아웃 제거

- 가운데 막대기 투명처리 및 레이어 잠금

- 위 막대기 각도 45 / 아래 막대기 각도 -45 처리 후 가운데 정렬

 

2. 

 

- 메뉴 프레임 오토레이아웃 제거

- 가운데 막대기 끝으로 밀기 및 투명 처리

- 위 막대기 각도 45 / 아래 막대기 각도 -45 처리 후 가운데 정렬

 

5. 텍스트

 

- 프레임 안에 텍스트 작성 

 

- 각각 색상 다르게 하여 아래와 같이 설정

 

 

6. 드롭다운메뉴

 

 

 

7. 마우스 호버

- 버튼 생성 후 컴포넌트 set 설정

 

- 각각 프로토타입 연결 후 아래와 같이 설정

-> while hovering (버튼에 올리면 hover 처리)

 

- 버튼 뿐만 아니라, 사진/ 텍스트 모두 가능

 

예시

오브젝트 테두리 및 그림자 효과

이미지 확대 및 텍스트 색상 변경

 

- 설정값

 

8. 고급버전