영상 튜토리얼: Figma를 Adobe After Effects로 변환
이 영상에서는 Convertify 플러그인으로 Figma에서 바로 디자인을 After Effects로 자동 변환하는 방법(클릭 한 번)을 보여 줘요.
Figma 디자인을 Adobe After Effects용으로 내보내려면, 아래 단계에 따라 .xd 파일로 변환하고 다운로드해 연 다음, 이 파일을 Adobe XD에서 Adobe After Effects로 내보내면 돼요.
Adobe After Effects에서 쓸 Figma 페이지 하나 선택해 변환하기
Convertify 플러그인이 실행되면 Export from Figma 탭을 클릭하고, 워크플로 선택기에서 Export Figma to Adobe After Effects를 선택한 다음, Adobe After Effects에서 쓸 Figma 페이지를 선택하세요.
플러그인은 현재 보고 있는 Figma 페이지를 자동으로 내보내요. 내보낼 Figma 페이지를 바꾸려면 Figma 왼쪽 열의 Pages 제목 아래에 있는 Figma 파일의 페이지를 클릭하세요.
Figma 페이지를 선택했으면 Convertify 플러그인에서 Export This Page 버튼을 클릭해 디자인을 Adobe XD 파일로 변환하세요(이 파일을 After Effects로 내보내게 돼요). 그러면 자동 변환이 시작돼요.
예상 소요 시간 예상 시간(예: ~14 seconds to convert 555 layers)은 Figma 페이지의 레이어 수를 바탕으로 변환에 걸리는 시간을 대략 알려 줘요. Figma 페이지에 큰 이미지가 있으면 Figma 페이지를 Adobe XD 파일로 변환하는 데 시간이 더 걸릴 수 있어요.
Adobe XD는 한 문서에 여러 페이지를 지원하지 않아요. 여러 페이지 선택은 Sketch 내보내기에만 적용돼요. Adobe XD 앱은 현재 단일 페이지 파일만 지원해요.
페이지에서 선택한 Figma 프레임을 XD로 내보내기
Figma 페이지 전체를 Adobe XD 파일로 변환하고 싶지 않다면(이 파일을 After Effects로 내보내게 돼요), Figma 디자인의 특정 프레임 레이어만 Adobe XD로 변환할 수도 있어요. 변환할 Figma 프레임을 선택한 다음 Convertify 플러그인에서 Export Selected Frames 버튼을 클릭하세요. 그러면 자동 변환이 시작돼요.
Adobe XD는 한 문서에 여러 페이지를 지원하지 않아요. 여러 페이지 선택은 Sketch 내보내기에만 적용돼요. Adobe XD 앱은 현재 단일 페이지 파일만 지원해요.
After Effects로 내보낼 .xd 파일 다운로드
Convertify가 Figma 페이지 처리를 마치면 확인 메시지가 표시돼요. Download .xd (for exporting to AE) 버튼을 클릭해 .xd 파일을 다운로드하세요.
Figma에서 .xd 파일을 컴퓨터로 다운로드했다면 파일 탐색기에서 파일이 저장된 디렉터리를 여세요. 내보낸 .xd 파일을 더블 클릭하면 컴퓨터에 설치된 Adobe XD에서 열려요.
Figma에서 다운로드한 파일 저장하기 Figma 데스크톱 앱을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 웹 브라우저에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 Downloads 폴더에 저장돼요).
Adobe XD에서 After Effects로 아트보드 내보내기
Adobe XD 설치 Mac 또는 Windows 사용자이고 유료 Adobe CC 계정이 있다면 Creative Cloud에서 Adobe XD를 설치할 수 있어요(또는 .dmg 설치 파일을 여기에서 바로 다운로드할 수 있어요). 이렇게 하면 컴퓨터에서 Adobe XD를 실행할 수 있을 거예요. Windows용 독립 실행형 설치 파일도 온라인에서 찾을 수 있어요.
Adobe XD에서 .xd 파일을 열었으면, After Effects에서 쓸 아트보드를 페이지에서 클릭한 다음 File → Export → After Effects를 클릭해 XD 자체 기능으로 아트보드를 After Effects로 내보낼 수 있어요.
XD에서 아트보드가 After Effects로 내보내지지 않으면, 먼저 오른쪽 패널에서 Mark for Export 체크박스를 선택해 보세요.
After Effects에서 내보낸 레이어 보기
Adobe XD에서 선택한 아트보드에 대해 File → Export → After Effects를 클릭하면, 컴퓨터에서 Adobe After Effects 앱이 자동으로 열리고(앱이 설치되어 있어야 해요) 선택한 아트보드와 그 안의 모든 레이어가 Adobe XD에서 After Effects 타임라인으로 내보내져요.
내보내기가 끝나면 새 After Effects 파일을 저장하고 Adobe XD를 닫으세요. 이제 원래 Figma 파일에 있던 레이어를 After Effects에서 모두 애니메이션으로 만들 수 있으니, 모션 디자인 작업을 이어 가세요.
Adobe After Effects 내보내기 옵션 설정
Figma 디자인을 Adobe After Effects로 내보내기 전에(.xd 파일 가져오기를 통해) 유용한 선택 설정을 구성할 수 있어요.
* 접두사가 붙은 레이어를 이미지로 렌더링
Render layers with * prefix (eg. "* Frame") as images 토글을 켜면, 레이어 이름이 “*”로 시작하는 Figma 레이어(예: “*Frame 1”)가 원래 레이어 유형 대신 이미지 레이어로 자동 내보내져요.
아트보드에 참조 이미지 오버레이 포함
Include reference image overlays for artboards 토글을 켜면, 내보낸 파일의 각 아트보드 위에 그 아트보드의 참조 이미지가 레이어 불투명도 50%로 자동 추가돼요. 직접 수정하거나 레이어 위치를 미세 조정할 때 도움이 돼요.
Figma 아트보드의 모든 하위 레이어 그룹 해제
Ungroup all Figma artboard child layers 토글을 켜면 Figma 파일의 모든 “Group” 레이어가 자동으로 그룹 해제돼요.
After Effects 컴포지션 배율 조정
Scale Comps 옵션을 선택하면 기존 Figma 아트보드가 @0.25x - @4x 범위의 배율로 자동 조정돼요(기본값은 @1x이며, 이 경우 디자인 배율은 전혀 바뀌지 않아요). 변환된 .xd 파일을 After Effects로 내보낼 때 컴포지션이 확대되거나 축소되도록 해 줘요.
설치된 폰트의 위치를 더 정확하게 맞추기
Adobe XD는 텍스트 세로 정렬 같은 텍스트 속성을 지원하지 않고, 행간도 Figma와 다르게 계산해요.
More accurate positioning for installed fonts (slower) 토글을 켜면, 디자인에 쓰인 폰트 중 컴퓨터에 설치된 폰트에 대해 Figma 텍스트 값을 XD에 맞게 더 정확하게 내보내요.
변환 시간이 더 오래 걸려요. More accurate positioning for installed fonts (slower) 옵션을 켜면 텍스트 레이어 수에 따라 변환이 평소보다 훨씬 느려질 수 있어요.
Figma와 After Effects의 차이 이해하기
Convertify는 After Effects로 내보낼 수 있도록 Figma의 모든 레이어와 속성을 Adobe XD로 최대한 변환해요. 다만 Adobe XD가 지원하는 기본 기능이 Figma보다 적기 때문에 어쩔 수 없는 제한이 있어요.
Adobe XD에서 지원되지 않는 Figma 기능(XD에서 After Effects로 내보내지지 않음)
다음 기능은 Figma에는 있지만 Adobe XD 기본 기능이 아니므로, 파일을 After Effects로 내보낼 때 함께 옮겨지지 않아요.
- 상위 아트보드 숨기기
- 회전된 상위 아트보드
- “arc” 속성이 있는 타원
- 한 레이어에 여러 채우기/선 적용
- 모서리 반경을 쓰는 벡터 레이어
- 그룹에 적용한 선/채우기
- 텍스트 레이어의 세로 정렬
- 중첩된 레이어 마스크
관련 Convertify 가이드
- Figma에서 Adobe After Effects로 변환하는 단계별 튜토리얼(영어)을 따라 해 보세요.
- 바탕이 되는 Figma에서 Adobe XD로 내보내기 워크플로를 확인하세요.
- 다른 가져오기·내보내기 형식은 Convertify Figma 플러그인에서 살펴보세요.