Figma Grid: Config 2025에서 발표된 그리드 레이아웃
Figma Grid란?
Figma Grid는 기존 Auto Layout의 한계를 넘어서 2차원 디자인 작업을 더 쉽고 유연하게 할 수 있도록 만든 새로운 Auto Layout 옵션입니다.
그동안 Auto Layout은 수직 혹은 수평 한 방향만 정렬이 가능했지만, Grid는 가로+세로 동시에 정렬이 가능한 레이아웃 시스템입니다.
왜 Grid가 필요했을까?
기존에 Auto Layout의 한계 때문인데요. 왜 그리드가 필요한걸까요? 오토레이아웃을 주로 작업을 하지만 내가 아니면 이해가기 어려운 구조로 되어있고 가끔 내가 작업한 것도 헷갈리기도합니다. 오토레이아웃이 너무 복잡한 구조가 되기 때문이었죠.
- 디자인은 본질적으로 2차원인데, Auto Layout은 1차원(가로나 세로)에만 초점
- Auto Layout을 쓰다 보면 컨테이너 안에 또 컨테이너를 넣는 복잡한 중첩 구조가 생김 → 구조가 깊어지고 유지보수 어려움
- 다른 디자이너의 파일을 열었을 때 구조 파악이 어렵고, 협업에 어려움
- 디자이너는 유연성과 구조 모두 필요하지만, 기존 Auto Layout은 구조에 치우쳐 있었음
Auto Layout vs Grid
| 정렬 방향 | 한 방향(세로 or 가로) | 두 방향(세로 + 가로) |
| 중첩 구조 | 컨테이너 안에 컨테이너 필요 | 간결한 구조 |
| 배치 유연성 | 레이어 순서 민감 | 자유로운 배치 가능 |
| 디자이너 경험 | 복잡함, 제약 많음 | 직관적, 시각적 조작 중심 |
주요 특징 및 작동 방식
- 2차원 레이아웃
기존 Auto Layout이 한 방향(가로 또는 세로)으로만 요소를 배치했다면, 새로운 Grid는 행(Row)과 열(Column)을 동시에 정의할 수 있습니다. 즉, 웹의 CSS Grid처럼 복잡한 대시보드, 카드형 UI, 갤러리 등 다양한 구조를 손쉽게 설계할 수 있습니다. - 트랙(Track)과 셀(Cell) 제어
각 행과 열의 크기를 개별적으로 지정할 수 있고, 요소를 여러 셀에 걸쳐 배치(Span)하거나, 특정 위치에 정확히 놓을 수 있습니다.
예시: CSS에서 grid-column: 1 / 4처럼, Figma에서도 요소를 1번 라인에서 4번 라인까지 걸치도록 설정할 수 있습니다. - 간격(Gutter)과 마진(Margin)
행/열 사이의 간격과 전체 Grid의 바깥쪽 여백을 각각 세밀하게 조정할 수 있습니다. 이는 CSS Grid의 gutter, margin과 동일한 개념입니다. - 레이어(쌓임) 제어
Grid 안의 요소는 레이어 패널에서 순서를 바꿔 z축(z-index) 제어가 가능합니다. 겹치는 디자인에서 어떤 요소가 위에 올지 쉽게 조정할 수 있습니다. - 반응형 미리보기
Grid 프레임을 실시간으로 리사이즈하며, 요소들이 어떻게 반응(Resizing)하는지 즉시 확인할 수 있습니다.
이는 실제 웹에서의 반응형 동작을 미리 시뮬레이션하는 데 매우 유용합니다. - CSS Grid와의 직접적 연동
Figma의 Dev Mode에서는 Grid 설정이 실제 CSS 코드(grid-template-columns, grid-template-rows 등)로 바로 변환되어 개발자와의 협업이 쉬워졌습니다. - 중첩(Nesting) 지원
Grid 안에 Auto Layout을 넣거나, Grid 안에 또 다른 Grid를 넣는 등 복잡한 중첩 구조도 자유롭게 설계할 수 있습니다
다음과 같이 Grid를 사용할 수 있습니다
Gap과 Padding 역시 다음과 같이 직관적으로 상세하게 조정할 수 있습니다.
이미지는 그리드에 맞게 사이즈를 조정하여 넣을 수 있습니다.
가장 불편했던 오토레이아웃의 단점. 이제 레이어에서 순서를 바꾸는 것으로 어떤 것이 가장 위에 올라올지 그 순서를 쉽게 변경할 수 있습니다.
그리드안에 중첩으로 오토레이아웃이나 다른 그리드를 그 안으로 넣을 수 있는데 이때 커멘트 키를 사용하여 그 안으로 넣을 수 있습니다
만약 그리드와 상관없이 그 위에 얹고 싶다면, ^ 컨트롤 키를 사용하여 absolute position을 사용할 수 있습니다.
데브모드를 통해 CSS 그리드의 형태임을 확인할 수 있습니다.
CSS 그리드에 대해 더 자세히 알고 싶다면 다음의 아티클을 추천합니다
https://uxdesign.cc/figmas-new-grid-you-must-understand-css-grid-as-a-designer-fbb00416e1cc
Figma’s new grid — you must understand CSS Grid as a designer
At Config 2025, Figma rolled out many exciting updates, including a brand-new layout grid. At first glance, it might seem like just…
uxdesign.cc
"이전" 오토레이아웃은 어떻게 되나요? 이제 쓸모없어진 건가요?
1차원 자동 레이아웃은 전혀 중복되지 않습니다. Figma에서 주로 Flexbox 유사 기능으로 사용했던 도구입니다. CSS Grid와 Flexbox는 서로 다른 용도로 사용됩니다. Grid는 2차원이고 Flexbox는 1차원입니다 . 하지만 서로 보완하도록 설계되었습니다.
자동 레이아웃 → Flexbox 모방 (1차원 레이아웃 - 행 또는 열)
Figma Grid → CSS Grid 모방 (2차원 레이아웃 - 행 과 열)
피그마 블로그를 통해 더 자세한 내용을 확인해보세요
https://www.figma.com/blog/config-2025-recap/
Config 2025: Pushing Design Further | Figma Blog
Dylan Field runs down everything we launched at Config 2025 and explains why pushing design to production and upleveling craft are key to making Figma a single source of truth for building products.
www.figma.com