디자인 파일에 이미지를 추가하여 사진, 스크린샷 또는 기타 시각적 Assets을 디자인에 통합한다. Figma 는 PNG , JPEG , HEIC , GIF 및 WEBP 이미지 형식을 지원한다.
Figma에는 이미지에 대한 특정 레이어 타입이 없으며 대신 이미지는 Fill 타입이다. 이를 통해 모든 모양 또는 벡터 네트워크에 이미지를 추가할 수 있다.
오른쪽 사이드바의 Fill 섹션에서 이미지 채우기를 보고 업데이트 한다. Figma는 견본과 Image레이블에 있는 이미지의 썸네일을 표시한다.
왼쪽 사이드바의 Layer 패널에서 이미지 채우기로 레이어를 식별할 수도 있다.
- 캔버스에 이미지를 바로 추가하면 Figma는 캔버스에 원본 파일의 크기로 직사각형을 생성한다. 이미지 아이콘 및
Image레이블이다. - 기존 개체에 이미지를 추가하면 Figma는 레이어 아이콘과 원본 레이어의 설명을 사용한다.
Note: Figma는 너비 또는 높이가 4096픽셀보다 큰 이미지는 자동으로 축소 처리한다. 이렇게 하면 이미지의 원래 크기가 비례하여 조정되므로 가장 긴 가장자리가 4096픽셀 미만이 된다.
때때로 Figma는 이미지를 파일에 추가하기 전에 디코딩하고 변환해야 한다. 이러한 이유로 우리는 Figma가 모든 파일 메타데이터를 보존하지 못하는 것을 기억해야 한다.
파일에 이미지 추가
이미지는 채우기이므로 모든 벡터 또는 모양에 추가할 수 있다. 이를 통해 유연성과 제어력이 향상된다. 디자인 파일에 이미지를 추가하는 방법에는 여러 가지가 있다.
- 컴퓨터에서 캔버스로 이미지 파일을 끌어다 놓는다. Figma는 이미지 크기의 새 직사각형을 만들고 이미지를 채우기로 적용한다.
- 이미지 파일을 파일 브라우저로 가져온다. Figma는 이미지가 직사각형으로 추가된 프로젝트에서 새 디자인 파일을 생성한다.
- 장소(Place)를 사용하여 디자인에 여러 이미지를 일괄 추가한다. 이미지를 추가할 레이어를 선택한다. 일괄 이미지 배치 →
- 색상 선택기에서 이미지 가져오기를 사용한다. 이미지 채우기 업로드 →
- 현재 파일의 다른 레이어나 다른 파일에서 이미지를 복사한다. 레이어 간 이미지 복사 및 붙여넣기 →
- 클립보드의 이미지를 캔버스에 붙여넣는다. 다운로드 및 업로드 없이 웹에서 이미지를 복사한다. 캔버스에 이미지 붙여넣기 →
Tip! 애니메이션 GIF를 프로토타입에 추가할 수도 있다. GIF는 프레젠테이션 보기에서 디자인과 프로토타입을 볼 때만 재생된다. 프로토타입에 애니메이션 GIF 추가 →
이미지 편집
이미지를 편집하거나 조정하는 방법에는 여러 가지가 있다.
- 이미지가 있는 모든 레이어의 크기 조정(scale), 회전(rotate) 및 수정(adjust)
- 레이어에 적용된 이미지 자르기(crop) 및 재배치(re-position)
- 채우기 모드(fill mode), 회전(rotation) 및 혼합 모드(blend mode)를 포함한 이미지 옵션 조정
- 스타일(Styles) 및 구성 요소(Components)에 이미지 포함
- 마스크(Masks)를 적용 하여 이미지의 일부만 표시
- 색조(Hue), 채도(Saturation) 또는 대비(Contrast) 변경과 같은 이미지 조정
Tip! 이미지를 로드하는 데 문제가 있습니까? 일반적인 이미지 로드 문제 해결 →
