아이콘에 모션 더하기

완성 화면부터 확인합니다

알림, 새로고침, 장바구니와 검색 아이콘에 서로 다른 움직임을 적용했습니다. 네 움직임은 Motion/Duration과 Motion/Easing이라는 공통값을 함께 사용하므로 재생 시간과 속도 변화를 한 자리에서 조정할 수 있습니다.

네 아이콘의 크기, 색, 선 굵기와 위치는 유지하고 움직임만 다르게 설정했습니다.

정지 화면에서는 움직임의 차이를 볼 수 없으므로 아래 영상을 재생해 네 아이콘이 같은 구간 안에서 어떻게 반응하는지 확인합니다.

Figma에서 직접 내보낸 2.1초 영상입니다. 알림은 흔들리고 새로고침은 회전하며 장바구니는 눌리고 검색은 커졌다가 돌아옵니다.

아이콘	움직임	사용자에게 알리는 뜻
알림	좌우로 작게 흔듭니다.	새 알림이나 주의가 필요함을 알립니다.
새로고침	한 바퀴 회전합니다.	내용을 다시 불러오는 중임을 알립니다.
장바구니	아래로 눌렸다가 돌아옵니다.	상품을 담는 동작이 입력됐음을 알립니다.
검색	조금 커졌다가 돌아옵니다.	검색 동작을 시작했음을 알립니다.

공통값 두 개를 만듭니다

Timing은 움직임이 재생되는 시간이고 Easing은 움직임의 시작과 끝에서 속도가 변하는 방식입니다. 변수는 여러 움직임이 함께 쓰는 값에 이름을 붙여 한 자리에서 관리하는 기능입니다.

변수 이름	수업용 값	연결하는 항목
`Motion/Duration`	`0.42초`	네 모션의 Timing
`Motion/Easing`	`cubic-bezier(0.22, 1, 0.36, 1)`	네 모션의 Easing

Figma의 Variables 패널에서 위 두 변수를 만든 뒤 아이콘마다 설정한 모션의 Timing과 Easing에 연결합니다. 이 수업의 검증 보드에서는 Duration을 0.42초에서 0.70초로 바꾸자 네 모션의 재생 시간이 함께 늘어났으며, 확인을 마친 뒤 0.42초로 되돌렸습니다.

아이콘의 뜻을 먼저 적습니다

아이콘마다 사용자가 눌렀을 때 알아야 할 변화를 한 줄로 적습니다. 같은 모양의 움직임을 반복하기보다 알림은 흔들기, 새로고침은 회전처럼 기능과 바로 연결되는 움직임을 고르면 결과를 검수하기 쉽습니다.

Figma Agent에 첫 움직임을 요청합니다

아이콘 네 개가 들어 있는 바깥 프레임을 선택하고 아래 요청문을 Figma Agent에 입력합니다. Figma Agent는 선택한 디자인을 읽고 화면이나 요소를 수정하는 기능이며 계정과 베타 제공 상태에 따라 사용할 수 있는 범위가 달라질 수 있습니다.

붙여넣기

선택한 네 아이콘의 이름과 형태를 읽고, 뜻이 바로 느껴지는 작은 움직임을 각각 만들어 주세요.
알림은 좌우로 가볍게 흔들고, 새로고침은 한 바퀴 회전시키고, 장바구니는 아래로 눌렸다가 돌아오게 하고, 검색은 조금 커졌다가 돌아오게 해 주세요.
아이콘의 크기, 색, 선 굵기와 위치는 유지해 주세요.
모든 움직임의 재생 시간과 속도 변화는 기존 Motion/Duration과 Motion/Easing 변수에 연결해 주세요.
새 변수는 만들지 말아 주세요.

2026년 9월 3일 수업용 실행에서는 Figma Agent가 선택 대상을 다시 묻는 안내만 반환해 쓸 수 있는 편집을 만들지 못했습니다. 같은 요청을 반복하지 않고 Figma Motion에서 네 아이콘의 동작을 하나씩 설정한 뒤 직접 재생해 확인했습니다.

공통값을 바꾸고 다시 재생합니다

Variables 패널에서 Motion/Duration을 0.70초로 바꾼 뒤 네 아이콘을 다시 재생합니다. 일부 아이콘만 재생 시간이 그대로라면 해당 모션의 Timing이 공통 변수에 연결됐는지 확인합니다. 비교를 마치면 원래 값으로 되돌리고 Motion/Easing도 같은 방식으로 확인합니다.

디자인 정보를 코드 작업에 넘깁니다

MCP(Model Context Protocol, 디자인 도구의 정보를 코딩 도구에 전달하는 연결 방식)를 사용하면 Figma 노드의 이름, 모양과 모션 정보를 Codex 같은 코딩 도구에서 읽을 수 있습니다. Figma 데스크톱 앱에서 대상 프레임을 선택한 뒤 아래 요청문을 입력합니다.

붙여넣기

이 Figma 아이콘 보드의 모션 정보를 읽어 네 아이콘 버튼을 HTML과 CSS로 만들어 주세요.
Figma의 재생 시간과 속도 변화를 CSS 공통값으로 옮기고, 아이콘마다 움직임은 따로 유지해 주세요.
운영체제에서 움직임 줄이기를 켠 사람에게는 애니메이션을 재생하지 않게 해 주세요.
완성한 뒤 네 버튼을 직접 눌러 동작을 확인해 주세요.

수업용 보드에서는 Figma의 네 아이콘 노드에서 CSS(Cascading Style Sheets, 웹 화면의 모양과 움직임을 정하는 코드)와 Motion 코드 정보를 각각 읽었습니다. 아래 실습 화면은 그 정보를 바탕으로 같은 Duration과 Easing 값을 사용해 다시 만든 예시입니다.

네 아이콘을 직접 눌러 보기

완료 결과를 확인합니다

네 아이콘을 재생했을 때 흔들기, 회전, 누르기와 확대가 서로 구분됩니다.
네 모션에서 같은 Duration과 Easing 변수 이름을 확인할 수 있습니다.
Duration 값 하나를 바꾸면 네 모션의 재생 시간이 함께 달라집니다.
코드 화면에서 네 버튼을 눌렀을 때 Figma와 같은 종류의 움직임이 보입니다.
운영체제에서 움직임 줄이기를 켜면 애니메이션이 재생되지 않습니다.

막힐 때 확인합니다

Figma Motion이 보이지 않으면 현재 파일이 Figma Design인지, 계정에 해당 베타 기능이 열렸는지 확인합니다.
Agent가 아이콘을 찾지 못하면 네 아이콘이 들어 있는 바깥 프레임을 다시 선택합니다.
공통값을 바꿔도 일부만 달라지면 각 모션의 Timing과 Easing 연결을 다시 확인합니다.
코딩 도구가 모션 정보를 읽지 못하면 Figma 데스크톱 앱에서 대상 프레임을 선택했는지 확인합니다.

확인한 자료

공식 기능과 제공 조건은 2026년 9월 3일에 확인했습니다. Instagram 게시물은 작업 흐름을 조사하는 출발점으로만 사용했으며 원문 이미지와 문장은 이 페이지에 복제하지 않았습니다.