플러그인, 진짜 쓰는 것만 추천합니다 (현업 디자이너 필수템)

직히 말해서 피그마만 가지고는 뭔가 부족한 느낌이 들 때가 있거든요.

그런데 플러그인을 적절히 활용하면 마치 내가 디자이너 한 명 더 둔 것처럼 작업 속도와 퀄리티가 확 올라가요. 하지만 종류가 워낙 많다 보니 뭘 써야 할지 모르겠는 경우가 많죠.

그래서 오늘은 제가 실제로 자주 쓰고 있는, 현업에서 진짜 도움 되는 플러그인만 골라서 소개해보려고 해요. 🙂

처음 플러그인을 써본 건 이미지 사이즈 리사이징 때문에였어요… 개발자한테 넘기기 전에 이미지 용량 줄여야 하잖아욤.

매번 포토샵 열기 귀찮아서 찾다 보니 “TinyImage Compressor”라는 플러그인을 알게 되버렸드랫죠!

이건 정말 간단하게 이미지 압축을 할 수 있어서 지금도 계속 쓰고 있어요.

그다음으로 자주 쓰는 건 “Iconify“예요.

피그마 안에서 바로 수천 개의 아이콘을 검색하고 넣을 수 있어서 너무 편해요. 특히 디자인 시안 만들 때 여기서 아이콘 뽑아서 바로 쓰면 시간 절약이 엄청 돼요. 예전엔 아이콘 파인더 사이트에서 찾고, svg로 다운받고, 다시 피그마에 올리는 과정을 반복했는데, 이 플러그인 덕분에 그 고생 안 해도 되더라고요.

또 하나는 “FigJam to Figma”인데요, 회의나 아이디어 스케치할 때 FigJam에서 했던 작업을 그대로 Figma로 옮기고 싶을 때 쓰면 좋아요. 브레인스토밍 끝나고 실질적인 화면 구성을 옮길 때 정말 유용해요. 저는 특히 클라이언트 미팅하면서 이 플러그인을 많이 써요. 그 자리에서 정리한 걸 바로 시안으로 넘기니까 작업이 끊기지 않고 이어져요.

그리고 협업할 때 빠질 수 없는 게 “Stark”예요. 접근성 검사 도구인데요,

텍스트 대비가 기준에 맞는지 확인해줘요. 저희 팀에서는 디자인 리뷰할 때 Stark를 돌려서 최소한 WCAG AA 이상은 맞추고 있어요. 색 조합이나 대비 문제가 있는지 빠르게 체크할 수 있어서, 좋드라구요!

마지막으로 하나 더 꼽자면 “Content Reel”이에요. 이건 텍스트 더미, 이름, 이메일, 숫자 같은 걸 랜덤으로 넣을 수 있는 플러그인인데요, 그냥 Lorem Ipsum 텍스트보다 훨씬 현실적인 느낌을 줄 수 있어서 시안 만들 때 좋아요.

예를 들어 리스트 디자인할 때 전부 ‘텍스트’라고 써두는 것보다, 실제 이름이나 숫자가 들어가면 더 그럴듯하잖아요.

플러그인은 많지만, 진짜 자주 쓰는 건 몇 개 없어요. 중요한 건 플러그인을 많이 설치하는 게 아니라,

내 작업 방식에 맞는 걸 고르고 익숙해지도록 루틴화하는 거라고 생각해요. 여기 소개한 플러그인들은 제가 실무에서 꾸준히 쓰고 있는 것들이고, 그 덕분에 시간도 절약되고 퀄리티도 올라갔어요.

다음엔 플러그인만 잘 써도 프로처럼 보일 수 있는 ‘디자인 디테일 자동화’ 방법도 정리해보려고 해요. 혹시 위에서 소개한 플러그인 중 궁금한 게 있거나, 내가 몰랐던 꿀템 있으면 댓글로 알려주세요. 저도 새로운 플러그인 탐색하는 걸 좋아하거든요!

PM이 이해 못하는 디자인, 체크리스트로 해결

Figma 공유 전 점검 포인트 10가지

디자인을 완성하고 Figma 링크를 공유하면 돌아오는 피드백.
“여기 클릭하면 어디로 가는 거죠?”, “이건 왜 이렇게 생겼어요?”, “폰트 사이즈가 좀 애매한데요.”
이런 반응을 받을 때마다 디자이너는 한숨이 나옵니다. 딱보면 모르냐? 맨날 하던건데.. 아주 밥을 떠먹여 달라고 하네;;

문제는 디자인이 완성되지 않아서가 아니라,
디자이너의 머릿속에 있는 구조와 맥락이 공유되지 않았기 때문입니다.
특히 PM이나 기획자, 마케터처럼 시각 언어에 익숙하지 않은 사람들과 협업할 땐
디자인을 단순히 보여주는 걸 넘어서, 이해시키는 구조로 정리해 전달하는 습관이 필요합니다.

이번 글에서는 Figma 링크를 공유하기 전에 확인해야 할
실무 중심의 점검 포인트 10가지를 소개합니다.


1. 프레임 정렬이 흐름대로 구성되어 있는가?

화면 순서가 랜덤하게 흩어져 있으면
비전문가 입장에서는 어디서부터 봐야 할지 혼란스럽습니다.
로그인 → 메인 → 상세 → 팝업 등 사용 흐름 순서대로 왼쪽에서 오른쪽 방향으로 배치해 주세요.


2. 명확한 네이밍이 되어 있는가?

Frame 1, Frame 2 같은 이름은 개발자든 PM이든 모두를 혼란스럽게 만듭니다.
각 화면의 이름을 Home/Main, Product/Detail, Popup/Filter처럼 기능 기반으로 설정해 주세요.


3. 디자인 목적이 화면 내에 표시되어 있는가?

디자인만 보고도 어떤 기능인지 명확하지 않은 경우가 많습니다.
상단에 간단한 텍스트로 ‘회원가입 화면’, ‘1차 기획안 버전’, ‘데스크탑용 화면’ 등
설명을 붙여두면 전체 맥락 이해가 쉬워집니다.


4. 컴포넌트 구조가 잘 적용되어 있는가?

하나하나 다 수동으로 만든 버튼과 실제 컴포넌트로 구성된 버튼은
작업 구조도 다르고 수정 시 시간도 다릅니다.
PM이 컴포넌트 개념을 모르더라도, 내부적으로 구조화가 잘 되어 있어야
개발 전달 시 오류를 줄일 수 있습니다.


5. Auto Layout이 적용되어 있는가?

정렬이 눈대중으로 맞춰져 있다면, 개발 단계에서 사이즈 오차가 반복됩니다.
Auto Layout을 적용하면 위치와 간격이 일관되며,
반응형 레이아웃 검토도 함께 가능해집니다.


6. 텍스트 스타일, 컬러 스타일이 토큰처럼 사용되고 있는가?

수동으로 입력한 색상이나 폰트는 변경 시 전체 반영이 어렵습니다.
Figma의 Style 기능을 활용하여 공통 속성은 반드시 스타일로 관리해 주세요.


7. 상호작용 흐름(Prototype)이 연결되어 있는가?

페이지 간 이동을 Prototype으로 연결해 두면
PM이 화면 흐름을 직관적으로 따라갈 수 있습니다.
링크 없이 “이건 다음 화면이에요”라고 설명하면 반복 피드백이 생깁니다.


8. 모바일/데스크탑/태블릿 화면이 구분되어 있는가?

동일한 기능이더라도 디바이스별로 UI가 달라진다면
디바이스명을 명확히 표시하고 구분해 주세요.
혼동을 줄이고, 전달 실수를 줄일 수 있습니다.


9. 피드백용 주석 또는 버전 설명이 포함되어 있는가?

이 버전이 최초 시안인지, 수정 버전인지, A/B 테스트 버전인지
주석 또는 텍스트 설명으로 간단히 정리해두면
디자이너에게도, 보는 사람에게도 큰 도움이 됩니다.


10. 공유 링크 권한이 ‘뷰어’로 설정되어 있는가?

디자인 링크를 보냈는데 상대방이 “접근이 안 돼요”라고 답할 경우,
작업 중이라는 인상이 강해지고 신뢰도도 낮아집니다.
링크 공유 전엔 반드시 권한이 뷰어(Viewer)로 설정되어 있는지 확인해 주세요.


마무리하며

디자인을 잘하는 것과 디자인을 잘 전달하는 것은 다른 능력입니다.
특히 협업 중심으로 움직이는 프로젝트에서는
디자인 파일 자체가 커뮤니케이션 도구로서 역할을 하게 됩니다.

이번에 정리한 10가지 체크리스트는
PM뿐 아니라 개발자, 마케터, 콘텐츠 팀 등 다양한 직군과의 협업에서
디자이너가 중심을 잡고 소통을 리드할 수 있도록 도와줄 것입니다.

다음 글에서는 디자인 피드백을 빠르게 반영하고 버전 관리를 체계적으로 하는 방법을 소개할 예정입니다.
효율적인 협업을 위해 지금부터 Figma 공유 방식도 점검해 보세요.

다국어 앱 UI, 어떻게 관리하시나요?

우리 회사는 다국어앱과 웹사이트를 지원하는 회사다.

다국어를 사용하는 회사긴 하지만 서로 결국은 영어로 소통을 하지만… 한가지 언어로도 소통이 안되는데 다국어라니;;

처음에는 한국어 혹은 영어 하나로만 구성했던 UI가
점차 중국어, 일본어, 독일어, 프랑스어, 아랍어처럼 다양한 언어로 확장되기 시작하면서
디자이너는 텍스트 길이, 폰트 차이, 레이아웃 깨짐 등의 문제를 한꺼번에 감당해야 합니다.

이럴 때마다 매번 화면을 복사해서 각 언어 버전을 따로 만들다 보면
관리도 어렵고, 수정 시 누락되는 일이 빈번해집니다.
Figma는 기본적으로 다국어 전용 기능은 없지만,
시스템처럼 정리하고 반복 가능하게 만드는 방법은 분명 존재합니다.
이번 글에서는 실제로 다국어 UI를 Figma에서 체계적으로 관리하는 방법을 단계별로 정리해보겠습니다.

1. 다국어를 고려한 레이아웃 기본 설계

처음부터 다국어를 염두에 두고 레이아웃을 짜는 것이 가장 중요합니다.
영어로 딱 맞았던 버튼 텍스트가 독일어나 프랑스어로 바뀌었을 때
두 줄로 밀리거나, 아이콘과 겹치는 경우가 생각보다 자주 발생하죠.

실무 팁

  • 버튼은 최소 20~30% 여유 공간 확보
  • 레이블 영역은 최대 언어 기준으로 텍스트 폭 예측
  • Auto Layout으로 Hug 콘텐츠 대신 Fill container 사용
  • 다국어 가능성이 있는 컴포넌트는 미리 Variants로 준비

2. 언어별 텍스트 관리 방식

Figma 자체는 텍스트 문자열 관리 기능이 없기 때문에
외부 데이터를 가져와 연동하거나,
정리된 텍스트를 수동 관리하는 구조를 세워야 합니다.

가장 많이 쓰는 방법 3가지

  1. Google Sheets 연동 (플러그인 활용)
    • 언어별 텍스트를 시트에 정리하고,
      Figma에서 플러그인(Google Sheets Sync 등)으로 불러오는 방식
    • 유지보수에 유리하고, 다국어 교정도 편리함
  2. Variants 기반 다국어 컴포넌트 제작
    • 각 언어 버전을 Variant로 정리
    • 하나의 버튼, 타이틀 컴포넌트 안에 영어/한국어/중국어 등 포함
    • 변경 시 빠르게 전환 가능
  3. 페이지 또는 프레임별 언어 분리
    • 한국어 / 영어 / 일본어 등 언어별로 페이지를 분리하여 관리
    • 파일이 복잡해지지만, 리뷰할 때는 명확함

3. 폰트와 타이포그래피 대응

언어별로 같은 크기의 글씨라도 실제로 차지하는 공간은 다릅니다.
예를 들어, 한글과 일본어는 같은 크기에서도 다소 다르게 보이고,
중국어는 자간이 좁고 높이가 더 커 보입니다.

실무 대응 방식

  • 폰트 패밀리를 언어별로 따로 설정
    • 예: 영문 → Inter, 한글 → Noto Sans KR
  • Text Style 이름에 언어명을 포함
    • 예: Heading/EN, Heading/KR
  • 시스템 상에서는 동일 스타일명을 공유하되, 실제 UI에서 구분 적용

4. RTL 언어(아랍어, 히브리어) 대응

글을 오른쪽에서 왼쪽으로 읽는 언어들은
레이아웃도 반대 방향으로 정렬해야 하기 때문에
초기에 대비하지 않으면 전체 구조를 뒤집어야 하는 상황이 생깁니다.

Figma 적용 팁

  • Auto Layout 정렬 방향을 Right-to-Left로 설정
  • Flex wrap 대신 정렬 기준(Alignment)을 활용한 구조 설계
  • 아이콘, 텍스트 위치 자동 반전 고려 (mirroring)

5. 다국어 QA 및 검수 체크리스트

디자인이 완료됐다고 해도, 실제 앱이나 웹사이트에서
텍스트 잘림, 겹침, 잘못된 언어 적용 같은 이슈가 자주 발생합니다.
아래 항목은 디자인 리뷰 단계에서 꼭 확인하는 것이 좋습니다.

  • 모든 언어에서 텍스트가 잘리지 않는가
  • 줄바꿈이나 텍스트 크기로 인한 레이아웃 오류가 없는가
  • 버튼/라벨 등의 위치가 의도대로 적용되는가
  • 언어별 타이포 스타일이 일관성 있게 적용되었는가
  • RTL 언어에서 방향 전환이 정상 작동하는가

마무리하며

다국어 UI 디자인은 번역만 잘하면 되는 일이 아닙니다.
언어마다의 시각적 특성, 레이아웃 구조, 타이포그래피 차이까지 고려해야 하기 때문에
디자이너가 처음부터 시스템적으로 설계하지 않으면
결과물의 완성도는 물론, 협업 효율도 떨어지게 됩니다.

Figma는 이런 다국어 디자인을 직접 지원하진 않지만,
Auto Layout, Variants, 텍스트 스타일, 외부 데이터 연동 등을 활용하면
충분히 체계적이고 확장 가능한 다국어 디자인 시스템을 만들 수 있습니다.

지금부터라도 화면 하나를 만들 때 “이 문장이 다른 언어로는 얼마나 길어질까?”를
먼저 고민하면서 시작해 보세요. 현업이 영어문장과 일본어 문장을 주지 않아서 화가 나겠지만..
글로벌 UX의 품질은 결국 이런 디테일에서 결정됩니다.

디자인 시스템 제대로 만들고 싶다면 – Figma 토큰 시스템

디자인 시스템을 만든다는 건 단순히 예쁜 UI 컴포넌트를 정리하는 게 아닙니다.
브랜드가 지켜야 할 일관성과 논리를 ‘코드처럼’ 관리하고 유지한다는것에 가깝죠.


그래서 디자인 시스템을 처음 설계할 때 가장 먼저 고민해야 할 것은
색상, 타이포그래피, 여백, 라운드, 쉐도우 같은 기초적인 속성값들인데요.

이런 속성값을 체계적으로 관리하는 방법이 바로 디자인 토큰 Design Token 입니다.
그리고 다행히도, Figma 안에서 이 디자인 토큰 개념을 꽤 강력하게 구현할 수 있습니다.
오늘은 디자인 시스템을 ‘제대로’ 만들고 싶다면 왜 토큰 시스템부터 시작해야 하는지,
그리고 Figma에서는 이를 어떻게 실무적으로 다뤄야 하는지를 설명해 보겠습니다.

디자인 토큰이란 무엇인가요?

디자인 토큰은 디자인 속성을 코드처럼 이름을 붙여 관리하는 방식입니다.
예를 들어 색상을 코드로 표현하면 다음과 같이 쓸 수 있습니다.

json복사편집"color-primary": "#0052CC"
"spacing-small": "8px"
"font-heading": "Roboto, 24px, Bold"

이 값들은 디자인 파일 내에서만 의미가 있는 것이 아니라,
개발자에게 넘겨줄 때도 재사용 가능한 기준점이 되죠.
변수처럼 이름만 바꾸면 전체 시스템에 반영되기 때문에
디자인의 확장성, 유지보수성, 협업 효율성이 모두 높아집니다.


Figma에서 토큰처럼 관리하는 방법

Figma에는 “디자인 토큰”이라는 공식 기능은 없지만,
**스타일(Styles)**과 컴포넌트 시스템, 그리고 최근에는 플러그인을 통해
토큰과 유사한 구조를 구현할 수 있습니다.

1. 색상 토큰

  • Primary / 500, Secondary / 300, Neutral / 50 등으로 이름을 규칙화합니다.
  • 스타일 패널에서 Color Styles를 만들어두고, 디자인 전체에 연결합니다.
  • 브랜드 색상이 바뀌더라도 스타일만 수정하면 전체에 적용됩니다.

2. 텍스트 토큰

  • Heading / XL, Body / Small, Caption / Light 등의 이름 규칙을 설정합니다.
  • Text Style을 계층적으로 관리하면, 타이포그래피 시스템이 안정적으로 유지됩니다.

3. 여백, 라운드, 쉐도우

  • Figma 기본 기능에서는 여백과 Radius 같은 수치를 직접 변수화할 수는 없지만,
  • Spacing 컴포넌트 또는 레이아웃 템플릿을 만들어서 관리할 수 있습니다.
  • 최근에는 Tokens Studio for Figma 플러그인을 사용하면
    여백, 라운드 값도 변수처럼 설정 가능합니다.

플러그인 활용: Tokens Studio

실제 토큰처럼 Figma에서 데이터를 관리하고
JSON 파일로 내보내기까지 가능한 도구가 바로 Tokens Studio for Figma입니다.
이 플러그인은 다음과 같은 기능을 제공합니다.

  • 컬러, 타이포, 여백, 그리드 등의 토큰을 JSON으로 정리
  • 테마별(라이트/다크) 토큰 세트 관리
  • 코드와의 일관성 확보 (개발자와 협업할 때 유리)
  • GitHub와 연동해 토큰 변경 사항을 버전으로 관리 가능

즉, 디자인 시스템을 코드처럼 운영하고 싶다면
이 플러그인은 사실상 필수에 가깝습니다.


실무에서 어떻게 적용하나요?

  1. 기초 스타일을 토큰처럼 이름 붙여 설정합니다.
    • 개발자가 그대로 가져갈 수 있는 네이밍이 이상적입니다.
  2. 컴포넌트 내부에 토큰 스타일만 연결합니다.
    • 컴포넌트 내부에 직접 색상이나 폰트 수치를 입력하는 방식은 피해야 합니다.
  3. 중앙에서 토큰만 변경하면 전체 UI가 바뀌도록 구조를 짭니다.
    • 하나의 버튼을 수정하면 전체 버튼이 업데이트되도록 설계하는 것이 핵심입니다.
  4. 디자인과 코드의 토큰이 동일한 기준으로 작동하도록 맞춥니다.
    • 디자인 시스템 문서와 실제 CSS 변수 이름이 다르면 혼란이 생기기 쉽습니다.

마무리하며

디자인 시스템을 오래 쓰려면 무엇보다 기초 토대를 탄탄하게 쌓는 것이 중요합니다.
그 기초가 바로 디자인 토큰이고,
그 토큰을 Figma에서 체계적으로 관리하는 방식이 곧 디자인 시스템의 품질을 결정합니다.

디자인이 점점 시스템화되고 협업 중심으로 바뀌는 시대에서
Figma로 토큰 기반 디자인 시스템을 먼저 구성해두는 건
디자이너로서 갖춰야 할 중요한 경쟁력 중 하나가 될 것입니다.

다음 글에서는 Tokens Studio를 실무에서 세팅하는 과정과
디자인 시스템 문서에 반영하는 실제 사례를 함께 정리해 보겠습니다.

코딩을 몰라도 Figma 자동화 – JSON 데이터를 UI에 연결하는 법

디자인을 하다 보면 텍스트나 이미지처럼 반복되는 데이터를 프레임에 하나하나 붙여 넣는 일이 꽤 귀찮을 때가 있어요.


예를 들어 제품 목록, 사용자 카드, 뉴스 피드처럼 반복되는 UI를 작업할 때 매번 복사해서 붙이고, 또 수정하고…
이런 반복 작업은 시간도 많이 들고, 오류가 생기기 쉽습니다.
그럴 때 Figma에서 JSON 데이터를 자동으로 UI에 연결하는 방법을 알게 되면, 업무 효율이 눈에 띄게 올라갑니다.

신기하게도, 이 작업을 코딩 없이도 할 수 있습니다.
단순히 JSON 파일만 준비하면, 텍스트, 이미지, 버튼 텍스트까지 한 번에 불러와 UI에 적용할 수 있습니다.
자, 어떤 방식으로 하는지 지금부터 알아보시죠.


JSON이 뭐길래, 왜 Figma에 연결하나요?

JSON은 JavaScript Object Notation의 약자로,
쉽게 말해 데이터를 깔끔하게 정리해놓은 텍스트 파일입니다.
예를 들어 이런 식이죠:

json
[
{
"title": "여기가 제목이구요 01",
"price": "$9,000",
"image": "https://example.com/샘플.jpg"
},
{
"title": "여기가 제목이구요
02",
"price": "$9,000",
"image": "https://example.com/샘플
1.jpg"
}
]

이런 형식의 데이터를 제품 카드에 자동으로 넣고 싶을 때,
Figma에서는 플러그인을 활용하면 아주 쉽게 연결할 수 있습니다.


사용 준비 – 필요한 플러그인

대표적으로 많이 사용하는 플러그인은 다음과 같습니다.

  1. Google Sheets Sync by Figma
    • Google Sheets와 연동하여 데이터를 UI에 자동 배치
    • JSON처럼 구조화된 데이터를 Sheet에 붙여넣고 연동 가능
  2. JSON to Figma
    • JSON 파일을 직접 읽어 Figma에 텍스트나 이미지로 삽입
    • 간단한 UI 반복 요소에 아주 유용
  3. Content Reel
    • JSON 데이터를 미리 불러와 텍스트 및 이미지로 배치
    • 다국어 텍스트, 사용자 이름, 이메일 주소 같은 더미 콘텐츠 넣기에 적합

이번 글에서는 Google Sheets Sync 플러그인을 기준으로 설명드리겠습니다.
JSON을 직접 붙여넣거나 변환할 수 있고, 실시간 업데이트까지 가능하기 때문에
실무에서 가장 많이 사용됩니다.


단계별 설명 – 코딩 없이 자동으로 붙이기

  1. Google Sheet 만들기
    • Google 스프레드시트에 JSON 구조를 복사해서 붙여넣습니다.
    • 첫 번째 줄은 키 이름 (예: title, price, image 등)
    • 두 번째 줄부터는 실제 데이터 입력
  2. Figma에서 플러그인 실행
    • 플러그인 > Google Sheets Sync 실행
    • UI 요소에 텍스트나 이미지를 미리 배치해 둡니다
  3. 텍스트 요소에 속성 연결하기
    • 예를 들어 제품명 텍스트 상자를 선택한 뒤
      {title} 형식으로 키 값을 입력해 둡니다
    • 이미지 프레임에도 {image}로 설정 가능
  4. Google Sheets 링크 붙이기 & 싱크
    • 스프레드시트 URL을 플러그인에 입력하고 연결
    • “Sync” 버튼을 누르면 자동으로 데이터가 삽입됩니다

실제로 어디에 쓸 수 있을까요?

  • e커머스 제품 카드
    제품 이름, 가격, 이미지, 버튼을 자동으로 반복 UI에 넣을 수 있습니다.
  • 팀 멤버 소개 페이지
    이름, 직함, 프로필 사진 등을 텍스트와 이미지로 쉽게 연결 가능합니다.
  • 뉴스나 블로그 리스트 디자인
    제목, 날짜, 요약 텍스트를 자동 삽입하여 가독성 높은 리스트를 빠르게 완성할 수 있습니다.
  • 다국어 UI 테스트
    한 화면에서 여러 언어 데이터를 불러와 비교할 때도 유용합니다.

마무리

Figma는 더 이상 단순한 디자인 툴이 아닙니다.
데이터와 연결해서 반복되는 UI를 빠르게 구성하고,
나중에는 실제 개발 데이터와 유사한 환경에서 디자인 검토까지 가능하게 합니다.

이번에 소개한 JSON 자동화 방식은 코딩을 몰라도 충분히 쓸 수 있으며,
팀 작업 속도와 정확도를 동시에 높여줍니다.
단순 반복 작업에 시간을 쓰기보다는,
이런 툴을 잘 활용해서 디자이너가 해야 할 더 중요한 작업에 집중해 보세요.

다음 글에서는 이 방식으로 만든 템플릿을 저장하고,
다른 프로젝트에도 재사용하는 방법을 다뤄보겠습니다.
UI 자동화는 생각보다 훨씬 쉬울 수 있습니다.

Figma Auto Layout이 자꾸 꼬일 때, 정렬이 정확해지는 설정법 총정리

Figma를 사용하다 보면 Auto Layout은 잘알면 편하지만 사용법이 조금은 애매하죠?


처음에는 버튼이나 카드처럼 단순한 컴포넌트를 정렬할 때 유용하게 느껴지지만,
조금만 구조가 복잡해지면 정렬이 무너지고 간격이 뒤죽박죽되는 경우를 자주 겪게 돼요.
특히 모바일이나 반응형 UI를 설계할 때는 작은 오차가 전체 레이아웃에 영향을 주기 때문에
Auto Layout을 정확하게 이해하면서 사용해야 합니다.

이번 글에서는 Auto Layout이 꼬이지 않도록 설정하는 핵심 원리와 정렬이 정확해지는 설정법을 단계별로 정리해보겠습니다.


Auto Layout의 기본 구조, 다시 정확히 이해해야 합니다

Auto Layout은 프레임 내부에 있는 객체들의 방향, 정렬, 간격, 여백 등을 자동으로 관리해주는 기능입니다.
정렬을 정확하게 유지하려면 먼저 이 네 가지 요소를 기준으로 구조를 설계해야 합니다.

  1. Direction (방향)
    • 수평(Horizontal) 또는 수직(Vertical) 중 하나를 선택
    • 내부 요소의 배치 방향이 명확하지 않으면 정렬이 흐트러집니다.
  2. Spacing (간격)
    • 자식 요소 간 간격을 지정하는 값
    • 요소를 추가하거나 제거해도 자동 간격을 유지할 수 있습니다.
  3. Padding (여백)
    • 프레임 바깥쪽 테두리와 콘텐츠 사이의 간격을 의미
    • 상하좌우를 개별로 조정할 수 있으며, 이 값이 올바르지 않으면 정렬이 어색해집니다.
  4. Alignment (정렬 기준점)
    • 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 등 기준점을 설정
    • 내부 요소가 다를 경우 기준점 설정이 핵심이 됩니다.

실제로 많이 헷갈리는 설정 실수 TOP 3

1. Resize 속성을 제대로 설정하지 않음

Auto Layout 내 요소들은 기본적으로 Hug contents로 설정되는데요.
이럴 경우, 텍스트나 이미지의 크기가 커지면 전체 프레임이 함께 튀어버릴 수 있습니다.
반대로 Fill container로 설정하면 부모 프레임의 폭에 맞춰 늘어나기 때문에
정해진 구조에서 안정적으로 작동합니다.

팁: 텍스트가 들어간 버튼은 내부 텍스트는 Hug, 버튼 배경은 Fill로 설정하는 것이 가장 자연스럽습니다.

2. 간격(Spacing)이 아니라 Margin을 조정하려는 실수

컴포넌트 간의 간격을 조정할 때, 종종 외부 여백을 따로 지정하려는 경우가 있습니다.
하지만 Auto Layout 구조 안에서는 margin 개념이 없고 spacing 값으로 전체를 조정해야 하기 때문에
하나의 요소만 튀어나오는 문제가 생깁니다.
이럴 때는 Dummy Spacer(빈 프레임)를 삽입해서 공간을 제어하는 방식이 더 안정적입니다.

3. Nest된 구조에서 정렬 충돌

Auto Layout을 중첩해서 사용할 때 자식 프레임과 부모 프레임의 방향이 다르면
정렬이 꼬이거나 의도하지 않은 위치로 밀리는 현상이 생깁니다.
이럴 땐 각각의 레벨에서 direction과 alignment 설정을 정확히 확인해야 합니다.


정렬이 정확해지는 실전 설정 팁

여기서 진짜 중요한 팁이니 이 부분을 반드시 이해하고 사용해주세요.

  • 레이어 순서를 항상 왼쪽 → 오른쪽 / 위 → 아래로 맞춰주세요
    정렬 기준은 레이어 순서와 일치하기 때문에 드래그 순서가 중요합니다.
  • Spacing between items와 Padding은 명확히 구분해 주세요
    내부 아이템 간 간격과 외곽 여백은 개념적으로 완전히 다릅니다.
  • Fill vs Hug vs Fixed의 차이를 이해하세요
    Fill은 부모를 기준으로 크기를 맞추고, Hug는 콘텐츠 기준, Fixed는 고정입니다.
    컴포넌트가 작동 방식에 따라 다르게 설정되어야 합니다.
  • Smart selection은 정렬 구조를 망가뜨릴 수 있습니다
    여러 개의 요소를 선택하고 간격 조정할 때, Auto Layout 설정이 덮여버리는 경우가 생기기 때문에
    반드시 전체 구조를 파악한 뒤 조작하는 것이 좋습니다.

마무리

Auto Layout은 단순한 정렬 도구가 아니라,
디자인 시스템을 구성하고 반응형 UI를 설계할 때 핵심이 되는 구조 설계 도구입니다.
하지만 이 기능은 잘못 쓰면 오히려 시간을 더 낭비하게 만드는 원인이 되기도 합니다.

이번 글에서 정리한 원칙과 설정 방법을 바탕으로,
Auto Layout을 더욱 정밀하게 사용해보시기 바랍니다.
꼬이지 않는 Auto Layout을 만드는 가장 좋은 방법은
처음부터 방향, 크기, 여백, 정렬을 기준으로 구조를 짜는 것이라는 점, 꼭 기억해 두세요.

다음 글에서는 실제 디자인 시스템 구축에서 Auto Layout이 어떤 방식으로 쓰이는지
실전 사례 중심으로 소개해보겠습니다.