ProtoPie의 핵심 개념인 Trigger와 Response를 도형 예제를 통해 알아보겠습니다.
ProtoPie의 기본 개념: TRO 모델
ProtoPie는 TRO(Trigger, Response, Object) 모델을 기반으로 작동합니다:
- Trigger: 사용자의 행동 (예: 탭, 스와이프)
- Response: Trigger에 대한 반응 (예: 이동, 크기 변경)
- Object: 인터랙션이 적용되는 대상 (예: 버튼, 이미지)
예제 1: 탭하면 이동하는 사각형
만드는 방법:
1. 사각형을 그립니다.
2. 사각형을 선택하고 인터랙션 패널에서 "Add Trigger"를 클릭합니다.
3. Trigger로 "Tap"을 선택합니다.
4. Response로 "Move"를 선택합니다.
5. 사각형이 이동할 위치를 지정합니다.
result. 사각형을 탭하면 지정한 위치로 이동합니다.
예제 2: 탭하면 커지는 원
만드는 방법:
1. 원을 그립니다.
2. 원을 선택하고 "Add Trigger"를 클릭합니다.
3. Trigger로 "Tap"을 선택합니다.
4. Response로 "Scale"을 선택합니다.
5. 크기 변화 정도를 입력합니다 (예: 150%).
result. 원을 탭하면 1.5배로 커집니다.
예제 3: 탭하면 회전하는 삼각형
만드는 방법:
1. 삼각형을 그립니다.
2. 삼각형을 선택하고 "Add Trigger"를 클릭합니다.
3. Trigger로 "Tap"을 선택합니다.
4. Response로 "Rotate"를 선택합니다.
5. 회전 각도를 입력합니다 (예: 45도).
result. 삼각형을 탭하면 45도 회전합니다.
예제 4: 음성 명령으로 색상이 변하는 도형
만드는 방법:
1. 아무 도형을 그립니다.
2. 도형을 선택하고 "Add Trigger"를 클릭합니다.
3. Trigger로 "Voice Command"를 선택합니다.
4. 인식할 단어를 입력합니다 (예: "빨강", "파랑").
5. Response로 "Change Color"를 선택합니다.
6. 각 명령어에 맞는 색상을 지정합니다.
result. "빨강" 또는 "파랑"이라고 말하면 도형의 색상이 바뀝니다.
예제 5: 탭할 때마다 숫자가 올라가는 카운터
만드는 방법:
1. 텍스트 상자와 버튼을 만듭니다.
2. 변수를 만들고 초기값을 0으로 설정합니다.
3. 버튼에 "Tap" Trigger를 추가합니다.
4. Response로 "Change Variable"을 선택하고 1씩 증가하도록 설정합니다.
5. 텍스트 상자에 "Detect Variable Change" Trigger를 추가합니다.
6. Response로 텍스트 내용을 변수 값으로 업데이트하도록 설정합니다.
result. 버튼을 탭할 때마다 숫자가 1씩 증가합니다.
'UI·UX > Tools' 카테고리의 다른 글
[Figma] Figma Slides (0) | 2024.07.05 |
---|---|
[Figma] UIUX Prototyping : Swipe Interactions (0) | 2024.06.11 |
Prototyping Tools : Figma vs ProtoPie (0) | 2024.06.02 |
[ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기 (1) | 2024.01.31 |
[Figma] Component & Variants (0) | 2023.09.20 |