inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

[B2C 이러닝] 반응형 디자인 만들기

반응형 디자인 만들기 -> imagePlaceholder 배리어블

해결된 질문

176

박원지

작성한 질문수 2

0

스크린샷 2025-01-24 오전 12.19.52.png.webp스크린샷 2025-01-24 오전 12.26.55.png.webp

안녕하세요 볼드님!

반응형 디자인 만들기 14:00쯤 레이어 눈 아이콘 우클릭을하면 로컬 배리어블이 나와야하는데 나오질 않습니다.... ㅠㅠ

TimeFrame은 눈모양 우클릭 배리어블 적용이 잘되는데

imagePlaceholder 홀더에는 우클릭 적용이 안됩니다... 어디서 부터 잘못된건지 모르겠네요ㅜㅜ 도와주세요.

.

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 프로덕트디자인

답변 1

1

볼드 UX

원지님 안녕하세요!

이런 경우에는 이미지 플레이스 홀더(ImagePlaceholder)가 현재 Base Card의 불린프로퍼티로 사용되어서 안되는 것 같습니다. 이런 경우에는 두가지 방법이 있습니다.

1. Basecards
- 레이어 패널에서 이미지 플레이스(ImagePlaceholder) 상위 레이어인 base card를 선택합니다.
- base card 인스턴스 패널창에서 빨간색 부분을 호버하시면 베리어블 적용하기(Apply variable/property)가 뜰거에요.

Screenshot 2025-01-23 at 16.03.01.png.webp


- 이걸 누르시고 원하시는 베리어블을 선택하시면 됩니다.
- 그러면 Mode에 따라서 이미지 플레이스 홀더가 바뀔 것입니다.

2. Learning cards
이 경우는 위와 동일하지만, 만약 Learning cards에서 base card에 있는 프로퍼티를 가지고 온 경우(Expose Nested Instance from...)

- 레이어 패널에서 이미지 플레이스 최상위 레이어인 Learning cards를 선택합니다.
- Learning cards 인스턴스 패널창에서 빨간색 부분을 호버하시면 베리어블 적용하기가 나타납니다. (이미지는 위와 동일합니다.)
- 이걸 누르시고 원하시는 베리어블 선택하세요.
- 위와 동일하게 Mode에 따라 바뀝니다.


혹시 위의 방법대로 해보시고 안되시면 boldplus.ux@gmail.com으로 공유해주세요. 제가 도움 드리도록 하겠습니다.

그리고 마지막으로 거의 다 완강하셨네요.🥹
너무 수고 많으셨습니다. 끝까지 파이팅해보아요!!!!

0

박원지

역시 볼드님 👍🏻

첫번째 방법인 Basecard의 Image에 배리어블 적용하니 해결되었습니다!

 

마지막까지 힘내볼게요 감사합니다 좋은하루 되세요 :)

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

0

21

0

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

0

26

1

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

1

25

2

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

0

27

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

40

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

50

2

next step?

1

67

1

16강 Print Variables 출력 질문

0

80

2

open in Figma 누르고 ui kit 다운?받았을 때

0

63

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

89

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

111

2

이미지 캐러셀 영상

0

64

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

98

3

완강/리뷰 이벤트 후 강의자료

0

59

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

54

1

컴포넌트별 베리어블 구축

0

76

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

36

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

50

2

UI Kit에서 배리어블 등록 안되는 문제

0

58

2

교육용 피그마 계정 문의

0

59

2

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

0

81

3

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

0

48

2

섹션 6 / 29.Button 강의 질문

0

63

2

67강, 70강, 75강 자료 다운로드

0

51

1