inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

해결된 질문

188

박원지

작성한 질문수 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에 배리어블 적용하니 해결되었습니다!

 

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

반응형 웹 디자인

0

58

2

액션 아이콘 컴포넌트 질문

0

46

2

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

49

3

스피너 아이콘 크기 질문

0

50

2

미리보기 빈칸생기는 현상

0

40

2

아이콘 빌런 부분

0

46

2

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

0

79

1

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

0

61

1

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

1

61

2

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

0

56

1

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

0

61

2

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

0

76

2

next step?

1

91

1

16강 Print Variables 출력 질문

0

93

2

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

0

94

2

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

0

122

2

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

0

139

2

이미지 캐러셀 영상

0

82

2

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

0

136

3

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

0

74

2

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

0

74

1

컴포넌트별 베리어블 구축

0

102

2

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

0

51

1

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

0

59

2