Figma

피그마 : 스마트 애니메이트로 애니메이션 만들기

Yellow_D 2021. 12. 22. 17:58

https://help.figma.com/hc/en-us/articles/360039818874

스마트 애니메이션은 일치하는 레이어를 찾고 차이점을 인식하며 프로토타입의 프레임 간에 레이어에 애니메이션을 적용합니다.

프로토타입을 만들 때 전환 목록에서 스마트 애니메이션 을 선택할 수 있습니다 . 스마트 애니메이션 을 다른 전환과 함께 적용 하여 매끄러운 애니메이션을 만들 수도 있습니다 .

스마트 애니메이션을 사용하면 고급 애니메이션을 빠르게 만들 수 있습니다. 사용 스마트 애니메이션 복제에 :

로딩 순서
시차 스크롤
드래그, 스와이프, 길게 누르기 등의 터치 제스처
슬라이더, 토글 및 스위치
콘텐츠 확장(더 보기 / 덜 보기)
당겨서 새로고침

당겨서 새로고침..

지원되는 속성

스마트 애니메이션은 여러 프레임에 걸쳐 있는 일치하는 레이어를 찾습니다. Figma는 계층의 이름 과 계층 내 위치를 모두 고려합니다 .

프레임 간에 일치하는 레이어의 경우 Figma는 변경된 사항을 인식하고 전환을 적용하여 프레임 간에 애니메이션을 적용합니다.

전체 개체 또는 구성 요소는 물론 구성 요소 또는 그룹 내의 개별 레이어에 스마트 애니메이션을 적용할 수 있습니다.

개체의 속성 중 하나 이상이 프레임 간에 변경될 가능성이 있습니다. 아래에서 지원하는 각 속성을 분리했으므로 예상되는 사항을 알 수 있습니다.

규모

프레임 사이에 개체의 크기가 변경되면 Figma는 개체를 축소 또는 확대하는 애니메이션을 적용합니다.

위치

Figma는 개체의 위치, x 및 y 좌표가 변경되었는지 인식합니다. 그런 다음 현재 위치에서 대상 프레임의 위치로 이동하는 개체에 애니메이션을 적용합니다.

불투명

Smart Animate는 레이어나 개체의 불투명도도 인식할 수 있습니다. 불투명도를 조정하여 프레임 사이에 개체가 나타나거나 사라지도록 할 수 있습니다.

레이어 가시성을 토글하는 대신 레이어의 불투명도를 0%로 설정합니다. Figma는 레이어의 불투명도에 애니메이션 효과를 주기 위해 디졸브 전환을 적용합니다.

레이어의 채우기 속성과 레이어 속성 을 통해 불투명도를 조정할 수 있습니다 . 스마트 애니메이트는 둘 다에 적용됩니다.

전체 레이어의 불투명도를 조정하는 것이 좋습니다. 오른쪽 사이드바 의 디자인 탭 에서 불투명도 레이어 설정을 조정 합니다.

회전

스마트 애니메이션은 레이어의 회전과 방향도 고려합니다.

다음을 사용하여 개체 를 회전 할 수 있습니다 .오른쪽 사이드바 또는 캔버스 자체의 회전 필드. 회전 커서가 나타날 때까지 개체의 모서리 경계 위로 마우스를 가져갑니다. 나타납니다.

단일 레이어를 한 번에 회전하거나 단일 기준점을 중심으로 레이어 그룹을 회전합니다.

채우다

Figma는 개체 채우기에 대한 모든 변경 사항을 스마트하게 애니메이션화합니다. 이를 통해 단색, 그라디언트 및 이미지 채우기 간의 변경 사항을 애니메이션할 수 있습니다.

주의 사항

Figma는 효과 변경 또는 모양 간 이동에 대해 스마트 애니메이션을 지원하지 않습니다 . 속성이 지원되지 않는 경우 Figma는 기본 디졸브 전환을 적용합니다 .
Figma는 오버레이 작업에 대해 스마트 애니메이션을 지원하지 않습니다 . 이는 Figma가 오버레이를 새 프레임으로 취급하기 때문입니다. 오버레이에 일치하는 레이어가 있는 경우 오버레이 간에 교체 할 때 스마트 애니메이션을 사용할 수 있습니다 .
대상 프레임에 새 레이어를 도입하면 스마트 애니메이트가 레이어를 뷰로 분해합니다.
레이어의 속성이 두 프레임 간에 동일하게 유지되는 경우 Figma는 해당 레이어에 전혀 애니메이션을 적용하지 않습니다. 이것은 상태 표시줄과 메뉴, 그리고 다른 UI로 이동하고 싶지 않을 때의 상호 작용에 유용합니다.
당신이 선택하면 체크 박스를 스크롤 할 때 수정 위치를 어떤 레이어, FIGMA은 목록에 추가됩니다 고정 층. 스마트 애니메이션 은 스마트 애니메이션 을 다른 전환과 결합 할 때 레이어를 다르게 처리합니다 .

스마트 애니메이트 적용

프로토타입에서 스마트 애니메이션을 사용할 수 있는 두 가지 방법이 있습니다. 독립 실행형 전환으로 또는 Smart animate 를 사용하여 레이어 를 다른 애니메이션과 일치 시킵니다.

스마트 애니메이트

전환 필드에서 스마트 애니메이션 을 선택 하여 두 프레임 사이에 애니메이션을 적용합니다.

오른쪽 사이드바에서 프로토타입 탭을 엽니다 .
캔버스에서 레이어, 그룹 또는 프레임을 선택합니다. 연결 노드가 오른쪽 가장자리에 나타납니다.
노드를 클릭하고 다음 프레임으로 끌어 연결을 만듭니다.
트리거 및 작업을 선택하여 오른쪽 사이드바에서 상호 작용 을 정의합니다 . Figma는 두 번째 프레임을 대상으로 설정합니다.
에서 애니메이션 섹션을 선택 스마트 애니메이션 전환 필드에서입니다.
전환에 이징 을 적용 하거나 지속 시간을 변경합니다 (선택 사항).
스마트 애니메이션을 적용할 다른 프레임에 대해 반복합니다.
클릭 프레젠테이션 보기에서 프로토타입 을 열려면 도구 모음에서

아래 예제에는 일치하는 레이어가 있는 세 개의 프레임이 있습니다. 우리는 스마트 애니메이트가 즐겨찾기 목록에서 Abel Tasman Coast Track을 제거하기를 원합니다.

스마트 애니메이션은 이제 프로토타입의 각 프레임 사이를 부드럽게 이동합니다!

스마트 애니메이트 매칭 레이어

다른 기본 전환을 사용하는 동안 프로토타입의 일부 레이어를 스마트하게 애니메이션하려면 일치하는 레이어 에 스마트 애니메이션 적용 확인란을 선택할 수 있습니다 .

Figma는 스마트 애니메이션을 다른 전환과 함께 사용할 때 고정 레이어를 다르게 취급합니다.

일치하지 않는 레이어: Figma는 선택한 기본 전환 을 사용합니다 .
일치하는 레이어: Figma는 지원되는 속성에 대한 모든 차이점을 스마트하게 애니메이션화 합니다.
일치하는 고정 레이어 : Figma는 전환을 적용하지 않습니다.
일치하지 않는 고정 레이어 : Figma는 선택한 전환 대신 디졸브 전환을 적용합니다.

스마트 애니메이션 일치 레이어 를 사용하려면 애니메이션을 조정할 때 오른쪽 사이드바에 있는 상자를 선택합니다.

아래 예제에는 세 프레임 모두에 존재하는 상태 표시줄과 탐색이 있습니다. 우리는 탭 사이를 전환할 때 이것들이 제자리에 있기를 원합니다.

프레임 간 이동을 위해 푸시 전환을 선택했습니다 . 스마트 애니메이션 일치 레이어 옆의 확인란을 선택하지 않도록 선택합니다 .

프로토타입을 보면 대상 프레임의 모든 것이 푸시 전환을 사용하는 것을 볼 수 있습니다 . 이것은 우리가 프로토타입에서 별도의 화면 사이를 이동하고 있다는 것을 매우 분명하게 보여줍니다.

Smart animate matching layer 옆의 확인란을 선택하면 상태 표시줄과 탐색이 제자리에 유지되는 반면 다른 콘텐츠는 Push 를 사용합니다 .

스마트 애니메이션을 위한 팁

스마트 애니메이트 이전에 Figma는 레이어 이름에 큰 의미를 두지 않았습니다. Smart Animate는 레이어 이름 및 계층 에 의존 하므로 다른 접근 방식을 사용해야 할 수 있습니다.

아래에서 예상치 못한 스마트 애니메이트 결과 문제를 해결하는 몇 가지 방법을 설명했습니다.

팁! 프로토타입을 제작하는 동안 기간을 늘리는 것이 좋습니다. 이를 통해 무슨 일이 일어나고 있는지 확인하고 조정할 수 있습니다.

레이어 이름

스마트 애니메이션용 프레임을 빠르게 만드는 한 가지 방법은 프레임을 복제 하는 것입니다. 이렇게 하면 각 프레임 간에 이름 지정이 일관되게 유지됩니다. 그런 다음 필요에 따라 각 프레임에 레이어를 추가 및 제거할 수 있습니다.

Figma는 복제하거나 복사하여 붙여넣는 방식에 따라 프레임과 레이어의 이름을 지정합니다.

프레임 내에서: Figma는 레이어를 순차적으로 번호를 매깁니다. 예: 프레임 1, 프레임 2 등
프레임 간 : Figma는 같은 이름을 사용합니다. 예: Rectangle 1한 프레임에서 복사하면 Figma는 Rectangle 1다음 프레임에서와 같이 붙여넣습니다 .

프레임 간에 존재하지만 각각의 이름이 다른 개체 또는 레이어가 있을 수 있습니다. 또는 반대의 문제가 있을 수 있습니다. 즉, 일치시키고 싶지 않은 이름이 모두 같은 레이어입니다.

왼쪽 사이드바 의 레이어 패널 을 사용하여 레이어 이름을 보고 업데이트할 수 있습니다 . 일괄적으로 레이어 이름 을 바꾸는 방법을 알아보세요 .

일치하는 레이어 보기

Figma는 또한 프레임 간에 존재하거나 일치하는 레이어나 개체를 더 쉽게 식별할 수 있도록 합니다. 이것은 모든 레이어, 그룹, 프레임 및 구성 요소에 적용됩니다.

오른쪽 사이드바에서 프로토타입 탭을 엽니다.
캔버스에서 개체 또는 레이어 위로 마우스를 가져갑니다.
Figma는 해당 레이어가 존재하는 다른 프레임에서 해당 레이어를 강조 표시합니다.

레이어 순서 및 계층

Smart animate 및 Smart animate 일치 레이어 는 레이어 순서 또는 레이어 계층을 고려합니다.

일반적으로 Move in 또는 Slide in 은 원본 프레임 위의 전체 대상 프레임을 전환합니다. 스마트 애니메이션 일치 레이어를 사용하면 Figma가 계층 구조를 기반으로 레이어를 이동하거나 슬라이드하므로 혼란스럽거나 예상치 못한 결과가 발생할 수 있습니다.

아래 스크린샷에는 프레임( Explorer 1및 Explorer 2) 사이에 일치하는 두 개의 개체가 있습니다 . 다음은있는 상태 표시 줄 및 탐색 .

일치하는 레이어 위에 레이어가 있는 경우 Figma는 대상 프레임 위에서 레이어를 애니메이션합니다. 아래 스크린샷 Explorer 1에서 대상 프레임 위에 레이어가 나타나는 것을 볼 수 있습니다 .

대신 일치하는 레이어를 계층의 맨 위로 이동하여 전체 대상 프레임이 원본 프레임 위로 미끄러지도록 할 수 있습니다.

그룹 레이어

스마트 애니메이션할 대상을 보다 정확하게 결정하기 위해 Figma는 이름 과 계층 구조를 기반으로 레이어를 일치 시킵니다. 또한 프레임 간의 레이어 일치를 빠르게 해제할 수 있습니다.

각 프레임에 5개의 직사각형이 있다고 가정해 보겠습니다. 이러한 사각형은 각 프레임 간에 서로 다른 내용을 포함합니다. 우리는 그들을 라벨 Trip 1에 Trip 5모두 세 개의 프레임에 걸쳐.

푸시 전환을 적용하려고 하면 스마트 애니메이션이 이를 일치하는 레이어로 인식합니다. 이러한 사각형을 새 콘텐츠로 처리하는 대신 Figma smart는 해당 위치의 변경 사항에 애니메이션을 적용합니다.

이 동작을 변경하기 위해 각 프레임에서 직사각형 이동을 그룹화하고 고유한 이름을 지정할 수 있습니다.

전환을 미리 볼 때 스마트 애니메이션은 더 이상 이러한 레이어를 일치하는 레이어로 인식하지 않습니다. 우리의 콘텐츠가 함께 푸시 되어 프로토타입이 훨씬 더 사실적으로 보입니다.

슬라이드 인 및 무브인 기능이 있는 스마트 애니메이션

슬라이드 또는 이동 전환과 함께 스마트 애니메이션 일치 레이어 를 사용할 때 고려해야 할 몇 가지 사항이 있습니다 .

선택하면 Figma는 프레임 간에 일치하는 레이어에 애니메이션을 적용합니다. 이는 Figma가 일반적으로 하는 것처럼 초기 프레임(A)에 대해 전체 대상 프레임(B)을 애니메이션할 수 없음을 의미합니다.

Figma는 또한 애니메이션의 일부로 프레임의 채우기를 포함하지 않습니다. 이로 인해 레이어가 겹치게 되어 전환이 지저분해 보일 수 있습니다.

이를 방지하기 위해 다른 레이어 뒤에 단색 채우기가 있는 직사각형을 추가할 수 있습니다. 이제 프로토타입을 볼 때 각 프레임의 콘텐츠가 함께 들어갑니다.