inflearn logo
강의

Course

Instructor

Getting Started with Figma

화면확대 인터렉션 질문이요

77

gangsugi

71 asked

1

강의를 여러번 봤는데도, 사진확대 컴포넌트를 만들고 인스턴스 컴포넌트를 프레임안에 넣고 사진을 어떠게 넣으라는건지 잘 모르겠습니다.

그룹을 해야 하는건지...인스턴스 컴포넌트안에 이미지를 넣을수는 없지 않나요.,

그부분에 자세한 설명이 없어서 ....

웹-디자인 모바일-디자인 figma ui ux

Answer 2

0

lucymygirl

안녕하세요

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

감사합니다.

0

communityai8509

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

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

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

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

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

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

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

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

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

네이티브 색상변경

0

3

1

채팅 UI 추가 속성 설정 질문

0

14

1

배리어블 Value에 관해 질문있습니다.

0

22

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

26

1

Navigation Mobile 토글 베리어블이 안됩니당

1

27

2

24강 상품 상세화면 실습 컨디셔널 질문

0

23

2

실습파일

0

16

2

23강 캘린더 화면 실습 강의 2가지 질문

0

24

1

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

27

1

17~20강 강의에서 활용하신 노션 자료 또한 공유 가능할까요?

0

34

1

노션 25 인터렉션 구현 파트 안 보입니다!

0

30

2

6번강의 샘플예제

0

52

2

각 강의별 샘플

0

71

1

화면전화효과 질문드려요

0

78

2

30번 강의질문

0

57

2

지금 강의하실 때 사용하시는 피그마 예제??

0

88

1

prototype-overflow 탭 문의

0

151

2

피그마 활용 클래스 > 4 컴포넌트 boolean

0

823

1

그룹에 대한 질문입니다

0

121

2

6- 디자인시스템 구축을 위한 스타일 만들기 > 그레이 선정

0

255

2

6-디자인시스템 구축을 위한 스타일 만들기 > 그레이 뒷 숫자의미

0

173

2

공유 주신 피그마 url 404에러 뜹니다

0

190

1

7-상품확대 인터랙션 만들기 에서 이미지 배치 질문입니다.

0

180

2

태그부분이 아래로 안떨어집니다

0

201

2