Intro

프로토파이는 스마트 디바이스를 위한 프로토타이핑 툴입니다. 프로토파이를 통해서 정교한 프로토타입을 코딩 한 줄 하지 않고도 쉽고 빠르게 만들 수 있습니다. 더욱이 실제 디바이스에서 프로토타입을 테스트해볼 수 있어 실제 사용환경을 시뮬레이션 해볼 수 있습니다.

Explore design solutions

개발자의 도움 없이도 다양한 인터랙션을 구현할 수 있습니다

Communicate designs

정교한 인터랙션을 팀원들에게 쉽게 설명할 수 있습니다

Research user feedback

개발 단계 이전에도 사용자의 피드백을 쉽게 받을 수 있습니다

Concept Model

interaction concept model

프로토파이의 개념 모델은 프로그래밍 언어보다는 자연상에서 물체가 움직이는 원리를 바탕으로 하고 있습니다. 오브젝트의 움직임이나 상호작용은 해당 상호작용을 유발하는 트리거, 상호작용의 결과를 보여주는 리스폰스, 상호작용의 대상이 되는 오브젝트로 구성됩니다. 프로토파이 역시 오브젝트, 트리거, 리스폰스를 조합하여 인터랙션을 기술하도록 만들어져 있습니다.

위의 예에서는 스크린에서 보여지는 오브젝트를 탭하는 동작은 트리거에 해당하고 탭한 오브젝트가 움직이는 변화는 리스폰스라고 할 수 있습니다.

interaction piece table

자연에서 원소들이 다양한 조합을 통해서 다양한 물질을 구성하는 것처럼, 인터랙션을 구성하는 인터랙션 피스(Interaction Piece)인 트리거와 리스폰스들을 조합하면 다양한 인터랙션을 만들어 낼 수 있습니다. 위의 표에서 좌측은 트리거를 우측은 리스폰스를 의미합니다. 가운데는 트리거와 리스폰스가 유기적으로 결합된 컴퍼넌트를 의미합니다.

Why ProtoPie?

프로토파이를 사용해야하는 다양한 이유가 있지만, 크게 4가지 장점을 꼽을 수 있습니다.

1. Low learning cost

프로토파이는 직관적으로 이해할 수 있는 개념 모델을 가지고 있고, 여타 그래픽툴과 유사한 UI를 가지고 있어 디자인작업에 익숙한 사람이라면 쉽게 활용할 수 있습니다.

2. Code Free

프로토파이는 코딩을 하지 않아도 정교한 프로토타입을 쉽게 만들 수 있습니다. 복잡한 코드나 함수 대신에 인터랙션 피스(트리거, 리스폰스)를 조합하면 다양한 인터랙션을 기술할 수 있습니다.

3. Multi-finger gestures & sensors

프로토파이는 화면상의 여러 개 포인트를 터치할 수 있습니다. 따라서 두 손가락 혹은 세 손가락을 사용한 인터랙션을 활용하는 프로토타입을 만들 수 있습니다. 또한, 스마트폰에 탑재되어 있는 다양한 센서를 활용할 수 있어서 단순히 디바이스의 스크린에서 보여지는 프로토타입을 넘어 디바이스간 통신이 필요한 프로토타입을 만들거나 서비스 디자인을 위한 프로토타이핑도 가능합니다.

4. Test on real phones

프로토파이는 프로토타입을 실제 스마트폰에서 테스트해볼 수 있습니다. 동시에 여러 개의 디바이스에서 동시에 프로토타입을 테스트해볼 수 있어, 팀 내에서 디자인 회의를 하거나 사용자조사를 할 때 등, 다양하게 활용할 수 있습니다.

Layer

프로토파이에서는 다른 디자인 툴을 사용했던 경험 그대로 레이어의 프로퍼티를 조절 할 수 있습니다. 사각형 레이어나 원형 레이어와 같은 벡터레이어를 메뉴바에서 쉽게 추가할 수 있고, 해당 레이어의 사이즈나 위치를 변경하는 방식이 기존 디자인 툴과 동일하기 때문에 빠르게 익힐 수 있습니다.

Layer Property

Position
캔버스상에서 레이어의 좌표를 설정합니다
Size
레이어의 크기를 설정합니다
Rotation
레이어의 각도를 설정합니다
Origin
레이어의 위치, 크기, 각도를 변경할 때의 기준점을 설정합니다
Radius
사각형 레이어 모서리의 둥글기를 설정합니다
Opacity
레이어의 투명도를 설정합니다. 레이어의 투명도를 0으로 설정하면 트리거에 반응하지 않습니다
Fill Color
레이어의 컬러와 컬러의 투명도를 설정합니다. 컬러의 투명도를 0으로 설정해도 트리거에 반응합니다
Hit area
레이어의 터치 영역을 임의로 조절할 수 있습니다
Allow Touch to Affect Lower layers
레이어를 트리거에 반응하지 않도록 설정합니다
Use as Mask
벡터레이어만 가지는 속성으로 다른 레이어들을 벡터레이어 크기 만큼만 보여줄 수 있습니다

Video Layer

프로토파이는 동영상 레이어를 지원합니다.
20mb 이하의 mp4(H264) 포맷 비디오를 사용하실 수 있습니다.

Play Automatically
프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다
Looping
동영상을 반복 재생합니다

Text Layer

Text를 ProtoPie에서 바로 입력할 수 있습니다.

Size
텍스트의 사이즈를 조절 할 수 있습니다
Weight
폰트의 굵기를 조절 할 수 있습니다
Alignment
폰트의 좌/우 혹은 상/하 정렬을 조절 할 수 있습니다
Line Spacing
폰트의 행간을 조절 할 수 있습니다

Container

컨테이너는 다수의 레이어들을 그룹핑하여 한 번에 제어하거나 스크롤이나 페이징 인터랙션을 만드는 용도로 사용할 수 있습니다.

Relative Coordinates

일반적으로 레이어의 x,y좌표는 디바이스의 좌측 상단을 원점으로 좌표 체계를 가지지만, 컨테이너 안의 레이어는 컨테이너의 좌측 상단을 원점으로 좌표체계가 바뀌게 됩니다.

Relative Coordinates

Clip Sublayers

프로퍼티 패널의 클립 서브레이어를 켜면 컨테이너 영역만큼만 보이게 할 수 있습니다.

Clip Sublayers

Scroll / Paging

프로퍼티 패널에서 컨테이너의 스크롤 혹은 페이징 속성을 설정할 수 있습니다. 레이어 패널에서 컨테이너 안에 레이어를 넣어주는것 만으로 스크롤 또는 페이징이 가능합니다.

Scroll

세로 혹은 가로로 긴 레이어를 스크롤 합니다.

scroll interaction

Properties

Direction
레이어를 스크롤 혹은 페이징하는 방향을 설정합니다
Overscroll
오버스크롤 했을 때 Bounce효과를 켜고 끌 수 있습니다

Paging

손가락으로 화면을 수평, 수직으로 드래그할 때, 페이징 컨테이너 안의 레이어들이 페이징 컨테이너의 너비 혹은 높이 만큼 한 번에 움직입니다.

paging interaction

Properties

Direction
레이어를 스크롤 혹은 페이징하는 방향을 설정합니다
Overscroll
오버스크롤 했을 때 Bounce효과를 켜고 끌 수 있습니다

One-Time Trigger

일회성 트리거(One-Time Trigger)는 리스폰스를 즉시 실행시키는 트리거입니다. 레이어를 탭하거나 어떠한 조건을 만족 시켰을 때, 사용자가 정의한 지속시간(duration), 애니메이션 커브, 반복(repeat) 등의 프로퍼티를 가진 리스폰스를 실행시킵니다.

Tap

레이어를 한번 탭했을 때 리스폰스를 실행시킵니다.

tap trigger
Tap
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Double Tap

레이어를 빠르게 두번 탭했을 때 리스폰스를 실행시킵니다.

doubletap trigger
Double Tap
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Touch Down

레이어에 손가락이 닿는 순간 리스폰스를 실행시킵니다.

touchdown trigger
Touch Down
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Touch Up

레이어에서 손가락이 떨어지는 순간 리스폰스를 실행시킵니다.

touchup trigger
Touch Up
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Long Press

레이어에 일정 시간동안 손가락이 닿아 있으면 리스폰스를 실행시킵니다.

longpress trigger
Long Press
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다
Pressing Time
손가락 끝으로 터치스크린을 누르고 있는 시간을 설정합니다

Fling

레이어를 스와이프 할 때 대상이 되는 레이어는 움직이지 않습니다.

fling trigger
Fling
Scale

트리거 프로퍼티

Direction
손가락이 움직이는 방향을 설정합니다

Mouse Over

마우스 이벤트입니다. 마우스가 오브젝트와 겹쳐졌을 때 리스폰스를 실행 시킵니다.

mouse over trigger
Mouse Over
Scale

Mouse Out

마우스 이벤트입니다. 마우스가 오브젝트를 벗어났을 때 리스폰스를 실행 시킵니다.

mouse out trigger
Mouse Out
Scale

Continuous Trigger

컨티뉴어스 트리거를 사용하면 타켓 레이어가 사용자의 연속적인 조작에 맞춰 반응하게 됩니다. 레이어를 움직이거나, 회전시키거나 사이즈를 조절할 수 있습니다.

Drag

레이어를 드래그하여 움직이거나, 손가락의 이동 거리에 비례하게 사이즈와 각도를 조절할 수 있습니다.

drag trigger
Drag
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

드래그 트리거와 조합되는 리스폰스의 프로퍼티

Direction
손가락 끝이 움직이는 방향을 설정합니다
Limit
레이어가 움직일 수 있는 한계점을 설정합니다
Ratio
레이어가 드래그 되는 거리와 손가락이 움직이는 거리의 비율을 설정합니다. 수치가 100일 때 1:1 비율로 움직이고 수치가 늘어날 수록 손가락의 움직임보다 레이어의 움직임이 커집니다

Pinch

두 손가락을 터치 스크린에 댄 상태로 오므렸다 펴는 동작으로 레이어의 사이즈를 조절할 수 있습니다.

pinch trigger
Pinch
Scale

핀치 트리거와 조합되는 리스폰스의 프로퍼티

Direction
손가락이 움직이는 방향을 설정합니다
Pivot
레이어의 크기나 각도가 변화할 때의 기준점을 설정합니다
Limit
레이어가 움직일 수 있는 한계점을 설정합니다

Rotate

두 손가락으로 레이어를 잡고 회전시킬 수 있습니다.

rotate trigger
Rotate
Rotate

로테이트 트리거와 조합되는 리스폰스의 프로퍼티

Pivot
레이어의 크기나 각도가 변화할 때의 기준점을 설정합니다

Sensor Trigger

디바이스의 센서를 사용할 수 있습니다. 디바이스 주변의 소리의 크기, 디바이스의 기울기 값 등을 활용하여 리스폰스를 제어하는 인터랙션을 만들 수 있습니다.

센서 트리거와 조합되는 리스폰스의 프로퍼티

Smoothness
센서의 값에 맵핑한 레이어의 움직임을 부드럽게 보정할 수 있습니다. 1은 아무런 보정을 하지 않은 기본 설정이고, 23 은 부드럽게 보정된 움직임을 표현해줍니다. 2 보다 3에 더 많은 보정이 가해집니다
Mapping Range - Device's Sensor 4
인터랙션을 실행시키고 싶은 센서의 범위 값을 입력합니다
Mapping Range - Response's Layer 5
센서의 값에 맞춰서 움직일 레이어의 범위 값을 입력합니다

Tilt

디바이스를 기울이는 각도에 따라 리스폰스를 실행 시킬 수 있습니다.

tilt trigger
Tilt
Move
tilt image

트리거 프로퍼티

Axis
디바이스의 회전이 발생하는 중심축을 선택합니다

Compass

디바이스의 나침반 기능을 이용해서 가리키는 방위에 따라 리스폰스를 실행 시킬 수 있습니다.

compass trigger
Compass
Rotate
compass niddle

Sound

디바이스 주변 소리의 크기에 따라서 리스폰스를 실행 시킬 수 있습니다.

sound trigger
Sound
Scale

3D Touch

아이폰의 터치 스크린을 누르는 강도(force)에 따라서 리스폰스를 실행 시킬 수 있습니다. 누르는 강도(force)의 값은 최저 0에서 최대 6.7까지 인식 가능합니다.

3dtouch trigger
3D Touch
Scale

Proximity

디바이스의 근접 센서를 사용할 수 있습니다. 근접 센서로 부터 멀어지거나, 가까워 질 때 리스폰스를 실행 시킵니다.

Proximity trigger
Proximity
Opacity

트리거 프로퍼티

Far to Near
디바이스와 가까워질 때 리스폰스를 실행시킵니다
Near to Far
디바이스와 멀어질 때 리스폰스를 실행 시킵니다

Conditional Trigger

사용자가 정의한 조건을 만족 시켰을 때만 리스폰스를 실행 되도록 만들 수 있습니다.

Chain

움직이는 레이어가 있을 때, 이 레이어의 변화에 따라 다른 레이어를 변화시킵니다.

chain trigger
Drag
Move
Chain
Scale

트리거 프로퍼티

Property
Layer attribute values as a reference for changing other layers

체인 트리거와 조합되는 리스폰스의 프로퍼티

Trigger’s Layer Mapping Range 1
체인의 타겟 레이어의 동작 범위를 입력합니다
Response’s Layer Mapping Range 2
체인의 타겟 레이어의 동작에 맞춰서 움직일 레이어의 범위 값을 입력합니다

Range

레이어의 프로퍼티가 변할 때 사용자가 정의한 조건을 만족 시킨 경우에만 리스폰스를 즉시 실행시킵니다. 사용자는 레이어의 좌표나 사이즈 같은 프로퍼티를 직접 정의한 값을 기준으로, 크거나 작거나 혹은 포함하거나 포함하지 않는 상황에 대한 조건을 정의 할 수 있습니다.

range trigger
Drag
Move
Range
Scale

트리거 프로퍼티

Greater than or equal to 1
타겟 레이어의 프로퍼티가 특정 값 이상일 때 실행됩니다
Less than or equal to 2
타겟 레이어의 프로퍼티가 특정 값 이하일 때 실행됩니다
Between 3
타겟 레이어의 프로퍼티가 특정 범위의 값 사이에 들어왔을 때 실행됩니다
Not between 4
타겟 레이어의 프로퍼티가 특정 범위의 값에 들어오지 않을 때 실행됩니다

Pull

풀은 성공과 실패의 개념이 있는 트리거입니다. 레이어를 일정 거리 이상 혹은 일정 속도 이상으로 드래그 했을 때 성공으로 인정됩니다. 성공하게 될 경우 현재 레이어의 좌표에서 사용자가 입력한 거리(distance)만큼 이동하게 되고, 실패할 경우 원래의 제자리로 되돌아오게 됩니다.

pull trigger
Pull
Scale

트리거 프로퍼티

Direction
손가락 끝이 움직이는 방향을 설정합니다
Distance
풀이 성공했을 때 레이어가 이동할 거리를 설정합니다
Follow Over Pulling
레이어의 이동거리(distance)를 초과해서 드래그 하는 경우의 움직임을 정의합니다
Easing
레이어가 움직이는 가속도를 정의합니다

Start

프로토타입이 실행되거나 씬이 전환 되었을 때 별도의 트리거 없이 자동으로 리스폰스가 실행됩니다.

onload trigger
Start
Move

Receive

디바이스간 인터랙션을 구현할 수 있습니다. 독립적으로는 사용이 불가능하고 센드 리스폰스와 함께 사용되는 트리거입니다. 센드 리스폰스에서 전송하는 문자열과 리시브 트리거에서 설정한 문자열이 일치 할 때 리스폰스를 실행시킵니다.

트리거 프로퍼티

Channel
통신하기 위한 채널을 선택합니다. 디바이스간 인터랙션을 구현하기 위해서는 프로토파이 스튜디오를 설정하면 됩니다. Android Broadcasting은 하나의 Android 디바이스 내에서 앱끼리의 통신을 위한 용도로 사용됩니다
Message ID
전송할 문자열을 정의합니다. 센드 리스폰스에서 정의한 문자열과 리시브 트리거에서 정의한 문자열이 동일할 때 디바이스간의 인터랙션을 실행 시킬 수 있습니다

Response

리스폰스는 트리거에 의해 발생된 인터렉션의 결과가 되는 피스입니다. 트리거와 조합하는 방식에 따라 서로 다른 프로퍼티를 가집니다.

Move

레이어의 위치를 이동시킵니다.

Move
레이어가 이동할 좌표를 설정합니다
move response

Scale

레이어의 사이즈를 조절합니다.

Size
레이어의 사이즈를 가로값width과 세로값height으로 조절합니다. (컨테이너의 사이즈를 조절 할 때는 컨테이너 안의 레이어들의 사이즈에는 변화가 없습니다.)
Factor
레이어의 사이즈를 퍼센트%로 조절합니다. (컨테이너의 사이즈를 조절할 때 컨테이너 안의 레이어들도 함께 사이즈가 조절됩니다.)
scale response

Rotate

레이어를 설정한 각도로 회전시킵니다.

Rotate To
레이어가 회전할 각도의 절대값을 설정합니다
Rotate By
레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다
Direction
레이어가 회전하는 방향을 설정합니다
rotate response

3D Rotate

레이어를 3차원으로 회전시킵니다.

Rotate To
레이어가 회전할 각도의 절대 값을 설정합니다
Rotate By
레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다
Direction
레이어가 회전하는 방향을 설정합니다
Pivot
레이어 회전의 기준점을 설정합니다
Perspective Depth
레이어가 3차원으로 회전할 때 왜곡의 정도를 설정할 수 있습니다. 숫자가 작아질 수록 왜곡이 커집니다
3d rotate response

Opacity

레이어의 투명도를 변경합니다.

Change To
변경될 투명도의 값을 설정합니다
opacity response

Color

레이어의 컬러를 변경합니다.

Change To
변경될 컬러를 설정합니다
color response

Radius

레이어의 모서리의 둥글기를 변경합니다.

Change To
변경될 둥글기 값을 설정합니다
radius response

Scroll

레이어를 특정 위치로 스크롤합니다.

Scroll
레이어를 스크롤해서 이동할 거리값을 입력합니다
scroll response

Reorder

레이어의 순서를 변경합니다. 레이어가 컨테이너 안에 있는 경우 컨테이너 내에 위치하는 레이어들끼리만 순서가 변경됩니다.

Reorder
레이어가 배열된 순서를 바꿉니다
reorder response

Jump

씬(scene)간 이동을 할 수 있습니다.

Jump To
이동할 씬(scene)을 선택할 수 있습니다
Transition
씬(scene) 이동을 할 때 트랜지션 효과를 줄 수 있습니다
Reset to initial state
이동할 씬의 상태를 초기 상태로 되돌립니다. 이 옵션을 켜지 않으면 해당 씬에서 마지막으로 인터랙션이 일어난 상태로 이동하게 됩니다
jump response

Playback

동영상 레이어를 제어할 수 있습니다. 재생하거나 멈추고 특정 구간으로 점프 시킬 수 있습니다.

Play
동영상을 재생합니다
Pause
동영상을 일시 정지합니다
Seek
동영상을 특정 구간으로 점프시킵니다. M:SS 형식으로 원하는 구간을 입력할 수 있습니다

Text

텍스트의 속성이나 내용을 변경 할 수 있습니다. 텍스트 리스폰스는 듀레이션을 가지지 않습니다.

Change To
텍스트의 내용을 변경합니다
Size
텍스트의 사이즈를 변경합니다
Weight
텍스트의 굵기를 변경합니다
Alignment
텍스트의 좌/우 혹은 상/하 정렬을 변경합니다
Line Spacing
텍스트의 행간을 변경합니다
text response

Send

디바이스간 인터랙션을 구현할 수 있습니다. 독립적으로는 사용이 불가능하고 리시브 트리거와 함께 사용되는 리스폰스입니다. 리시브 트리거에서 설정한 문자열과 센드 리스폰스의 문자열이 일치할 때 실행됩니다.

Vibrate

디바이스에 진동을 줄 수 있습니다.

설정할 수 있는 옵션이 없습니다.

vibrate response

Condition

리스폰스가 실행시키기 위한 조건을 정의합니다. 컨디션 피스에서 정의한 조건을 만족시킬 때, 컨디션 아래 나열된 리스폰스들이 실행 됩니다.

Greater than
타겟 레이어의 프로퍼티가 특정 값을 초과 할 때만 실행합니다
Greater than or equal to
타겟 레이어의 프로퍼티가 특정 값 이상일 때만 실행합니다
Less than
타겟 레이어의 프로퍼티가 특정 값 미만일 때만 실행합니다
Less than or equal to
타겟 레이어의 프로퍼티가 특정 값 이하일 때만 실행합니다
Equal to
타겟 레이어의 프로퍼티가 특정 값과 일치 할 때만 실행합니다
Not equal to
타겟 레이어의 프로퍼티가 특정 값과 일치하지 않을 때만 실행합니다
condition response

Timeline / Valueline

프로토파이에서는 트리거의 종류에 따라 리스폰스의 실행 범위를 타임라인과 밸류라인으로 구분해서 보여줍니다. 타임라인 혹은 밸류라인을 통해서 리스폰스들의 듀레이션과 스타트 딜레이, 맵핑 레인지를 시각적으로 확인 할 수 있고, 타임라인에 마우스오버 했을 때 보여지는 Bar(혹은 핸들)를 드래그하여 지속시간과 시작시점을 조정할 수 있습니다.

*컨티뉴어스 트리거에 사용되는 리스폰스들은 정해진 듀레이션이나 맵핑되는 값이 없기 때문에 별도의 타임라인이나 밸류라인을 가지지 않습니다.

Timeline

타임라인은 리스폰스들의 듀레이션, 딜레이, 리핏 설정을 시각화하여 표시해줍니다. 여러개의 리스폰스들이 함께 사용되는 마이크로인터랙션을 만들때 타임라인을 사용하면 더욱 효율적으로 각 리스폰스의 타이밍을 조정할 수 있습니다.

timeline image

Valueline

벨류라인은 트리거에 할당된 레이어와 리스폰스에 할당된 레이어의 동작 범위를 보여줍니다.

valueline image

Scene

두 개 이상의 화면을 가진 프로토타입을 만들 때 씬(scene)을 추가할 수 있습니다. 또한, 복잡한 프로토타입에서 기능 단위로 씬(Scene)을 분리하면 프로토타입의 복잡도를 낮추고 인터랙션 패널의 가독성을 높일 수 있습니다.

scene list

Manage Scene

Scene panel에서 scene의 순서를 바꾸고 복제할 수 있습니다.

manage scene modal

Scene Transition

점프 리스폰스를 사용하면 scene간의 이동이 가능합니다. ios에서 default로 제공하는 transition효과를 사용할 수도 있고, 애니메이션 없이 즉시 scene을 이동을 할 수도 있습니다.

Animation Curve

실제 사물들은 일정한 속도로 움직이는 경우가 많지 않습니다. 따라서 사람들은 일정한 속도로 움직이는 것 보다는 가속, 감속, 가감속이 들어가 있는 움직임을 더 자연스럽다고 느낍니다. Easing-Function과 Cubic-Bezier, Spring을 적절히 활용하면 자연스럽고 미려한 애니메이션을 만들 수 있습니다.

Easing Function

보편적으로 사용되는 가속도에 대한 프리셋입니다. 프로퍼티 패널에서 ease-in, ease-out, ease-in-out중에 선택할 수 있습니다.

EaseIn

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

easeOut

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

EaseInOut

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

Cubic-Bezier

네 가지 숫자를 조합하여 커스텀된 easing curve를 사용할 수 있습니다. 이 사이트에서 커스텀한 cubic-bezier값을 손쉽게 만들 수 있습니다.

*추후 studio 내에서 직접 Cubic-Bezier의 그래프를 직접 조작하면서 정의할 수 있는 기능을 제공할 예정입니다.

Example

  • Cubic-bezier
    ( 0.39, 0, 0.23, 1)

  • Cubic-bezier
    ( 0.71, 0.41, 0.32, 0.76)

Spring

스프링 커브는 레이어가 스프링처럼 튕기는듯한 애니메이션을 만들 수 있도록 해줍니다.

*추후 studio 내에서 직접 spring curve의 그래프를 직접 조작하면서 정의할 수 있는 기능을 제공할 예정입니다.

Example

  • 600, 16

  • 250, 19

Shortcut

Overall

macOS Windows
Hide ProtoPie Command + H -
Hide Others Command + Option + H -
Toggle Full Screen Command + Control + F -
Minimize Window Command + M Ctrl + M
Toggle Layer Panel Command + Option + 1 Ctrl + Alt + 1
Toggle Interaction Panel Command + Option + 2 Ctrl + Alt + 2
Toggle Layer and Interacton Command + Option + 3 Ctrl + Alt + 3

Manage a prototype

macOS Windows
New Command + N Ctrl + N
Open Command + O Ctrl + O
Close Command + W Ctrl + W
Save Command + S Ctrl + S
Save as Command + Shift + S Ctrl + Shift + S
Upload to Cloud Command + U Ctrl + U
Rename Command + R Ctrl + R
Edit Text Layer Command + Return Ctrl + Enter

Insert interaction elements

macOS Windows
Image Layer I I
Rectangle Layer R R
Oval Layer V V
Container Layer N N
Tap Trigger T T
Drag Trigger D D
Chain Trigger C C
Move Response M M
Scale Response S S
Opacity Response O O

Edit a prototype

macOS Windows
Undo Command + Z Ctrl + Z
Redo Command + Shift + Z Ctrl + Shift + Z
Copy Command + C Ctrl + C
Paste Command + V Ctrl + V
Delete Delete Delete
Group Layers with Container Command + G Ctrl + G
Ungroup Layers from Container Command + Shift + G Ctrl + Shift + G
Collapse Command + [ Ctrl + [
Expand Command + ] Ctrl + ]

Run a prototype

macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to front Ctrl + Tab Ctrl + Tab

Control a view

macOS Windows
Zoom In Command + =,
Z + click
Ctrl + =,
Z + click
Zoom Out Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
Actual Size Command + 0 Ctrl + 0
Center Canvas Command + 1 Ctrl + 1
Panning Spacebar + click move Spacebar + click move
Language selector
TOP