Figma Layout Grid

 

 

Layout Grid 

- 반응형 웹을 위한 기능

 

 

Layout Grid를 알아야하는 이유

다양한 해상도의 WEB 또는 APP 환경에 대응하여 프로덕트를 제작 시,

전달하려는 정보의 완성도를 유지하기 위해 일관성 있는 Layout Grid 규칙이 필요하기 때문

 

 

 

Layout Grid 구성요소

1. Margin : 콘텐츠 영역 밖의 좌우 여백

2. Column : 해상도 세로 열

3. Gutter : Column과 Column 사이의 여백

 

 

 

---

 

실습

 

Frame을 누르면

 

 

오른쪽에 이런 List가 등장한다.

여기서 원하는 것을 클릭하는데, 일단 1440 x 1024인 Desktop을 선택해서 해준다.

 

 

Layout grid 옆에 + 버튼을 누르고, Grid였던 스피너를 Columns로 바꾼 뒤에

Count와 Margin Gutter를 적절히 바꿔주는데, 이 권장사항은 material design 사이트에 있다.

 

 

이런 Layout Grid의 스타일은 지정해놓고 계속해서 사용할 수 있는데,

Layout grid 옆에 네모 네개를 누르고, Grid Style 옆에 + 버튼을 누르고 이름을 지정해주면 된다.

 

 

이용할때도 마찬가지로,

Layout grid 옆 + 버튼이 아니라 네모 상자 네개를 누른 뒤, 이렇게 등록되어있는 것들 중 선택하면 된다.

 

 

 

참고

https://youtu.be/RqDdSn9yuWI