프로토타이핑

Smart Animate와 matching layers

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma 프로토타입의 Smart Animate는 레이어 이름이 같은 프레임을 인식하여 효과를 주는 것으로 알고 있습니다. 'Animate matching layers' 옵션과는 어떤 차이가 있나요?

답변

Smart Animate와 'Animate matching layers'는 밀접하게 관련되어 있지만, 정확히는 'Animate matching layers'가 Smart Animate의 동작 방식을 제어하는 옵션 중 하나입니다.

Smart Animate의 기본 동작:

Smart Animate는 두 프레임 간에 동일한 레이어 이름을 가진 객체들을 찾아, 그 객체들의 위치, 크기, 회전, 투명도, 색상 등의 변화를 부드러운 애니메이션으로 연결해 줍니다. 이때, Smart Animate는 기본적으로 Fixed position으로 설정된 레이어에는 애니메이션 효과를 적용하지 않습니다. Fixed position은 스크롤 시에도 특정 위치에 고정되어야 하는 헤더, 푸터, 플로팅 버튼 등에 사용됩니다.

'Animate matching layers' 옵션의 역할:

'Animate matching layers'는 Smart Animate 설정 시 나타나는 체크박스 옵션입니다. 이 옵션을 체크하면, Smart Animate가 Fixed position으로 설정된 레이어에도 애니메이션 효과를 적용하도록 강제합니다.

주요 차이점 요약:

Smart Animate: 동일 레이어 이름 기반으로 변화를 감지하여 애니메이션을 생성하는 기능 자체.

Animate matching layers (옵션): Smart Animate가 Fixed position 레이어에도 적용될지 여부를 결정하는 설정. 이 옵션을 활성화하면 Fixed position 레이어도 Smart Animate의 대상이 됩니다.

예시:

스크롤 가능한 페이지에서 상단에 고정된 헤더(Fixed position)가 있다고 가정해 봅시다.

'Animate matching layers'를 체크하지 않은 경우: 헤더는 스크롤 시 고정된 상태를 유지하며, Smart Animate는 헤더의 변화에 애니메이션을 적용하지 않습니다.

'Animate matching layers'를 체크한 경우: 헤더가 Fixed position이더라도, Smart Animate는 두 프레임 간 헤더의 변화(예: 배경색 변경, 로고 크기 변경)에 애니메이션을 적용합니다. 이는 헤더가 스크롤에 따라 부드럽게 변하는 효과를 만들 때 유용합니다.

따라서 'Animate matching layers'는 Smart Animate의 특정 동작을 확장하여 Fixed position 요소에도 애니메이션을 적용할 수 있게 해주는 중요한 옵션입니다.