inflearn logo
강의

Course

Instructor

UXUI Design 6-Week Completion Challenge (w. Figma)

[Practical Example 3] Creating a Design Draft for the Home Screen

Auto layout 관련

71

rotemsrsplatformbiz

3 asked

0

image.png

안녕하세요. 표제 관련 문의 드립니다.

 

수업대로 박스 생성 후 텍스트를 넣었고 그룹화한 다음에 add auto layout을 하였습니다. 이렇게 구두 박스를 만들고 복사해서 스니커즈를 만드려는데, auto layout이 됐음에도 텍스트가 프레임 밖으로 삐져 나옵니다.

구두 프레임 width를 hug로 맞추면 복사한 프레임 내 텍스트가 삐져나오는 현상을 막을 수는 있으나 선생님이 하신 것처럼 구두는 width를 작게 시작해서 스니커즈같이 긴 것은 긴대로. 이런식으로 구현하려면 어떻게 해야 하나요?

웹-디자인 모바일-디자인 figma 프로덕트디자인 uiux

Answer 3

0

uxeric

안녕하세요. 답장이 늦어져 죄송합니다.

관련해서 영상을 찍어서 보내드립니다.
https://youtu.be/tSOXx119In0

확인을 해보니, 각각의 태그 박스를 선택하신 후, Hug를 선택해주시면 됩니다. 그리고 모든 태그 박스가 선택된 박스에 대해서는 Wrap 처리를 해주시면 됩니다.

Hug를 해준다는 것은 박스 안의 요소 (이 경우에는 텍스트)를 감싸 안아준다는 의미입니다. 그래서 텍스트가 많아져도 그것을 감싸 안아주기 위해서 태그 박스도 좌우로 함께 늘어나게 됩니다.

 

확인해보시고 질문 있으시면 말씀주세요.

감사합니다.

0

uxeric

안녕하세요. 문의 감사합니다. 제가 어떻게 구현하셨는지 확인해보면 더 잘 답변을 드릴 수 있을 것 같아요. 제 이메일 ericworld121@gmail.com으로 해당 피그마 파일 링크를 보내주실 수 있을까요?

0

rotemsrsplatformbiz

안녕하세요. 선생님

메일을 10/15에 보냈는데, 아직 답변을 못받아서요~ 혹시 링크 안들어가지는 걸까요? AI 답변은 이해하는데 한계가 있습니다.

0

communityai8509

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

피그마에서 Auto Layout을 사용하여 버튼 크기를 동적 텍스트에 맞게 조절하는 과정에서 발생한 문제를 해결하는 방법에 대해 설명드리겠습니다.

문제는 텍스트가 Auto Layout을 사용함에도 불구하고 프레임 밖으로 나가는 현상입니다. 이를 해결하려면 각 프레임의 Width와 관련된 설정을 적절히 조정해야 합니다.

해결 방법

  1. Auto Layout 설정 확인:

    • 텍스트와 함께 프레임을 선택한 후, 오른쪽 속성 패널에서 Auto Layout 관련 설정을 확인하십시오.
    • 각각의 프레임(Wrap) 설정이 Hug Contents로 되어 있는지 확인하세요. 이렇게 설정하면 텍스트의 길이에 맞게 프레임이 자동으로 조정됩니다.
  2. 텍스트 박스의 Resize 설정:

    • 텍스트 박스의 리사이즈 옵션이 Auto Height로 설정되어 있어야 합니다. 이렇게 하면 텍스트의 길이에 따라 높이가 자동으로 조절됩니다.
  3. Padding and Spacing 설정:

    • Auto Layout의 간격 조정 옵션에서도 Padding과 Element 간 Spacing을 조정하여 텍스트가 제대로 중앙에 위치하며, 프레임 내부에서 균형 잡히도록 해야 합니다.
  4. 기본 프레임 크기 조절:

    • 만약 초기에 설정해 둔 프레임의 Width가 너무 작게 설정되어 있다면, 초기에 기본적으로 가질 수 있는 Width 크기를 좀 더 크게 설정해보는 것도 방법일 수 있습니다.

아래의 링크에서 유사한 질문과 답변을 참조하여 더 많은 정보를 얻으실 수 있습니다:

이러한 정보가 프레임과 텍스트의 동적 레이아웃 설정에 도움이 되길 바랍니다. 더 궁금한 점이나 추가적인 질문이 있다면 언제든지 말씀해 주세요. 지식공유자님께서도 곧 답변을 추가해 주실 것입니다.

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

네이티브 색상변경

0

3

1

채팅 UI 추가 속성 설정 질문

0

14

1

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

0

21

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

33

1

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

0

30

2

안녕하세요.

0

18

1

신규 업데이트 내용

0

27

2

'Scroll To' 프로토타입 상세설정 'Offset' 플러스와 마이너스 설정 기준이 궁금합니다!

0

27

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

23

2

예제 파일 오류

0

28

1

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

0

41

2

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

0

50

2

figma variable 반응형 디자인 결과물 공란

0

55

2

예시파일 불일치

0

37

2

PLAY 버튼 동작 미리보기 관련 질문드립니다!

0

31

2

component, frame, variants 그리고 컴포넌트에 새로운 property 추가하기 관련 질문

0

86

3

미묘하게 다른 구조 ㅜㅜ

0

57

2

작업바를 기존UI로 변경하는 목록이 없어요..

0

55

1