이번엔 많은 디자이너들이 궁금해 할거라고 예상하는 우리에게 아주 필수적인
“반응형 디자인 Figma에서 Responsive UI 만드는 방법이죠”
Auto Layout + Constraints + 스마트 리사이징 조합으로 해보는거죠.
Figma에서도 진짜 반응형처럼 동작하는 UI 디자인이 가능하다는 걸 쉽게 알려줄거야!
데스크탑, 태블릿, 모바일 등 다양한 화면 사이즈에 맞게 하고,
UI를 자동으로 반응하게 만들어야 하는 경우가 많잖아요.
Figma는 코드 없이도 이걸 디자인 단계에서 미리 구현하고 테스트할 수 있는 기능을 갖추고 있다죠.
이번 글에서는 Figma에서 반응형 UI를 만드는 핵심 방법 3가지!
1. Constraints (제약 조건) 이해하기
Figma의 Constraints는 프레임(화면) 사이즈가 바뀔 때,
내부 요소들이 어떤 위치, 크기를 유지할지 설정하는 기능이에요.
예시:
- 버튼이 항상 오른쪽 아래에 고정되길 원할 때 → “Right + Bottom”
- 텍스트 박스가 프레임 너비에 맞게 늘어나길 원할 때 → “Left + Right”
사용법:
- 프레임 안에 요소를 넣기
- 우측 패널에서 Constraints 설정
- 반응형처럼 사이즈 조절 시 위치 유지 확인!
Tip:
Constraints 설정은 Frame 내부에 있을 때만 적용됩니다.
Group 안에서는 동작하지 않아요.
2. Auto Layout – 반응형 디자인의 핵심
Figma에서 진짜 반응형처럼 보이게 만드는 기능은 바로 Auto Layout입니다.
Auto Layout을 쓰면 요소들이 내용에 따라 크기가 유연하게 변하고,
간격, 정렬, 패딩 등이 자동으로 관리돼요.
활용 예시:
- 버튼 텍스트가 길어지면 자동으로 넓어지기
- 카드 리스트를 수직/수평 정렬하면서 여백 유지
- 콘텐츠가 추가돼도 레이아웃이 깨지지 않게 구성
사용법:
- 여러 요소 선택 →
Shift + A→ Auto Layout 적용 - 방향(수직/수평), 정렬, 간격, 패딩 설정
- 내부 요소 크기는
Hug,Fill,Fixed로 세부 조정
핵심:
“Fill container” + “Auto Layout” 조합이 반응형의 핵심 키워드!
3. Frame Resizing 기능으로 반응형 미리보기
디자인을 구성한 후, 실제로 반응형처럼 작동하는지 테스트해보는 것도 중요하죠.
Figma는 프레임을 수동으로 늘리거나 줄이면서
UI 요소들이 제약 조건에 맞게 잘 반응하는지 확인할 수 있어요.
방법:
- 프레임 가장자리를 마우스로 드래그
- 버튼, 이미지, 텍스트가 자연스럽게 늘어나거나 정렬되는지 확인
- 깨지는 부분이 있다면 Auto Layout or Constraints 다시 점검
실전 예시: 반응형 카드 리스트 만들기
목표: 카드 3개가 가로 정렬 → 화면 줄면 세로로 정렬
- 각 카드는 Auto Layout + Fixed Width로 구성
- 부모 프레임에는 Auto Layout (수평) + Wrap 기능 적용
- 각 카드 간
Gap설정 → 반응형 그리드 완성!
이걸 활용하면 모바일 UI, 대시보드, 블로그 등 다양한 반응형 컴포넌트를 시뮬레이션할 수 있어요.
마무리 해볼게요.
Figma는 코드 없이도 반응형 UI의 원리를 충분히 구현할 수 있습니다.
Auto Layout, Constraints, Resize 미리보기 기능만 제대로 익히면
실제 브라우저처럼 유연한 레이아웃 설계가 가능해요.