Figma 프로토 타입 : 유용한 모형에 대한 빠른 단계별 안내서

Figma 프로토 타이핑 : 정적 모델을 동적 대화 형 경험으로 변환하는

코어 포인트 :

Figma 프로토 타이핑은 정적 모델을 동적, 대화식 프로토 타입으로 변환하여 개발자가 디자인의 사용자 프로세스, 기능 및 느낌을 이해하도록 돕습니다.

Figma 프로토 타입을 만들기위한 단계에는 다음이 포함됩니다. 수평 스크롤 프레임 워크 작성, 아트 보드 전환 생성, 이전 아트 보드로 돌아 오는 기능 생성 및 복잡한 타이밍 애니메이션 생성이 포함됩니다. 각 단계에는 원활한 전환 및 애니메이션 효과를 보장하기 위해 특정 설정 및 상호 작용이 포함됩니다. Figma 프로토 타입은 대화식이며 피드백을 미리보고 수집하기 위해 다른 사람들과 공유 할 수 있습니다. 이 기능은 공동 작업을 향상시키고 수신 된 피드백을 기반으로 개선을 허용합니다. Figma는 또한 Lottiefiles와 같은 플러그인을 통해보다 복잡한 애니메이션을 지원합니다.

프로토 타이핑은 정적 모델을 대화식 및 동적 모델로 변환하는 프로세스입니다 ( 프로토 타입 ). 정적 모델을 현실로 바꾸는 것은 의심 할 여지없이 디자인 워크 플로우에서 가장 흥미 진진한 (가장 흥미 진진한) 단계 중 하나입니다.

개발자의 경우 디자인의 사용자 프로세스, 감정 및 기능을 이해하는 것이 중요합니다. 2020 Design Tools Survey에 따르면 세계 최고의 디자인 도구 인 Figma를 사용하는 것보다 더 좋은 방법은 무엇입니까?
• Digma의 프로토 타이핑 방법을 마스터하면 간단하고 사용하기 쉽고 즐거움을 느낄 수 있습니다. 먼저이 정적 모델을 복사 한 다음 "일련의 상호 작용"을 클릭 한 다음 "Draft로 복사"를 클릭하면 튜토리얼 전체에서 더 많은 기능적 충실도를 추가합니다. 로컬 사본은 다음과 같습니다
참고 : 나는 당신이 Figma 또는 Sketch와 같은 현대 UI 디자인 도구에 대한 지식이 있다고 가정합니다.
• 1 단계 : 수평 스크롤 프레임을 만듭니다 Artboard 1부터 시작하여 뷰포트를 넘어서 카드 선택을 수평으로 스크롤 할 수 있습니다. 이것은 Figma가 "연결"이라고 부르는 것을 만들지 않고도 모델을 동적으로 만드는 방법입니다. 연결은 우리를 새로운 아트 보드로 안내하지만 1 단계에서 우리가 할 일은 아닙니다.
먼저 레이어 패널 (왼쪽 사이드 바)에서 카드를 선택한 다음 드롭 다운 메뉴를 사용하여 그룹 옵션을 디자인 패널에서 프레임으로 변경하십시오 (오른쪽 사이드 바).

나는 이것에 깊이 들어 가지 않을 것이지만, 그룹과 프레임의 주요 차이점은 그룹이 자식 요소를 단단히 감싸고 프레임의 크기가 될 수 있다는 것입니다. 이것은 다음을 의미합니다 :

그룹의 아동 요소는 그룹과 함께 확장되는 반면 프레임의 어린이 요소는 더 고집이납니다 (버그가 아닌 기능입니다) . 프레임의 자식 요소는 프레임에 비해 정렬되며, 그룹의 자식 요소는 여전히 아트 보드에 비해 정렬되어 있습니다. 프레임에는 수평 또는 수직으로 스크롤 할 수있는 오버 플로우 컨텐츠가 포함될 수 있습니다 (이것이 우리가 시도하는 것입니다)
• 잠깐만, 이것은 아르 보드가 실제로 프레임이라는 것을 의미합니까? 실제로 : 다른 UI 디자인 도구를 Artboards라고하며 Figma는
프레임 라고 부릅니다. Figma에서는 프레임이 다른 프레임에 중첩 될 수 있기 때문에 Sketch, Adobe XD와 같은 다른 도구의 Artboards와 약간 다릅니다.
• 프로토 타입 모드로 전환하십시오 ( ) 이제 오버 플로우 동작 설정을 사용한 다음 드롭 다운 옵션을 스크롤 없음에서 수평 스크롤로 변경할 수 있습니다.

  이제 새로 변환 된 프레임에 의해 그림자가 이상하게 차단된다는 것을 알 수 있지만, 실제로는 오버플레이링 컨텐츠의 표준 동작이며 비교적 쉽게 수정할 수 있습니다. 그림자의 흐름 변수가 30이고 프레임의 크기가 있으므로 가장자리 주위에 여분의 30 간격이 남아 있도록 프레임을 조정해야합니다. 크기 ( shift

  ↑ → ↓ ← → ) 및 미세 조정 ( shift ↑ ↓ ← →

  ) 물체는 쉬워야합니다.

  그건 그렇고, (프레임을 클릭하면), 카드와 간격을 쉽게 재 배열 할 수 있습니다. 이것은 튜토리얼 자체와 관련이 없지만 여전히 훌륭합니다.

  2 단계 : 아트 보드 전환 생성 다음 단계에서는 한 아트 보드를 "연결"이라고도하는 다른 아트 보드에 연결하는 상호 작용을 시도해 봅시다. "카드"프레임을 선택하십시오 (예, 전체 프레임은 지금 클릭 한 카드가 중요하지 않기 때문에 전체 프레임입니다). 그런 다음 여전히 프로토 타입 모드에 있다고 가정하면 커넥터 (즉, 호버링시 테두리가 표시된 원)를 Artboard 2로 드래그하십시오. 이 아트 보드는 이제 연결되어 있습니다. 커넥터를 Artboard 2에 넣은 후 "연결"설정 (현재 표시해야 할)은 다음과 같습니다.

  상호 작용 세부 사항 "클릭하면"(클릭에 의해 상호 작용이 트리거됩니다) " /"Artboard 2 "로 내비게이션 (클릭하여 사용자가 Artboard 2로 이동하게됩니다. 2)
  애니메이션 "push" / "←"( "논문 2"는
  • 가 오른쪽에서 화면으로 밀립니다) "속도 저하" / "300ms"(300ms 이내에 애니메이션이 빠르게 시작한 다음 점차 속도가 느려집니다)
  "스마트 애니메이션 매치 레이어"확인란을 선택하십시오 (변경되지 않은 경우 백 버튼 및 탐색과 같은 일반적인 요소가 애니메이션되지 않습니다) .

• • 지금까지 우리가 한 일을보고 싶습니까? 오른쪽 상단 코너에서 "데모"버튼을 클릭하십시오 (즉, 재생 아이콘). 웹 브라우저에서 Figma를 사용하면 새 탭이 열립니다. 팁 : r
  를 눌러 프로토 타입을 다시로드하십시오.
  • 3 단계 : 뒤로!
  우리가 계속해서 더 복잡한 연결을 파헤 치기 전에, 우리가 Artboard 1 (또는 우리가 온 아트 보드)으로 돌아갈 수 있는지 확인하십시오. 이번에는 뒤로 버튼으로 시작하여 다음과 같이 설정합니다.
  • 상호 작용 세부 사항 "를 클릭하면 " "뒤로"

옵션이 고정되어 있기 때문에 이번에는 애니메이션 설정을 사용할 수 없습니다. 구체적으로, 전환은 리버스 애니메이션이됩니다. 예를 들어, "푸시 ←"를 사용하여 아르 보드로 전환하면 "푸시 →"를 사용하여 다시 전환합니다. 4 단계 : (상대적으로) 복잡한 타이밍 애니메이션을 만들어 를 만듭니다 다음 단계에서는 여러 아트 보드에 걸쳐 여러 개의 아트 보드에 걸쳐있는 단일 애니메이션을 만들고 전체 아트 보드가 아닌 여러 객체를 별도로 애니메이션합니다. 구체적으로, 버튼을 클릭 한 후 확장 된 카드를 왼쪽으로 돌린 다음 타이머를 설정하여 오른쪽으로 회전 한 다음 원래 상태로 돌아갑니다.

본질적으로 이것은 스윙 애니메이션입니다. Artboard 2에서 "버튼"객체를 선택하고 Artboard 3에 연결된 커넥터를 만듭니다. 다음 설정을 사용하십시오 상호 작용 세부 사항 "를 클릭하면 " "항법" / "용지 3"

애니메이션 "스마트 애니메이션" "속도가 느려 져" / "300ms"

참고 : 우리는 애니메이션 유형으로 "스마트 애니메이션"을 선택했기 때문에 두 아트 보드에 동시에 존재하지만 시각적으로 다른 레이어는 부드럽게 전환 될 것이지만 관련 레이어 구조와 레이어가 일관되게 유지되는 경우에만 . 일관성이 없다면 Figma는이 층이 동일한 층이라는 것을 이해하지 못하고 정확하게 애니메이션이되지 않을 것입니다.

디자인 패널에서 버튼의 배경을 #FF0000으로 설정하고 카드를 왼쪽으로 돌렸다는 것을 알 수 있습니다.

그러나 300ms "왼쪽 애니메이션 회전"을 오른쪽으로 실행 한 후 어떻게 회전합니까? 글쎄, 그것이 시간이 지정된 애니메이션이 필요한 곳입니다. 위의 단계를 반복하십시오. 이번에는 Artboard 3을 Artboard 4에 연결하십시오. "지연 후" / "300ms"가 유일한 차이점입니다. 상호 작용을 완료하려면 Artboard 4를 Artboard 5에 다시 반복적으로 연결하십시오.

이것은 우리가 애니메이션을 지속적으로 실행하는 방법입니다. 이 예에서는 초기 클릭 상호 작용이 "Rotle Animation Left"를 활성화하고 후속 애니메이션은 자동으로 타이머를 따릅니다.

Figma 프로토 타이핑은 재미 있나요?

우리는 이제이 튜토리얼을 완료했습니다. Figma 파일은 실제로 다르지 않습니다 (프로토 타입 모드를 사용할 때는 일부 가시 커넥터 제외). 그러나 데모 모드에서는 매우 다른 기능을 갖습니다. 튜토리얼을 따르지 않는 경우 최종 결과를 테스트 할 수있는 "동적"버전을 확인하십시오.

멋져요?

우리는 더 복잡한 애니메이션 스타일과 상호 작용 유형을 확실히 구상 할 수 있지만 여기에서 볼 수있는 것은 알아야 할 것의 약 99%를 다루어야합니다. 상호 작용에 관해서는 단순성이 항상 더 좋습니다!

더 복잡한 애니메이션의 경우, 틀림없이 깔끔하게 시도해 볼 가치가있는 깔끔한 Figma 플러그인이 있습니다.

Figma에 대한 자세한 내용은 Wireframe Design 용 Figma 사용에 대해 읽을 수도 있습니다.

Figma 프로토 타입에 대한 질문

Figma 프로토 타입은 무엇입니까? Figma 프로토 타입은 협업 설계 도구 인 Figma를 사용하여 만든 디자인의 대화식 표현입니다. 디자이너는 디자인의 효능을 시연하고 테스트하여보다 역동적이고 사용자 중심 경험을 제공 할 수 있습니다.

Figma에서 프로토 타입을 만드는 방법은 무엇입니까? Figma에서 프로토 타입을 만들려면 화면이나 프레임을 설계 한 다음 프로토 타입 모드를 사용하여 이러한 프레임을 서로 연결하여 상호 작용, 전환 및 애니메이션을 정의하여 사용자 경험을 시뮬레이션하십시오.

공유하기 전에 Figma 프로토 타입을 미리 볼 수 있습니까? 예, Figma를 사용하면 Figma 편집기에서 프로토 타입을 직접 미리 볼 수 있습니다. 프로토 타입 모드를 입력하고 "데모"버튼을 클릭하여 디자인 상호 작용을 경험하십시오. 내 그림 프로토 타입에 대한 피드백을 수집 할 수있는 방법이 있습니까? 예, Figma는 디자인 및 프로토 타입에 대한 의견을 지원합니다. 프로토 타입 링크를 공유하면 시청자는 설계의 특정 요소 또는 영역에 직접 의견을 남겨두고 협업 및 피드백 컬렉션을 용이하게 할 수 있습니다.

위 내용은 Figma 프로토 타입 : 유용한 모형에 대한 빠른 단계별 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!