컴포넌트1_베리언츠

1.컴포넌트를 위한 페이지를 생성하여 한 곳에서 만들자.

---

2. 디폴트 버튼 디자인

1. 프레임 150 * 80 생성
2. Text  작성
3.  autolayout으로 정렬
   

   

4. 컨텍츄얼 메뉴에서 컴포넌트 생성 (ctrl + alt + K)- 컴퓨넌트 이름은 btn/round 로 지어서 디렉토리를 생성하
   
   

   

5. 우측 properties 에서 베리언츠생성
   

   

6. 하단 + 버튼 클릭하여 버튼 추가
   

   

   
   
   
7. 속성이름을 변경하고 각각의 베리언츠 value를 off/on으로 변경
   

   

   
   
   
8. 각각 버튼 디자인을 변경
   - 일반적으로 디폴트는 채우지 않은 디자인
   - 효과를 주어서 구분을 지어보자.
9. 프로토타입 모드로 변경 하자.
   

   

10.  btn_off 선택 >  + 파포인트로 아래 on 버튼을 연결
    - 트리거(이벤트)는 while hover (마우스가 오버 되는 동안) 변경
    - 인터랙션은 change to R_btn
    -  transition 변환효과는 smart animate로 변경
    

    

    
    
    
11. 작업페이지로 와서 프레임 안드로이드 스몰 선택 후 버튼을 삽입 해 보자
    1. 1. 에셋 탭 이동
       2. btn/round 버튼 드래그
       3. 사이드 에서 인스턴스 라운드 토글 변환 확인
12. .프로토 타입 패널로 변
    1. 사이드 flow starting point 추가
    2. flow 클릭 후 확인
    3. 사이트 인터랙션 추가 : open link 추가하여 네이버로 외부 링크를 생성 해 보자.  

 

 

---

베리언츠를 더 추가 해서 다양한 버튼의 옵션을 설정 해 보자.

1. 두 버튼은 선택하여 하단 베리언츠 + 클릭하여 copy 하자 

2. 추가 된 버튼에 아이콘을 넣어 보자. 

- 아이콘은 플러그인 > 머3.터리얼 아이콘에서 선택 해 보자.

3. 아이콘은 컴포넌트로 추가 한다. 이때 역시 icon/ 이름의 형식으로 디렉토리로 추가한다.

4. 아이콘을 버튼에 추가한다. 오토레이아웃이라 자동 정렬이 된다.

5. 전체 베리언츠를 선택한 후 사이드에서 properties 속성에서 베리언츠를 하나 더 추가 한다.
이때 속성 이름은 아이콘으로 변경한다.

6. 하단. 버튼 2개를 함께 선택하고 사이드  current varient에서  속성은 icon으로 value는 mixed에서 on으로 변경, 
상단, 버턴 2개는 아이콘  off로 이름 변경

 

7. 작업 창에서  다양한 버튼으로 손 쉽게 변경 해 보자.

8. 프로토타입에서 확인 해 보자.

9. 추가로 작은 버튼도 만들어 보자.