강의

멘토링

로드맵

이지영님의 프로필 이미지
이지영

작성한 질문수

피그마 시작하기

4- 컴포넌트 프로퍼티 실습[2025 UI 반영 업데이트]

인스턴스스왑

작성

·

48

0

image.png

아이콘 하트 클릭 후 오른쪽 패널에서 인스턴스 스왑을 하려고 하는데 강의에서 나오는 것처럼 인스턴스 스왑 아이콘이 오른쪽 패널에 보이지가 않습니다. 해결 방법 알려주세요

퀴즈

44%나 틀려요. 한번 도전해보세요!

반응형 디자인에서 요소의 내용이나 부모 프레임의 크기 변화에 따라 자동으로 크기가 조절되게 하려면 주로 어떤 기능을 사용할까요?

컨스트레인트 (Constraints)

오토 레이아웃 (Auto Layout)

베리언트 (Variants)

베리어블 (Variables)

답변 2

0

루씨님의 프로필 이미지
루씨
지식공유자

안녕하세요 지영님

업로드 해주신 이미지에서는 하트 아이콘이 프레임입니다.

  1. heart 아이콘은 컴포넌트로 만들고

  1. 복사한 인스턴스를 버튼 안에 넣어주세요

  2. 하트 인스턴스를 선택해서 인스턴스 스왑 프로퍼티를 만들어주세요.

스크린샷 2026-04-27 오후 7.09.25.png.webp

 

언제든지 질문해주세요. 감사합니다.

루씨 드림

0

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

피그마에서 인스턴스 스왑 기능을 찾지 못하셨다니 당황스러우셨을 것 같습니다. 인스턴스 스왑은 컴포넌트의 인스턴스를 다른 컴포넌트로 쉽게 교체할 수 있는 기능으로, 올바른 위치에서 접근해야 제대로 사용할 수 있습니다. 아래 몇 가지 방법으로 이 문제를 해결해보세요:

  1. 라이브러리 연결 확인: 인스턴스 스왑 기능을 사용하려면 우선 해당 아이콘이 포함된 컴포넌트가 라이브러리로 설정되어 있어야 합니다. 라이브러리를 제대로 설정하고 연결했는지 확인하세요.

  2. 컴포넌트 선택 상태 확인: 인스턴스 스왑 기능은 컴포넌트를 직접 선택했을 때 나타나는 옵션입니다. 따라서 하트 아이콘이 실제로 컴포넌트로 설정되어 있는지도 확인해 보세요.

  3. 우측 패널 옵션 탭: 컴포넌트를 선택하면 오른쪽 패널의 Design 탭 하단에 인스턴스 스왑 옵션을 찾을 수 있습니다. 여기서 사용할 수 있는 스왑 가능한 다른 컴포넌트 목록이 나와야 합니다.

  4. 피그마 UI 업데이트: 만약 여전히 옵션이 보이지 않는다면, 피그마의 UI가 최근 업데이트되었을 가능성이 있으니, 피그마의 최신 도움말 문서를 참조하여 변경 사항을 확인하세요.

이미지에서 보여주신 설정 부분도 검토하시면서 이상이 없는지 확인해 주세요. 아래의 링크는 피그마 관련 설정을 돕는 다른 질문들이며 더 도움 받으실 수 있습니다:

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

이지영님의 프로필 이미지
이지영

작성한 질문수

질문하기