이미지와 동영상을 업로드하여 디자인에 사진, 스크린샷 및 기타 비주얼 에셋을 통합할 수 있습니다.
Figma가 지원하는 파일 유형:
- 이미지: JPG, PNG, HEIC, WebP, GIF, TIFF (Safari에서만 사용 가능)
- 동영상: MP4, MOV, WebM
참고: SVG 파일을 Figma로 가져오면 SVG는 더 이상 이미지로 취급되지 않습니다. 대신 편집 가능한 벡터 레이어로 변환됩니다. 벡터 레이어 편집에 대해 자세히 알아보세요.
Figma에는 이미지와 동영상에 대한 특정 레이어 유형이 없습니다. 대신, 이러한 에셋은 채우기로 취급됩니다. 이를 통해 도형, 프레임, 텍스트 레이어, 벡터 네트워크를 포함한 모든 유형의 레이어에 에셋을 추가할 수 있습니다. 채우기 사용에 대해 자세히 알아보세요.
캔버스에 에셋을 직접 업로드하면, Figma는 해당 에셋을 채우기로 설정한 직사각형 레이어를 생성합니다. 왼쪽 사이드바의 레이어 패널에 있는 아이콘을 통해 에셋 유형을 식별할 수 있습니다: 이미지 또는 동영상/GIF.
에셋 크기 제한
업로드하는 에셋이 4096 x 4096픽셀을 초과하는 경우, Figma는 에셋의 가장 긴 치수가 4096픽셀 이하가 되도록 비율에 맞게 자동으로 크기를 조정합니다. 파일에 업로드된 후에 에셋의 크기를 조정할 수 있습니다. 이 크기 조정 과정에서 일부 파일 메타데이터가 손실될 수 있습니다.
이미지 및 동영상 업로드
Figma에 이미지와 동영상을 업로드하는 몇 가지 방법:
- 색상 선택기를 사용하여 이미지/동영상 업로드하기
- 이미지/동영상 일괄 업로드하기
- 파일 브라우저로 이미지 가져오기
- 클립보드에서 이미지/동영상 복사 및 붙여넣기
- 컴퓨터에서 캔버스로 이미지 끌어다 놓기
참고: 이미지 로딩에 문제가 있습니까? 가장 일반적인 이미지 로딩 문제를 해결하는 방법을 알아보세요.
색상 선택기를 사용하여 이미지 및 동영상 업로드하기
색상 선택기를 사용하여 레이어 채우기로 이미지 및 동영상을 업로드할 수 있습니다.
- 캔버스에서 레이어를 선택합니다.
- 오른쪽 사이드바의 채우기 또는 외곽선 섹션에서 견본을 클릭하여 색상 선택기를 엽니다.
- 채우기 옵션에서 이미지 또는 동영상을 선택합니다. 파일을 선택할 때까지는 회색과 흰색 체크 무늬의 시각적 입력 예시가 레이어의 채우기에 적용됩니다.
- 컴퓨터에서 업로드를 클릭하여 기존 이미지를 업로드하거나, 이미지 만들기를 클릭하고 Figma AI를 사용해 이미지를 생성할 수 있습니다.
이미지/동영상 일괄 업로드하기
이미지/동영상 배치를 사용하여 에셋을 일괄로 가져올 수 있습니다. 그런 다음 각 에셋을 배치할 위치를 정확하게 선택할 수 있습니다. Figma가 이미지와 동영상을 채우기로 처리하기 때문에 기존 개체에도 추가할 수 있습니다.
- 도구 모음의 도형 도구 메뉴에서 이미지/동영상을 선택하거나 키보드 바로가기를 사용합니다.
- Mac: Shift Command K
- Windows: Shift Ctrl K
- 업로드할 이미지나 동영상 파일을 선택한 후, 열기를 클릭합니다. 커서는 배치해야 할 에셋 수를 표시하는 배지가 나타납니다.
- 다음 중 하나를 수행합니다.
- 캔버스를 클릭하여 원래 치수를 사용해서 이미지나 동영상을 새 레이어에 배치하세요
- 캔버스의 기존 개체를 선택하여 해당 개체의 채우기를 이미지나 동영상으로 대체하세요
- 모두 배치를 클릭하여 모든 에셋을 캔버스의 단일 위치에 추가하세요
- 나머지 에셋에 대해서도 이 과정을 반복합니다. 남아 있는 이미지나 동영상을 삭제하려면 키보드의 삭제를 누르세요.
이미지 및 동영상 채우기 교체하기
언제든지 이미지/동영상 채우기를 변경할 수 있습니다. 이 경우 자르기나 위치 지정 등의 적용된 채우기 모드 설정은 유지됩니다.
이를 실행하는 방법은 다음과 같습니다.
- 색상 선택기에서 에셋 미리보기 위로 파일을 드래그하세요
- 채우기 또는 외곽선 섹션에서 견본 위로 파일을 드래그하세요
이미지 편집
업로드 후 디자인에 이미지가 나타나는 방식을 조정하기 위해 이미지 속성을 사용할 수 있습니다. 또한 Figma AI를 사용하여 이미지를 확장하거나 배경을 제거하는 등의 작업을 할 수 있습니다.