Figma Grid 베타 기능: 정밀한 레이아웃 설계를 위한 새로운 도구 🧱

피그마(Figma)에 새롭게 추가된 Grid 베타 기능은 그리드 시스템을 더 정밀하게 제어하고 사용자 지정할 수 있도록 도와줍니다. 디자이너와 개발자 모두에게 유용한 이 기능을 쉽게 설명해 드릴게요!

🌟 Grid 베타 기능이란?

Grid(그리드)는 디자인할 때 요소들을 정돈되고 깔끔하게 배치할 수 있게 해주는 가이드선이에요.

기존에도 피그마에서 그리드를 쓸 수 있었지만, 이번 Grid 베타에서는 더 정밀하고 유연하게 설정할 수 있는 기능이 생겼어요!

특히 컬럼(column), 행(row), 간격(gutter), 여백(margin) 등을 개별적으로 제어할 수 있고, 반응형(Responsive) 디자인을 위한 설정도 훨씬 쉬워졌어요.


✅ 왜 좋은가요?

                        기존 그리드                                                              Grid 베타 기능

전체 레이아웃에 같은 설정만 적용됨	프레임마다 다른 설정 가능
간격이나 여백을 수동 계산	자동 적용 및 미리보기 제공
모바일, 태블릿, PC 화면 대응 어려움	반응형 설정이 쉬움

이제 모바일에서는 4컬럼, PC에서는 12컬럼 이런 식으로 나눠서 작업할 수 있어요!

🛠️ Grid 베타 기능 설정 방법

피그마에서 프레임(Frame)을 하나 선택해요

오른쪽 사이드바의 ‘Layout Grid’를 클릭 ➜ ‘+’ 버튼 눌러 추가

Grid 타입에서 Column, Row, Grid 중 선택

아래 설정에서 다음을 조정할 수 있어요:

Count (컬럼/행 수)

Gutter (간격)

Margin (여백)

Alignment (왼쪽/오른쪽 정렬 등)

반응형 디자인을 할 때는 Viewport Width에 따라 다르게 설정 가능

💡 꿀팁

프레임마다 다른 그리드를 적용할 수 있어요

Layout Grid 설정은 컴포넌트에도 적용 가능해서 디자인 시스템에도 유용해요

디자인을 개발자에게 넘길 때, 수치 기반 설명이 더 정확해져요