레이아웃 & 그리드

웹 이미지 프레임 맞춤 내보내기/조절

피그마 오픈카톡방2026. 3. 7.

질문사항

웹에서 가져온 이미지를 특정 프레임 크기에 맞춰 내보내거나(사출), 프레임 내에서 이미지 크기를 조절하는 효율적인 방법이 궁금합니다. 현재는 개별 그룹화를 통해 크기를 맞추고 있습니다.

웹에서 가져온 이미지를 특정 프레임 크기에 맞춰 관리하는 효율적인 방법은 다음과 같습니다.

이미지를 프레임 크기에 맞추는 방법 (Figma 기본 기능):

프레임 안에 이미지 배치: 이미지를 원하는 크기의 프레임 안에 넣습니다. 이미지가 프레임 밖으로 나가면 자동으로 잘려 보입니다 (클리핑 마스크 효과).

이미지 Fill 설정: 이미지를 선택한 후, 우측 패널의 `Fill` 섹션에서 이미지 옵션을 설정합니다.

`Fill`: 이미지를 프레임에 꽉 채우며, 비율이 맞지 않으면 일부가 잘릴 수 있습니다.

`Fit`: 이미지의 비율을 유지하며 프레임 안에 맞춥니다. 프레임에 여백이 생길 수 있습니다.

`Crop`: 이미지의 특정 부분을 프레임에 맞춰 자를 수 있습니다. 이미지 핸들을 조절하여 원하는 영역을 선택합니다.

`Tile`: 이미지를 프레임 안에 반복하여 채웁니다.

`Fill` 또는 `Crop` 옵션을 활용하면 이미지를 프레임 크기에 맞춰 효과적으로 조절할 수 있습니다.

원본 답변의 방법 (Frame All 플러그인 활용):

프레임 안에 이미지 배치: 이미지를 원하는 크기의 프레임 안에 넣습니다.

`Frame All` 플러그인 사용: `Frame All` 플러그인을 사용하여 이미지와 프레임을 포함하는 상위 프레임을 생성합니다. 이 플러그인은 선택된 모든 요소를 하나의 프레임으로 감싸는 데 유용합니다.

그룹으로 변환: 생성된 상위 프레임을 그룹으로 변환합니다. 이 방법은 레이어 구조를 특정 방식으로 정리하거나, 다른 목적으로 사용될 수 있습니다.

내보내기 (Export) 시:

이미지가 포함된 프레임을 선택하고 우측 패널의 `Export` 섹션에서 원하는 포맷(PNG, JPG, SVG, PDF)과 배율을 설정하여 내보내면, 프레임 크기에 맞춰 이미지가 잘리거나 조절된 상태로 내보내집니다.