인프런 커뮤니티 질문&답변

안녕하세요

사각형만 만들어서 컴포넌트를 만들어주세요. 그리고 인스턴스를 가져와서 사각형 안에 사진을 넣어주세요. 속성 복사 ctrl(cmd)+alt(opt)+c / PNG 복사 ctrl(cmd)+shift+c 로 복사해서 사각형에 ctrl+V 붙여넣기 해주세요. 끝까지 완강하시길 응원해요🥰

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. gangsugi님, 질문 주셔서 감사합니다.

피그마에서 이미지 확대 컴포넌트를 만들고 인스턴스에 이미지를 추가하는 부분은 처음 경험하시는 분들께서 자주 헷갈려 하시는 부분인데요, 확실하게 이해하실 수 있도록 단계별로 설명드리겠습니다.

1. 컴포넌트 및 인스턴스 이해하기:

   • 컴포넌트(Component)는 재사용을 위해 만든 디자인 요소의 원본입니다.
     
   • 인스턴스(Instance)는 컴포넌트의 복제본이며, 기본적인 속성은 컴포넌트와 연결되어 변경할 수 없습니다. 그러나 내용물(예: 이미지)은 바꿀 수 있는 부분이 있습니다.
     

2. 이미지 추가하기:

   • Step 1: 우선 프레임을 만들어 주세요. 프레임은 이미지가 담길 컨테이너가 됩니다.
     
   • Step 2: 그런 다음, 컴포넌트를 인스턴스로 이 프레임 안에 드래그해서 놓습니다.
     
   • Step 3: 인스턴스의 이미지 레이어에 접근합니다. 피그마에서는 드래그앤드롭으로 이미지 파일을 해당 레이어 안으로 드롭하면 이미지가 교체됩니다.
     

3. 레이어 구조 및 가시성 설정 확인하기:

   • 인스턴스 내의 레이어 구조를 올바르게 이해하고 편집하시면, 이미지를 교체하거나 추가하는 데 큰 도움이 됩니다. 새로운 이미지를 넣기 전에 기존 이미지 레이어가 선택되어 있는지, 레이어의 가시성 속성(Visibility)이 활성화되어 있는지 확인하세요.
     

위의 단계들을 따라가며 시도해 보시기 바랍니다. 만약 계속 헷갈리신다면, 피그마 내에서 도움말 기능을 참조하거나 관련 강의 자료를 다시 한번 리뷰해 보시면 좋을 것 같습니다.

관련 질문이나 강의 내용을 찾기 어려우시면 다음 링크를 참조하세요:

• 피그마에서 이미지 인스턴스 관련 오류 해결방법
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.