Figma에서 GIF를 내보내는 방법

장치 링크

기계적 인조 인간
아이폰
맥
윈도우
장치가 없습니까?

개발자 및 디자인 게임을 다음 단계로 끌어올릴 방법을 찾고 계십니까? Figma는 사용자가 오디오, 비디오 및 애니메이션 효과로 채워진 풍부한 프로토타입을 만들 수 있는 놀라운 도구입니다. 그러나 프로토타입의 느낌과 기능을 제대로 테스트하려면 GIF로 내보내고 실제로 볼 수 있어야 합니다.

이 가이드는 PC 또는 모바일 장치를 사용하여 Figma 프로토타입을 GIF로 내보내는 방법을 설명합니다.

1. PC의 Figma에서 GIF로 내보내는 방법

Figma에서 애니메이션 GIF를 내보내는 가장 간단한 방법은 TinyImage 플러그인을 사용하는 것입니다. 플러그인을 시작하고 사용하려면 먼저 Figma 계정에 로그인하고 "커뮤니티" 섹션으로 이동해야 합니다.

플러그인 다운로드 방법:

검색 상자에 "TinyImage"를 입력합니다.
"플러그인" 섹션에서 "TinyImage Compressor" 아이콘을 찾습니다.
아이콘 옆에 있는 설치 버튼을 클릭합니다.

플러그인으로 GIF 만들기:

플러그인 창 상단에서 “GIF 만들기” 버튼을 누릅니다.
Figma 캔버스에서 레이어를 선택합니다. GIF의 프레임 역할을 합니다.
TinyImage 창 하단에서 "선택한 레이어 사용" 옵션을 누릅니다. 선택한 순서대로 창 중앙에 레이어 슬라이드쇼가 표시됩니다.
미리보기 아래에서 레이어 아이콘을 클릭한 다음 왼쪽 또는 오른쪽으로 드래그하여 순서를 전환합니다.
재생 속도를 조정하려면 슬라이드쇼 아래에 있는 작은 "재생" 버튼을 누릅니다.
시간 지연 컨트롤 옆에서 GIF가 반복되는 횟수를 선택합니다. 기본 설정은 "무한"입니다. "무한" 옵션을 클릭하여 비활성화하고 옆에 있는 상자에 원하는 루프 수를 입력합니다.
시간 지연 및 루프 옵션 아래 필드에서 GIF 크기를 조정합니다.
레이어에 투명한 테두리가 있는 경우 창 하단에 있는 "투명한 배경" 버튼을 눌러 GIF에 표시되도록 합니다.
왼쪽 하단 모서리에서 GIF의 이미지 품질을 선택합니다. 레이어의 모든 기능을 보존하려면 속도를 약 80 또는 90으로 설정하는 것이 가장 좋습니다.
"디더링" 컨트롤은 "디더링 없음"으로 설정해 둡니다.
TinyImage 창 상단에 있는 "GIF 내보내기" 버튼을 누릅니다.
프레임이 병합되어 GIF를 형성하고 자동으로 다운로드되어 다운로드 파일에 저장됩니다.

레이어링에 대한 참고 사항

레이어 축소판 위의 드롭다운 메뉴를 사용하면 레이어를 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 재생할 수도 있습니다. 그러나 GIF의 최종 모양을 더 잘 제어하려면 프레임을 수동으로 주문하는 것이 가장 좋습니다.

재생에 대한 참고 사항

시간 측정 라인에서 버튼을 움직여 기본 재생 속도를 설정합니다. 그러나 특정 프레임의 재생 속도를 다르게 하려면 썸네일을 클릭하고 그 아래에 있는 상자에서 속도를 설정하면 됩니다.

2. 모바일 장치의 Figma에서 GIF로 내보내는 방법

Figma 프로토타입은 종종 슬라이딩 탭, 스와이프 옵션 및 드롭다운 메뉴와 같은 고급 애니메이션과 함께 제공됩니다. GIF로 저장하면 실제 디자인을 쉽게 선보일 수 있습니다. 그러나 모바일 앱에서는 사용자가 프로토타입을 미리 볼 수만 있습니다. 내장된 내보내기 지원은 없지만 앱을 화면 녹화하고 비디오를 GIF로 변환하여 문제를 해결할 수 있습니다.

iPhone의 Figma에서 GIF로 내보내는 방법

iPhone에서 프로젝트를 GIF로 저장하려면 먼저 Figma 앱을 화면 녹화하고 Shortcuts 앱으로 GIF를 만듭니다.

iPhone에서 Figma를 화면 녹화하려면:

Figma 모바일 앱을 실행하고 GIF로 변환하려는 프로젝트를 엽니다.
"설정"을 입력하고 "제어 센터"를 선택합니다.
"컨트롤 사용자 지정"을 선택하고 "화면 녹화" 옆에 있는 녹색 버튼을 탭하여 기능을 활성화합니다.
"제어 센터"로 돌아갑니다.
"화면녹화" 버튼을 눌러주세요.
빨간색 버튼을 클릭하여 녹음을 마칩니다.

녹음은 일반적으로 사진 앱에 저장됩니다.

비디오를 GIF로 변환하기 위해 iPhone에 바로 가기 도구가 사전 설치되어 있는지 확인하십시오. App Store에서 도구를 다운로드할 수도 있습니다.

iPhone에서 비디오를 GIF 파일로 변경하는 방법은 다음과 같습니다:

앱을 열고 인터페이스 하단으로 이동하여 "갤러리" 카드를 선택합니다.
검색 메뉴 아래의 "시작 바로 가기" 탭을 누릅니다.
화면 하단으로 스크롤하여 "GIF 만들기" 섹션을 클릭합니다.
GIF 바로 가기를 활성화하려면 "바로 가기 추가"버튼을 누르십시오.
바로 가기가 설치되면 "내 바로 가기"로 돌아갑니다.
"GIF 만들기"를 탭하고 "확인"을 선택하여 앱과 사진 갤러리를 연결합니다.
비디오를 탐색하고 GIF로 전환할 비디오를 선택합니다.
슬라이더를 사용하여 GIF에 포함할 프레임을 선택합니다.
변경 사항을 기록하려면 "저장"을 누릅니다. 새 GIF 파일이 태블릿의 사진 앱에 저장됩니다.
바로 가기 앱을 종료하려면 "완료"를 클릭하십시오.

Android 기기의 Figma에서 GIF로 내보내는 방법

Figma 앱을 사용하면 사용자가 프로토타입을 미리 볼 수 있지만 내보낼 수는 없으므로 Android 기기에서 미리 보기를 녹화하여 나중에 비디오를 GIF로 변환할 수 있습니다.

Android에서 Figma를 화면 녹화하는 방법:

앱을 실행하고 프로젝트 미리보기를 엽니다.
화면 상단에서 두 번 스 와이프하고 "화면 녹화"를 선택하십시오. 표시되지 않으면 오른쪽으로 스와이프해 보세요. 때로는 숨겨진 메뉴를 표시하기 위해 화면 상단에 있는 "편집" 아이콘을 탭해야 합니다. "화면 녹화" 기능도 있을 수 있습니다.
프로토타입 미리보기를 탭하여 녹화할 것임을 나타냅니다.
"시작" 버튼을 클릭합니다. 카운트다운이 끝나면 화면이 녹화됩니다.
녹화를 중지하려면 아래로 스와이프하고 '스크린 레코더' 카드를 탭합니다.

Figma 미리보기 동영상은 Android 사진 앱에 저장됩니다. GIPHY 앱으로 GIF로 변환할 수 있습니다.

Android 기기에서 비디오를 GIF로 변환하려면:

기기에 GIPHY 앱을 설치하고 실행합니다.
가입하고 GIPHY 계정을 만드십시오.
인터페이스의 오른쪽 상단에 있는 "만들기" 버튼을 누릅니다.
카메라에 액세스하려면 앱을 활성화하십시오.
Android 갤러리에서 동영상을 선택하세요.
비디오 길이를 조정합니다. GIPHY 앱을 사용하면 텍스트 및 스티커와 같은 요소를 파일에 삽입할 수 있습니다.
앱 하단의 "화살표" 아이콘을 클릭합니다.
"GIF 공유"를 선택하고 "GIF 저장"을 선택합니다.

제한 없이 GIF 내보내기

당신이 숙련된 개발자든 아마추어 디자이너이든 관계없이 GIF 형식으로 다른 사람에게 자신의 작업을 편리하게 보여줄 수 있는 방법을 가질 자격이 있습니다. Figma 앱에서 창작물을 미리 볼 수 있지만 인터넷 연결이 끊어지면 디자인에 액세스하는 것이 어려운 작업이 될 수 있습니다. Figma가 사용자 친화적인 내보내기 솔루션을 출시할 때까지 기사에서 설명한 방법을 사용할 수 있습니다.

이 가이드가 사용 중인 장치에 관계없이 Figma 창작물에서 고품질 GIF를 얻는 방법을 더 잘 이해하는 데 도움이 되었기를 바랍니다.

웹 또는 모바일 버전의 Figma를 사용하십니까?

GIF를 내보내는 데 선호하는 방법은 무엇입니까? 아래 의견란에 알려주십시오.

Tags: #Figma #GIF #내보내기 #디자인 #프로토타입

32 Comments

철수 - 02/21/2025 03:06

GIF 내보내기, 이 방식인데 어떻게 사용하는지 잘 설명해주세요. GIF에 대해 더 알고 싶어요.
다영 - 02/23/2025 21:05

이제부터 GIF를 많이 만들어야겠어요! 멋진 아이디어네요. 추천해 주셔서 감사합니다
채원 - 02/25/2025 00:26

포스팅 감사해요! GIF에 대해 많이 배웠습니다. 다음번엔 영상도 만들어봐야겠네요
치우 - 02/26/2025 13:23

GIF를 만들 때 해상도가 중요한 거 맞죠? 해상도 조절 동영상도 있으면 좋겠어요
지민 - 02/26/2025 16:17

GIF 만드는 게 이렇게 간단할 줄 몰랐어요! 이제 저도 멋진 애니메이션을 만들 수 있을 것 같아요. 감사합니다!
희정 - 02/27/2025 03:30

이런 좋은 정보를 나눠주셔서 감사해요! Figma로 작업하는 모든 사람에게 필독이네요
하나 - 03/02/2025 14:41

Figma 스킬 배우는 중인데, GIF 내보내기를 통해 디자인 작업이 더 재미있어졌어요. 최고
소율 - 03/02/2025 16:06

내가 디자인한 애니메이션을 친구들과 공유할 수 있어서 정말 기뻐요. 이 방법 덕분이에요!
소라 - 03/03/2025 15:38

GIF 내보내기를 다음 프로젝트에 바로 써먹어야겠어요! 너무 기쁘네요
지윤 - 03/06/2025 12:57

이런 정보가 있어 정말 감사해요! 디자인 할 때 도움 많이 받아요
승민 - 03/07/2025 04:30

GIF 내보내는 방법을 알게 되어 너무 좋아요. 디자인의 폭이 확 넓어졌네요!
준호 - 03/07/2025 15:29

와, Figma에서 GIF 내보내는 방법 정말 유용해요! 짧은 튜토리얼 잘 읽었습니다. 덕분에 작업이 한층 쉬워졌네요
병희 - 03/08/2025 05:00

혹시 Figma에서 GIF를 내보낼 때 다른 포맷으로 변환할 수 있는 팁도 알려주세요
하린 - 03/09/2025 06:12

정말 유익한 내용이에요! GIF가 많아지면 웹사이트도 더 재미있을 것 같네요.
준희 - 03/09/2025 15:58

짧고 굵은 튜토리얼! 이제 디자인에 움직임을 더할 수 있습니다. 정말 감사합니다!
수빈 - 03/10/2025 00:54

이런 유용한 정보를 공유해 주셔서 너무 감사합니다. 앞으로도 잘 활용하겠습니다
강민 - 03/10/2025 14:14

이 포스팅이 정말 도움이 되었어요. GIF 내보내기를 처음 해보는데, 결과가 좋네요
미나 - 03/11/2025 03:26

GIF 만드는 방법에 대한 게시글 잘 봤어요. 다른 팁도 더 있으면 좋겠어요!
진호 - 03/11/2025 05:28

정말 좋은 포스트입니다! 이제 프레젠테이션에 GIF를 넣어서 더욱 생동감 있게 만들 수 있을 것 같아요
세라 - 03/11/2025 13:26

GIF를 활용하는 방법도 알려주시면 좋을 것 같아요. 너무 기대되네요!
해니 - 03/13/2025 20:29

GIF 만들기 이렇게 간단하다니! 나도 시도해보고 나중에 결과 공유할게요!
리아 - 03/14/2025 11:06

너무 유용한 정보네요! 다들 한번 시도해보세요. 저도 반신반의했지만 해보니 진짜 쉬워요
아리 - 03/15/2025 14:14

GIF 만들기는 정말 기발한 아이디어입니다. 실습할 수 있도록 자료 만들어 보겠습니다!
민재 - 03/17/2025 02:05

GIF 내보내기 옵션이 다양한 것 같아요. 어떤 포맷이 가장 좋을까요
킴탱 - 03/19/2025 01:45

이 글 덕분에 GIF 제작이 이렇게 즐겁고 쉬워질 수 있다니 놀라워요. 한번 해봐야겠어요
태훈 - 03/23/2025 00:12

Figma에서 GIF 만드는 데 도움이 되는 좋은 자료 같아요! 추가적으로 팁이나 트릭이 있다면 공유해 주세요
준영 - 03/23/2025 19:12

와우, 이런 정보를 볼 수 있다니! 같은 작업을 하시는 분들이 많을 것 같아요. 감동이에요.
지오 - 03/25/2025 09:44

Figma로 디자인한 GIF를 소셜 미디어에 올리면 반응이 좋을 것 같아요. 기대되네요
영수 - 03/26/2025 08:48

GIF를 Figma에서 내보내는 방법에 대해 더 자세히 알고 싶어요. 예시가 있으면 좋겠다
상우 - 03/31/2025 12:00

부디 계속 이런 유익한 정보 공유해 주세요! 디자인 작업이 훨씬 수월해졌습니다
예진 - 03/31/2025 13:48

GIF가 유행하는 요즘, 이 방법을 알게 되어 정말 좋습니다. 방금 시도해봤는데 잘 됐어요!
주호 - 04/04/2025 02:21

서비스가 정말 도움이 되었어요! 화면 공유할 때 GIF가 있으면 더 좋겠네요