Figma 'Auto Layout'으로 주문서 만들기 _ 첫번째

 

최근 피그마의 Auto Layout 기능에 푹 빠져있어요!

회사에서 일 할 때도 그렇고

개인 프로젝트를 만들 때도

굉장히 유용하답니다

 

Auto Layout을 사용하면

문서간 순서를 쉽게 바꿀 수도 있고

중간에 글이 빠져도 흐트러지지 않은 채

디자인 레이아웃을 유지 할 수 있어요

 

오늘은 주문서, order list를

Auto Layout으로 만들어 보겠습니다!

 

 

<완성작 미리보기>

 

 

---

 

 

먼저 Auto Layout을 만드는 단축키를 알아보겠습니다..!

맥 기준 shift(⇧) + A 입니다!

오브젝트를 잡고 shift(⇧) + A를 누르면 오른쪽 원형처럼

컨트롤러가 생성된답니다!

왼쪽 레이어 패널에서도 Frame60이 생성된걸 확인 할 수 있어요!

 

 

그리고 오른쪽 패널에선 Auto layout을 조절 할 수 있는

패널이 나타나게 됩니다!

 

 

오른쪽 패널 내용은 오늘 만들 주문서를

하나하나 생성하면서 알아보기로 해요!

 

---

 

먼저 텍스트를 Auto layout으로 정렬하는 방법 먼저 알려드릴게요!

프레임을 생성하고 텍스트를 3개 입력합니다.

 

저는 제품명, 주문확인, 수량

이렇게 3개로 나눠서 작업 할 계획이어서

product, check, number 3개의 텍스트를 각각 생성해 주었습니다.

 

 

이제 위에서 배운 단축키로

텍스트를 하나하나 Auto layout으로 감싸줄거예요!

 

먼저 product 텍스트를 Auto layout으로 감싸줬어요

그다음 check, number도 차례차례 Auto layout으로 감싸줄게요!

 

 

 

그러면 세 개의 Auto layout이 생성되는데

마지막으로 세 개를 전부 다 잡은 뒤

한번 더 Auto layout을 해주세요!

 

 

 

그러면 이 세개의 항목을 정리 할 수 있는

준비는 모두 완료되었어요!

 

이제 텍스트를 하나하나 뜯어볼까요?!

오른쪽 패널에서 Auto layout을 찾으셨나요?

Resizing 섹션의 W, H가 보이시나요?

W는 width, H는 height의 약자로 각각 가로, 세로 길이를 나타내요!

숫자는 109px, 40px이구요

그 옆의 Hug를 잘 확인해야해요!

 

Auto layout에은 세가지 옵션이 있어요

 

1. Fixed width

2. Hub contents

3. Fill container

 

이렇게 세가지예요!

(다른건 나중에 알아보자구요)

 

 

---

1. Fixed width - 정해진 길이로 고정

 

내가 이 텍스트의 길이를 200으로 고정하고싶다!

하면 큰 프레임의 길이에 상관없이 길이가 200으로 고정 된답니다

 

2. Hug contents - 텍스트를 감싼 길이

 

 

텍스트 길이만큼만 프레임 길이가 고정됩니다

hug! 텍스트를 안아준다!

라고 생각하면 쉽게 이해할 수 있어요

 

 

3. Fill container

 

큰 콘테이너를 꽉 채울 만큼

텍스트 프레임이 늘어나는 기능입니다.

 

 

사실 이렇게 말하면 잘 감이 안오죠 😂

다음 포스팅에서 이 세가지를 적절히 조합해서

콘텐츠들을 정렬해보겠습니다.

 

 

---

 

 

디자인 작업이 필요하신가요?

피그마, 일러스트, 웹, 모바일 화면부터

포스팅, 메뉴판, 썸네일, 상세페이지까지!

산업 디자인과 출신 3년차 디자이너가

다 만들어 드릴 수 있어요 :)

 

요기로 연락주세요!

twolove2232@naver.com