[클라우딩 어플리케이션 엔지니어링 TIL] 240131 - Part 1. 피그마 툴 학습하기 (심화)

Intro

---

강의를 착각해서 이번 6주차가 다 피그마 수업인 줄 알았는데 아니었다...ㅎ 옆에 날짜 안보고 그냥 하루에 한 파트인 줄 알았따 ㅎㅎ

또 밀려버렸다.. 이제 바로 리액트 강의 들어가는데.. 분발해야지 ㅠㅠ

 

 

 

 

 

오늘 학습한 내용

: 오토레이아웃 개념, 실습

---

오토레이아웃 (Auto Layout)

반응형 UI를 만드는 데에 유용한 기능이며,

오른쪽 사이드바의 Auto Layout을 클릭하거나 단축키 Shift + A로 오토레이아웃을 설정할 수 있다. (해제: Option + Shift + A)

CSS에서 flex와 기능이 비슷하고 디자인 시간을 단축 시킬 수 있는 장점이 있어 많이 사용된다.

레이어를 정렬할 때 주로 사용하고 레이어 추가/삭제가 유연하고 오토레이아웃 설정 시 기본으로 마진과 패딩이 적용된다. 

 

오토레이아웃 패널 특징

• 수평, 수직 정렬, Wrap 기능이 있고 flex와 유사하다.
• 패딩 값 좌/우, 상/하를 콤마로도 각각 지정이 가능하다.

 

 

오토레이아웃 실습

---

검색어 입력창 UI

 

• border의 stroke 색상은 주로 #CCC나 #DDD를 사용한다.

 

---

카드 UI

 

 

• 단축키 cmd + D를 누르면 이전에 했던 작업을 그대로 실행할 수 있다. 컴포넌트를 복사할 때 유용하다.
• 크기를 늘리고 줄일 때 오토레이아웃 안에 레이어들의 크기를 벗어나지 않게 하기 위해 resizing 속성을 Fill로 설정해줘야 한다.

 

 

 

 

마무리

---

피그마 직접 실습을 해보니까 은근 재밌었다.

강사님 강의 그대로 따라하니까 진짜 실무에서 쓰이는 디자인이 만들어지는 게 신기했다.

열심히 배워서 프로젝트 때 디자인까지 신경써서 보기 좋게 구현해봐야겠다.