Figma는 요즘 많은 신기능 개발에 박차를 가하고 있다. 그 중 내가 주목하는 것은 인터랙티브 컴포넌트다. 이 기능에 의해, 재이용 가능한 인터랙티브 컴포넌트를 빠르게 조립해 클릭 가능한 프로토타입으로 디자인에 생명을 불어넣을 수 있다.
이 기능이 개발되기 전에는 인터랙티브 프로토타입을 만들 수 있었지만, 인터랙티브 기능을 보여주기 위해 여러 프레임을 복제하고 조정하는 데 많은 노력이 필요했다. 업데이트를 할 때 효율적인 프로세스가 아니라고 할 수 있다.
신기능의 차이는컴포넌트 수준에서 Variants 간 인터랙션을 정의할 수 있다는 것이다. 그런 다음 이러한 인터랙션은 컴포넌트에 새겨져, 컴포넌트의 모든 인스턴스에서 사용할 수 있다.
이전에는 전체 프레임을 연결하여 프로토타입을 만들었다. 그 후 Figma는 Variants 기능을 출시하여, 임의의 한 컴포넌트에 여러 상태를 정의할 수 있게 되었다. 이것은 여전히 인터랙션을 시뮬레이션하기 위해 해결 방법을 사용해야 한다는 것을 의미했다.
위에서 볼 수 있듯이 세 개의 체크박스와 관련된 인터랙션을 보여주기 위해, 이전에는 체크박스를 제외하고 모두 동일한 8개의 화면이 필요했다. 또한 이 8개의 화면 간에 정의된 24개의 인터랙션이 필요하다.
인터랙션 컴포넌트 기능은 Variants 기능을 기반으로 하므로 컴포넌트 내의 변형 간 인터랙션을 생성할 수 있다.
이러한 인터랙션은 다양한 트리거, 가장 일반적으로 "클릭 시", "드래그 시", "호버 중", "누르는 동안" 및 기타 트리거를 기반으로 작동하도록 설정할 수 있다. "딜레이 후"는 나중에 논의할 유용한 기능이다. 이를 통해 사전 정의된 지연 시간(즉, 사용자 상호 작용 없이) 후에 애니메이션을 제작할 수 있다.
체크박스 예제를 다시 사용하면, 컴포넌트에서 인터랙션을 정의함으로써 8개의 화면과 24개의 상호 작용이 바뀐다. 따라서 화면 1개와 인터랙션 2개만 수행된다.
작동원리
버튼의 호버 상태를 예로 보자.
시작하려면 디폴트와 호버에 대한 컴포넌트를 만든다.
Variants을 처음 사용하는 경우 먼저 Figma의 이 가이드를 확인하면 된다.
인터랙션 추가
1. 프로토타입 모드로 전환한다.
2. 컴포넌트의 디폴트를 선택한다. 프레임을 사용하여 프로토타입을 만들 때 보는 것과 동일한 파란색 프로토타이핑 노드가 컴포넌트에 표시된다. 이 노드를 구성요소의 "hover" 변형으로 드래그한다.
3. "호버 중"을 선택하여 호버 상태를 만든다.
4. Figma는 Variants 내에서 작업하고 있음을 인식하고, 새로운 옵션을 제공할 것이다. 이렇게 하면 한 Variants에서 다른 Variants으로 변경할 수 있다. Variants로 프로토타이핑할 때만 사용할 수 있는 옵션이다.
이제 이 컴포넌트는 호버 상태 인터랙션이 설정된다. 컴포넌트의 모든 인스턴스는 이제 이 새로운 속성을 상속한다.
이 인터랙션이 작동하는지 확인하려면, 컴포넌트를 프레임에 추가하고 프레임을 선택한 다음 프레젠테이션 버튼을 누른다.
일반 컴포넌트를 호버할 수 있는 것과 같이, 다른 컴포넌트에도 동일한 인터랙션을 줄 수 있다. 아래 예에서 좌측에 표시된 버튼과 메뉴 항목 컴포넌트에는 호버 인터랙션이 있다.
이런 컴포넌트는 우측 드롭다운 메뉴 컴포넌트 안에 중첩된다. 추가 클릭 인터랙션이 드롭다운 컴포넌트에 추가된다.
무언가를 변경해야 할 때 이 접근 방식이 얼마나 더 효율적인지 알 수 있다. 예를 들어 메뉴 항목 컴포넌트에서 호버 상태의 색상을 한 번 변경하면 드롭다운 메뉴 구성 요소의 인스턴스 세 개 모두에서 색상이 변경된다.
프로토타이핑 애니메이션
인터랙션 컴포넌트는 버튼, 스위치 및 드롭다운과 같은 표준 UI 구성 요소에서 인터랙션을 표현하기 위한 훌륭한 기능이다. 또한 Figma의 애니메이션 기능과 함께 사용하여 프로토타입의 단일 프레임 내에서 여러 애니메이션을 설정할 수 있다. 예를 들어 "스마트 애니메이트" 기능과 "딜레이 후" 트리거를 사용하여 애니메이션의 여러 단계에 대한 Variants가 있는 애니메이션 버튼의 컴포넌트를 설정할 수 있다. 또한 별도의 컴포넌트에 헤드라인 텍스트를 설정하여, 지연 후 애니메이션을 적용할 수 있다.
이것은 버튼 애니메이션의 각 단계에 대해서 7가지 Variants가 있는 버튼 컴포넌트를 설정하여 만들어졌다. 그런 다음, 각 Variants간의 인터랙션을 추가했다.
"딜레이 후" 트리거 및 스마트 애니메이트 기능을 사용해서, 공이 튀고 버튼이 되는 것을 시뮬레이션 할 수 있다.
헤드라인 텍스트는 별도의 딜레이 후 애니메이션을 적용하기 위해 다른 컴포넌트에 설정되었다.
그런 다음 이 두 컴포넌트를 프레임에 추가했다. 각 컴포넌트에 정의된 인터랙션 속성은 서로 독립적으로 작용한다.
단일 프레임에 여러 컴포넌트 (각각 고유한 애니메이션 규칙이 포함)를 추가하는 기능을 통해 프로토타입에서 풍부한 마이크로 애니메이션을 만들 수 있다.
결론
인터랙티브 컴포넌트 기능은 프로토타입을 만드는 사람들에게 반가운 추가 기능이다. 프로토타이핑 프로세스를 훨씬 덜 힘들고 모듈화하고 효율적으로 만든다. 이를 통해 디자이너는 개념을 실험하고, 디자인을 빠르게 반복하고, 궁극적으로 보다 발전되고 사실적인 프로토타입을 생성할 수 있다. 더 나은 프로토타입을 사용하면 사용자에게 테스트할 더 현실적인 프로토타입을 제공하므로, 사용성 테스트가 향상되어 더 풍부한 통찰력을 얻을 수 있다.
-
저자 : Padraic McElroy
원문 링크: https://uxdesign.cc/figmas-interactive-components-feature-a8ab624ef1c4
'ᴜx > ᴀʀᴛɪᴄʟᴇ' 카테고리의 다른 글
| 우버 디자이너가 Figma에서 256개의 새로운 디자인 시스템 구성 요소를 프로그래밍 방식으로 구축한 방법 (0) | 2022.03.30 |
|---|---|
| 고정 UI 요소를 디자인할 때 고려해야 할 사항 (1) | 2022.03.11 |
| 올바른 디자인 시스템 만들기 : 컴포넌트 (1) | 2020.11.10 |
| 디자인 검증: 디자인이 좋은지 어떻게 알 수 있을까? (2) | 2020.11.05 |
| 성공적인 디자인 핸드 오프, Design Handoff (0) | 2020.11.04 |
댓글