피그마 Layout grid

안녕하세요 찐망고입니다.

할게 많은 와중에 피그마 포스팅 중이고 

피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요.

참고로 너무 많은 기능을 지원하는데 그런건 나중에 따로 썰 풀도록 하고

 

0. styles등록 (text, color) - 이전글 참조

2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기

피그마 ui-스타일가이드, 스타일 등록하기

1. Layout grid

2023.07.05 - [피그마] - 피그마 Layout grid

피그마 Layout grid

2. Auto Layout

2023.07.07 - [UIUX디자인/피그마] - 피그마 Auto Layout (오토레이아웃)

피그마 Auto Layout (오토레이아웃)

3. Constraints

2023.07.11 - [UIUX디자인/피그마] - 피그마 Constraints, 컨스트레인트

피그마 Constraints, 컨스트레인트

4. Component & Variant

2023.07.13 - [UIUX디자인/피그마] - 피그마 컴포넌트, 베리언트 (Component, Variants)

피그마 컴포넌트, 베리언트 (Component, Variants)

5. Plugins

6. Prototype

이런식으로 포스팅할 예정이에요. 나머지애들은 포스팅 하면서 짬짬이..

 

오늘은 Layout grid에 대해서 해보져..

일단 레이아웃그리드가 보이려면 프레임이 필요해요

피그마 프레임 툴

프레임 사이즈들

아이폰 13미니 사이즈

빨간 동그라미를 더블 클릭하면 이름을 수정 할 수 있어요

프레임을 눌러서 오른쪽 패널을 보면 

레이아웃그리드

그리드도 저렇게 스타일 등록이 가능하구 더하기 버튼을 누를때마다 그리드가 나와요

더하기버튼을 누르면 또 나오고 또 나오고 또 나와요 겹치기 가능

 

레이아웃그리드 - 그리드 탭

 

그리드끼리 겹치면 저렇게 안내선 같은 모양도 가능하죠~~

레이아웃그리드 겹치기

                 

레이아웃 그리드 종류가 세가지에요

첫번째는

레이아웃그리드 - 그리드

이렇게 격자무늬를 넣을 수 있는 메뉴고 size는 픽셀을 뜻하고 컬러는 색상 10%는 불투명도를 뜻합니다.

100px박스를 만들어 비교

100 * 100 박스를 만들어서 왼쪽으로 100px만큼 이동했거든요 정확하죠??

아 프레임을 작업후에 레이아웃 그리드 패널을 활성화 시키려면 

레이어에서 해당프레임을 선택하거나 아니면 저 동그라미 부분인 이름을  눌러도 됩니다.

 

레이아웃그리드 - columns

레이아웃 그리드를 Columns로 변경하면 저렇게 선이보여요~~

오호.. 저 컬럼그리드에 대해 또 이론적인 내용을 썰풀자면 디자인그리드에 관련된 설명이 필요한데

그거 따로 또 포스팅 해볼게요.. 끝이 안나는 포스팅의 세계...

 

count는 그리드의 갯수 

type은 left, right, center, stretch가 있고

Gutter는 그리드간의 간격을 말하고

width는 그리드 사이즈

Type은 left와 right일땐 offset이라는 칸과 함께 각각의 좌우여백

center일때는 활성화가 안되구

Stretch일땐 margin이라고 해서 양쪽여백으로 넣을 수 있어요 ㅎㅎ

 

레이아웃그리드 stretch 와 margin

컬럼그리드는 저렇게 모바일 형태에선 4개, 

pc크기에선 12개를 꺼내서 디자인의 전체적인 여백을 맞추는데 사용하면 좋습니다.

 

row는 생략...

row는 가로 그리드를 말해요 top, bottom, center, stretch가 있고

컬럼그리드와 속성은 같습니다.

 

제가 자주 쓰는 그리드 형태중엔 안내선 형태의 모양도 많이 쓰는데요

안내선 느낌의 그리드

 

좌 우 안내선 느낌의 레이아웃 그리드

피그마에서 안내선이 없는건 아니거든요

줄자가 있어서 줄자에서 안내선을 뽑아내면 되는데 ㅎㅎ

저는 마진값에 맞춰 스타일을 등록해놓고 자주 사용해요 정확하고 좀 더 빠르니까요

레이아웃그리드 스타일 등록