Framer 튜토리얼: 멋진 인터랙티브 프로토타입을 만드는 방법

아래의 예제 프로토타입을 살펴보십시오. 이들은 Framer에서 수행되었습니다. 이 튜토리얼을 마치면 즉시 멋진 애니메이션 프로토타입을 만들 수 있습니다.

Framer는 일주일 전에 최신 버전을 내놓았고 프로토타이핑 시장은 결코 예전 같지 않을 것입니다. Framer 프로토타이핑 도구는 마스터하기 어려웠지만 가장 정확하고 무한한 프로토타이핑 소프트웨어로 유용했습니다. 이제 상황이 바뀌었습니다. Framer에는 이제 Design + Code + Collaborate 기능이 함께 제공됩니다. 즉, Framer 내에서 직접 프로토타입을 생성하여 타사 소프트웨어나 코딩 기술 없이 완전한 기능을 갖춘 프로토타입을 개발할 수 있습니다.

여기서는 코딩에 대한 사전 지식 없이도 간단한 Framer 코드를 사용하는 방법을 알려 드리겠습니다. Framer의 디자인 및 코드 모드에서 최고의 기능을 결합하여 애니메이션 및 대화형 프로토타입을 만드는 방법을 배우게 됩니다. 이제 이 튜토리얼로 뛰어들어 프로토타입을 개선하기 위해 몇 가지 작은 코드 조각을 가져와 보겠습니다.

프레이머 기초

시작하자! framer.com으로 이동하여 평가판을 다운로드하세요. 그들은 완전한 기능을 갖춘 데모를 2주 동안 제공하고 있으며 이 프로토타이핑 소프트웨어에 대해 많은 것을 배울 수 있는 충분한 시간입니다.

설치 후 제공되는 몇 가지 예를 살펴보고 약간의 플레이를 하고 싶을 수 있습니다. 작업이 끝나면 프로토타이핑을 시작할 때입니다.

(이 Framer 튜토리얼에서는 Framer.js에서 직접 프로토타입을 만드는 데 중점을 둘 것입니다. Framer에서 프로토타이핑을 시작하는 다른 방법도 있다는 것을 알아야 합니다. 예를 들어 Sketch 파일로 직접 작업할 수 있습니다. 해당 워크플로는 다음에서 다룰 것입니다. 다른 기사.)

완전히 새로운 프레이머 – 디자인 모드

이 기사에서는 최소한의 코드 사용으로 몇 분 안에 세 가지 멋진 프로토타입을 만들 것입니다. 기본 상호 작용, 스크롤 구성 요소 및 페이지 구성 요소

Framer의 최신 버전에는 멋진 새 기능인 디자인 모드가 있습니다. Sketch 또는 Figma에서와 거의 동일한 방식으로 작업할 수 있습니다. 벡터 레이어를 만들거나, 이미지를 가져오거나, 텍스트 레이어를 만들고 스타일을 지정할 수 있습니다. 타사 앱 없이 빠르게 프로토타입을 만들고자 할 때 이 모든 것이 매우 편리합니다.

앱형 디자인을 만들자

이 튜토리얼의 첫 번째 부분에서 우리는 Framer 프로토타입을 위한 플레이그라운드를 준비할 것입니다. 벡터, 이미지 및 텍스트의 세 가지 다른 유형의 레이어가 있는 앱 유형 디자인을 만듭니다.

1단계: 간단한 버튼과 배경을 만듭니다.

디자인을 시작하려면 첫 번째 탭( 디자인 모드 )을 선택하고 Sketch에서와 같이 아트보드를 추가합니다. 이 튜토리얼에서는 iPhone 7 프로토타입을 작업할 것이므로 이 사전 설정을 아트보드 크기로 선택했습니다. 파란색 배경 채우기도 추가했습니다.

그런 다음 사각형 도구를 선택하고 간단한 둥근 버튼 형태로 모양을 만듭니다.

2단계: 이미지가 있는 카드를 추가합니다.

레이어를 추가하는 두 번째 방법은 드래그 앤 드롭 기능입니다. 컴퓨터에서 이미지 파일을 선택하고 Framer에 놓은 다음 오른쪽 사이드바를 사용하여 스타일을 지정할 수 있습니다. 심플한 일러스트를 사용하여 카드로 스타일링 해보았습니다.

3단계: 앱 제목을 추가합니다.

Framer를 사용하면 텍스트 레이어를 추가할 수도 있습니다. 다시 말하지만, 스타일 지정은 기본적으로 모든 그래픽 소프트웨어와 동일합니다. 글꼴, 크기, 정렬, 문자 간격 등을 선택할 수 있습니다.

4단계: Framer에게 대화형 레이어를 알려줍니다.

Framer 프로토타입을 시작하기 전에 한 단계 더 남았습니다. 어떤 레이어가 상호 작용할 것인지 Framer에게 알려 주기만 ​​하면 됩니다. 레이어 패널 내부의 레이어 이름 옆에 있는 점을 클릭하기만 하면 됩니다. 나중에 사용할 수 있도록 각 레이어의 이름을 적절하게 지정하는 것이 좋습니다. 레이어 이름을 카드 와 버튼 으로 지정했습니다.

5단계(보너스): 전체 색상을 정의합니다.

전체 프로토타입에 대해 일부 변수를 정의하는 것이 좋습니다. 처음부터 사용할 색상 팔레트, 타이포그래피 및 기본 치수를 설정할 수 있습니다. 이렇게 하면 시간을 절약하는 데 도움이 됩니다.

색상을 설정할 때 코드 편집기에서 색상의 이름을 지정하고 적절한 "=" 기호 뒤에 HEX, RGB 또는 RGBa 값을 제공하십시오. 모든 변수를 코드 맨 위에 유지하는 것을 잊지 마십시오.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

6단계(보너스): 상대 위치 추가.

새로운 Framer를 사용하면 프로토타입의 응답성을 매우 쉽게 유지할 수 있습니다. 아래와 같이 디자인 모드 에서 상대 위치를 설정할 수 있습니다.

다음은 코드에서 직접 레이어 위치를 정렬하고 계산하는 데 유용한 속성의 짧은 목록입니다. 레이어 위치를 계산하는 데 필요한 수학을 할 수 있습니다. 이것은 나중에 상호 작용을 추가하고 프로토타입을 반응형으로 유지하려는 경우에 필요합니다.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

이제 설정이 완료되었습니다. 이제 프로젝트를 시작하겠습니다.

다양한 유형의 Framer 레이어를 만들었습니다. 이제 상호 작용 놀이터를 사용할 준비가 되었습니다.

마침내! 지루한 부분이 끝났습니다. 이제 인터랙션 디자인을 할 차례입니다.

여기에서 전체 프로토타입을 다운로드하십시오.

1. 버튼 피드백 상호 작용 만들기

모든 상호 작용을 설계하려면 이를 가능하게 하는 방아쇠가 필요합니다. 거의 모든 것이 될 수 있습니다. 화면 탭, 애니메이션 종료, 이미지 로드 종료 또는 휴대전화 가속도계.

1단계: 상호작용을 위한 이벤트 생성.

우리는 그것을 간단하게 유지합니다. 다음 명령을 사용하여 탭할 때 버튼 피드백을 생성해 보겠습니다.

 layerA.onTap (event, layer) ->

Framer는 방금 이 코드 줄을 작성했습니다. 버튼 레이어를 탭하면 무언가가 일어난다는 의미입니다.

2단계: 이벤트에 애니메이션 추가.

이 트리거 이후에 ​​애니메이션을 시작하겠습니다. 이렇게 하려면 레이어 패널에서 버튼 레이어 옆에 있는 점을 클릭한 다음 애니메이션 추가 를 선택합니다. 애니메이션을 추가할 때 Framer는 애니메이션 편집 모드로 이동합니다. 레이어 매개변수의 크기를 조정, 이동, 회전 또는 변경할 수 있습니다.

Framer는 몇 줄의 코드를 더 추가했습니다. (걱정하지 마십시오. 애니메이션 패널을 사용하여 애니메이션을 계속 편집할 수 있습니다.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

축하합니다! 방금 첫 번째 상호 작용을 만들었습니다. 지금은 한 번만 작동하지만 수정하겠습니다. 이 애니메이션을 한 번만 트리거할 수 있는 이유는 애니메이션이 완료된 후에는 아무 일도 일어나지 않기 때문입니다. 첫 번째 애니메이션이 끝난 후 모든 매개변수를 이전 상태로 재설정해야 합니다.

3단계: 애니메이션 재설정.

이전과 거의 동일하게 다른 이벤트를 추가합니다. 차이점은 애니메이션이 끝날 때 이벤트를 찾고 있다는 것입니다.

이번에는 Framer에서 추가한 코드는 다음과 같습니다.

 button.onAnimationEnd (event, layer) ->

따라서 버튼 레이어의 애니메이션이 완료되면 버튼 레이어 매개변수를 재설정할 다음 애니메이션을 추가할 수 있습니다.

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

그게 다야! 이제 버튼을 탭한 후 작동하는 피드백이 있습니다.

2. 카드 레이어 상호 작용을 위한 다른 상태 만들기

자, 이제 애니메이션을 디자인하고 트리거하는 방법을 알게 되었습니다. 더 자주, 레이어의 다른 상태를 디자인해야 합니다. 위치, 크기 또는 불투명도와 같은 일부 매개변수만 변경하여 동일한 레이어의 여러 상태를 디자인할 수 있습니다.

1단계: 카드 레이어에 대한 상태 추가 및 생성.

카드 에 상태를 추가하는 방법은 애니메이션을 추가하는 것과 거의 같습니다. 카드 레이어 옆에 있는 점을 클릭한 다음 상태 추가 를 클릭해야 합니다. 이제 상태 편집 모드로 들어갔습니다. 원하는 대로 디자인하십시오.

코드의 들여쓰기에 주의하십시오. 첫 번째 행에서 시작해야 합니다.

내 카드 레이어에 대해 두 가지 다른 상태를 디자인했습니다.

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

2단계: 이벤트 추가.

작동하려면 한 단계만 더 수행하면 됩니다. 이러한 상태를 변경하기 위한 이벤트를 생성해야 합니다.

 button.onTap -> card.stateCycle()

이것이 하는 일은 작업을 수행할 때마다 레이어의 모든 상태를 하나씩 변경하는 것입니다. 따라서 우리의 경우 버튼 레이어를 탭할 때마다 카드 상태로 변경됩니다. 더 많은 상태를 만들고 올바르게 트리거하려면 아래 스니펫이 훨씬 더 효과적입니다.

 button.onTap -> card.stateSwitch("b")

이 스니펫은 레이어의 특정 상태를 트리거하려는 경우에 유용합니다.

프로토타입에 대한 마지막 조정은 상태 간 애니메이션 속도와 곡선의 변경입니다.

 card.animationOptions = curve: Spring time: 0.8 

이벤트 로 할 수 있는 일이 훨씬 더 많지만 이 시점에서 거의 모든 기본 상호 작용을 만들 수 있습니다. 내가 본 문서 중 가장 잘 쓰여진 문서 중 하나입니다.

Framer: 구성 요소에서 작업 속도 향상

작업 속도를 높이기 위해 구성 요소를 추가할 때가 되었습니다. 지금부터 이 튜토리얼을 최대한 활용하려면 이 프로토타입을 다운로드하십시오.

1. 첫 번째 구성 요소: 스크롤링

프로토타입을 약간 수정했습니다. 이제 내부에 목록이 있지만 높이가 화면 해상도보다 높습니다. 프로토타입에서 전체 목록을 볼 수 있도록 스크롤을 만들어야 합니다.

1단계: 레이어 생성 및 구성 요소 설정.

화면보다 높이가 더 큰 레이어를 만드는 것부터 시작하겠습니다. 이 레이어를 대화형으로 표시하고 이름을 list 로 지정합니다. 그런 다음 코드 모드로 이동합니다. 이번에는 편리한 왼쪽 사이드바를 사용하지 않습니다. 전체 화면을 스크롤 가능하도록 설정해 보겠습니다.

 scroll = new ScrollComponent width: Screen.width height: Screen.height

이 코드는 현재 장치의 너비와 높이로 보이지 않는 영역을 만듭니다.

2단계: Framer에게 스크롤하려는 레이어를 알려줍니다.

아직 아무 일도 일어나지 않았습니다. 어떤 레이어를 스크롤할 수 있는지 Framer에 알려야 합니다. 이를 위해 스크롤 구성 요소에 목록 레이어를 추가합니다.

 list.parent = scroll.content

3단계: 세로 스크롤 잠금.

우리는 지금 스크롤할 수 있지만 모든 방향에서 일어나고 있습니다. 수직 축에서 스크롤을 잠가야 합니다.

 scroll.scrollHorizontal = false 

와! 단 5줄의 간단한 코드로 앱 내부에 스크롤을 만들었습니다.

2. 페이지 구성 요소: 화면에서 화면으로 스와이프

화면 간 전환을 위한 매우 인기 있는 상호 작용은 스와이프입니다. 여기의 아이디어는 스크롤 구성 요소와 매우 유사합니다. 여기에서 작동하는 프로토타입을 다운로드할 수 있습니다.

1단계: 구성 요소 설정.

먼저 코드 편집기에서 마법이 일어날 "상자"를 만들어야 합니다.

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

이 시점에서 여기 있는 모든 코드에 익숙해야 합니다. 구성 요소와 해당 영역의 간단한 설정입니다. 이제 스와이프할 레이어를 만들어야 합니다.

2단계: 레이어 생성

첫 번째 프로토타입 디자인을 사용하고 약간 수정합니다. 카드 이미지 1장 대신에 이번에는 2장의 이미지를 가져왔습니다.

먼저 대지를 2배 더 넓게 만들어야 합니다. 대지 속성 패널에서 너비를 찾아 2로 곱합니다(또는 *2 추가). 카드를 서로 옆에 놓고 파란색 점으로 활성화한 다음 적절하게 이름을 지정합니다: card1 및 card2 .

3단계: 페이지 구성 요소에 레이어 추가.

코드 편집기의 코드 끝에 다음을 추가해야 합니다.

 card1.parent = page.content card2.parent = page.content

즉, 이러한 레이어를 구성 요소에 추가합니다.

이제 페이지 구성 요소를 사용할 준비가 되었습니다!

마지막 단어

그게 다야, 여러분! 이 Framer 튜토리얼이 시장에서 가장 강력한 프로토타이핑 도구로 여정을 시작하는 데 유용했기를 바랍니다. 또한 Facebook에서 Framer 그룹에 가입하는 것을 고려해야 합니다. 주변에 거대한 커뮤니티가 있으며 시작할 때 도움이 됩니다.

Framer 내부에 더 깊이 들어가고 싶다면 Framer 문서를 읽어보십시오.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법