Figma에서 SVG 파일을 내보내는 방법

정확하게 Figma에서 SVG 파일을 내보내는 방법을 알아보세요. 이 간단한 가이드를 따라 웹, 디자인 또는 개발 프로젝트에 사용할 벡터 자산을 다운로드하세요.

AI로 멋진 제품 영상 & 문서를 제작하세요

이 튜토리얼은 Trupeer를 사용하여 5분 이내에 제작되었습니다.

무료로 만들기

자세한 단계:

1. 요소를 선택합니다: SVG로 내보내려는 특정 프레임, 그룹 또는 개별 오브젝트를 선택하세요. 
2. 내보내기 섹션을 찾습니다: Figma 인터페이스 오른쪽 사이드바에서 "Export" 섹션을 찾습니다. 
3. 형식을 선택합니다: "Export" 옆의 "+" 버튼을 클릭해 내보내기 설정을 추가한 다음, 형식 드롭다운에서 "SVG"를 선택합니다. 
4. 파일을 내보냅니다: "Export" 버튼을 클릭하고 컴퓨터에서 SVG 파일을 저장할 위치를 선택합니다. 

단계별 가이드: Figma에서 SVG 파일 내보내는 방법

1단계

SVG 파일로 변환하려는 특정 레이어를 선택하세요.

Select the specific layer you wish to convert into an SVG file.

2단계

계속하려면 더하기(+) 아이콘을 클릭하세요.

Click on the plus icon to proceed.

3단계

이 드롭다운 메뉴를 클릭하고,

Click on this dropdown menu,

4단계

파일의 SVG 형식을 선택하세요.

Select the SVG format for your file.

Figma에서 SVG 파일을 내보낼 때의 프로 팁

  1. 오브젝트 또는 프레임 선택
    SVG로 내보내려는 특정 오브젝트, 아이콘 또는 프레임을 클릭하세요. 원하는 요소만 선택되었는지 확인하세요.

  2. 오른쪽 사이드바의 내보내기 섹션으로 이동
    오른쪽 사이드바에서 아래로 스크롤해 "Export" 섹션을 찾으세요. 접혀 있다면 펼쳐야 할 수 있습니다.

  3. 내보내기 설정을 추가하려면 "+" 아이콘을 클릭
    선택한 오브젝트 또는 프레임에 대한 내보내기 옵션을 활성화하려면 내보내기 라벨 옆의 "+"를 클릭하세요.

  4. 형식 드롭다운에서 "SVG"를 선택
    내보내기 형식 드롭다운 메뉴에서 사용 가능한 형식 목록(PNG, JPG, PDF, SVG 등) 중 "SVG"를 선택하세요.

  5. "Export" 버튼을 클릭
    SVG를 선택한 후 "Export [Layer Name]" 버튼을 클릭하세요. Figma가 SVG 파일을 생성하고 컴퓨터로 다운로드합니다.

자주 발생하는 문제와 이를 피하는 방법

  1. 내보낸 SVG가 제대로 작동하지 않음
    SVG에 블러 같은 효과나 지원되지 않는 글꼴이 포함되어 있으면 제대로 렌더링되지 않을 수 있습니다. 내보내기 전에 디자인을 단순화하세요.

  2. 파일이 PNG 또는 다른 형식으로 내보내짐
    형식 드롭다운에서 "SVG"가 선택되어 있는지 항상 다시 확인하세요. 기본값으로 PNG가 표시될 수 있습니다.

  3. 내보내기에 원치 않는 요소가 포함됨
    내보내려는 것만 선택했는지 확인하세요. 그룹 또는 프레임을 사용해 내보내기 대상을 분리하세요.

  4. 내보낸 SVG에서 품질이 저하됨
    SVG는 벡터 기반이라 품질 문제는 드물지만, 평탄화된 벡터를 사용하고 파일 안에 복잡한 래스터 이미지를 넣지 마세요.

  5. SVG 파일 크기가 너무 큼
    사용하지 않는 레이어와 경로를 정리하세요. 필요하면 텍스트를 아웃라인으로 변환해 파일 크기를 줄이세요.

Figma에서 SVG를 내보내는 방법에 대한 자주 묻는 질문

  1. Figma에서 SVG 파일을 어떻게 내보내나요?
    오브젝트 또는 프레임을 선택한 다음 오른쪽 사이드바로 이동해 내보내기 설정을 추가하고 형식을 SVG로 선택한 뒤 Export를 클릭하세요.

  2. 한 번에 여러 개의 SVG를 내보낼 수 있나요?
    네. 여러 프레임 또는 컴포넌트를 선택한 다음 내보내기 설정을 각각에 적용한 후 한 번에 모두 내보내면 됩니다.

  3. SVG에서 텍스트를 편집 가능하게 유지할 수 있나요?
    기본적으로 가능합니다. 호환성을 확실히 하려면 내보내기 전에 텍스트를 아웃라인으로 변환하세요.

  4. PNG보다 SVG를 사용하는 이점은 무엇인가요?
    SVG 파일은 확장 가능하고 가벼우며 어떤 해상도에서도 품질을 유지합니다. 아이콘과 UI 자산에 이상적입니다.

  5. 내보낸 SVG를 웹사이트에서 사용할 수 있나요?
    네. Figma에서 내보낸 SVG는 웹에서 바로 사용할 수 있으며 HTML에 직접 삽입하거나 이미지 자산으로 활용할 수 있습니다.

  6. mac에서 화면 녹화하는 방법 
    Mac에서 화면 녹화하려면 Trupeer AI를 사용할 수 있습니다. 전체 화면을 캡처할 수 있으며 AI 아바타 추가, 음성 내레이션 추가, 영상에서 줌인/줌아웃 같은 AI 기능을 제공합니다. trupeer의 AI 비디오 번역 기능을 사용하면 영상을 30+개 언어로 번역할 수 있습니다. 

  7. 화면 녹화에 AI 아바타를 추가하는 방법은?
    화면 녹화에 AI 아바타를 추가하려면 AI 화면 녹화 도구를 사용해야 합니다. Trupeer AI는 AI 화면 녹화 도구로, 여러 아바타로 영상을 만들 수 있으며 영상용 아바타를 직접 생성하는 데도 도움을 줍니다.

  8. windows에서 화면 녹화하는 방법은?
    Windows에서 화면 녹화하려면 내장된 게임 바(Game Bar)(Windows + G) 또는 Trupeer AI 같은 고급 AI 도구를 사용해 AI 아바타, 음성 내레이션, 번역 등 더 다양한 기능을 활용할 수 있습니다.

  9. 영상에 음성 내레이션을 추가하는 방법은?
    영상에 음성 내레이션을 추가하려면 trupeer ai 크롬 확장 프로그램을 다운로드하세요. 가입 후 음성이 포함된 영상를 업로드하고 trupeer에서 원하는 음성 내레이션을 선택한 다음 편집한 영상을 내보내세요. 

  10. 화면 녹화에서 줌인하는 방법은?
    화면 녹화 중 줌인하려면 Trupeer AI의 줌 효과를 사용하세요. 특정 순간에 맞춰 줌인/줌아웃할 수 있어 영상 콘텐츠의 시각적 임팩트를 강화합니다.

다른 사람들이 함께 묻는 질문

기술 문서 생성기

사용자 매뉴얼 가이드

지식 기반 소프트웨어

Figma에서 프레임 이름 숨기는 방법

Figma 파일 저장하는 방법

Figma에서 그리드 만드는 방법

사이드바로 Figma에서 줌인하는 방법

Figma에서 배경을 블러 처리하는 방법

영상 편집기, 번역가, 스크립트 작가가 필요하신가요?

Trupeer를 무료로 사용해 보세요

데모 예약

영상 편집기, 번역가, 스크립트 작가가 필요하신가요?

Trupeer를 무료로 사용해 보세요

데모 예약

영상 편집기, 번역가, 스크립트 작가가 필요하신가요?

Trupeer를 무료로 사용해 보세요

데모 예약

동영상부터 단계별 가이드까지 이 페이지의 모든 내용은 Trupeer AI를 통해 단 몇 분 만에 작성되었습니다.

동영상부터 단계별 가이드까지 이 페이지의 모든 내용은 Trupeer AI를 통해 단 몇 분 만에 작성되었습니다.

동영상부터 단계별 가이드까지 이 페이지의 모든 내용은 Trupeer AI를 통해 단 몇 분 만에 작성되었습니다.