inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

Fill이 안 되는 이유

해결된 질문

624

이민지

작성한 질문수 6

0

image.png

width가 Fill로 변경이 안 되는 이유가 무엇일까요 선생님ㅜㅡㅜ
Fixed, Hug만 뜹니다 ㅜㅜ

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

답변 2

0

볼드 UX

이민지님 안녕하세요,

 

우선 어떤 레이어를 가지고 말씀하시는지 잘 모르겠지만 만약 최상단에 있는 레이어라고 하신다면, 원래 Fixed와 Hug만 나타납니다.

 

Fill은 자신의 부모 레이어의 크기를 따라갑니다.

최상단의 경우는 부모 레이어가 없겠죠, 그래서 나타나지 않습니다.

 

만약 다른 레이어라고 한다면, Max, Min을 적용했기 때문인데, 이 경우는 제가 알기론 Fill도 나타나는 걸로 알고 있습니다.

제가 파일을 공유해주시고 물어봐주시면 더 자세히 도와드리겠습니다.

볼드 드림.

1

이민지

감사합니다.. ! 다시 한 번 확인해보겠습니다

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

이민지님, 피그마에서 width 옵션에서 Fill이 아니라 Fixed와 Hug만 보이는 문제에 대해 질문 주셨네요. 피그마에서는 특정 레이아웃 상황에서 Fill 옵션이 활성화되지 않을 수 있습니다. 주로 다음의 경우에 그러한 현상이 발생할 수 있습니다:

  1. Auto Layout 설정: 해당 컴포넌트나 프레임이 다른 오토 레이아웃(Frame 또는 Component)에 포함되어 있으면, Fill 옵션 대신 Fixed와 Hug 옵션만 보일 수 있습니다. 특히 해당 오토 레이아웃이 수직 방향으로 설정되어 있을 경우, 가로 방향의 Fill 옵션이 비활성화 될 수 있습니다.

  2. 부모 컴포넌트 설정: 컴포넌트가 포함된 상위 컴포넌트나 프레임의 레이아웃 설정이 Fill 옵션을 지원하지 않는 경우도 있습니다. 상위 프레임의 레이아웃 설정을 확인해 보시기 바랍니다.

  3. Constraints 설정: 특정 Constraints 설정으로 인해 Fill 옵션이 제한될 수 있습니다. Constraints는 컴포넌트의 위치 및 크기 조정 방법을 정의합니다.

다음 단계를 통해 문제를 해결해 보세요:
- 해당 컴포넌트의 상위 레이아웃 설정을 확인하고 필요한 경우 레이아웃을 수정하세요.
- Constraints 설정을 확인하고, 필요하다면 변경해 보세요.

관련된 도움말이나 다른 사례를 참고하기 위해 피그마 공식 도움말 페이지를 방문해 보시는 것도 추천드립니다. 추가적으로 궁금한 내용이 있으면 언제든지 질문해 주세요.

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

아이콘 빌런 부분

0

22

1

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

0

46

0

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

0

46

1

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

1

43

2

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

0

40

1

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

0

49

2

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

0

62

2

next step?

1

78

1

16강 Print Variables 출력 질문

0

84

2

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

0

74

2

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

0

98

2

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

0

119

2

이미지 캐러셀 영상

0

70

2

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

0

107

3

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

0

66

2

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

0

59

1

컴포넌트별 베리어블 구축

0

81

2

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

0

41

1

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

0

54

2

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

0

63

2

교육용 피그마 계정 문의

0

65

2

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

0

91

3

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

0

53

2

섹션 6 / 29.Button 강의 질문

0

68

2