피그마 기초 / 글래스모피즘 카드 만들기 / day05 / 25.04.07

오토레이아웃 단축키Shift+A

피그마의 핵심 기능 중 하나, 반응성과 유연성이 뛰어난 동적 레이아웃을 만들 때 굉장히 유용한 기능.

기본으로 프레임에 해당 속성이 포함되어 있으며 프레임 내부 구성요소들의 배열 방향, 간격, 패딩(안쪽 여백,상하좌우), 정렬 등 다양한 옵션 설정 가능.

이를 통해서 내부 컨텐츠 크기에 따라 프레임 크기가 자동으로 조절되거나 반대로 프레임 크기에 따라 컨텐츠의 사이즈를 자동으로 조절할 수 있음. 오토레이아웃을 사용하게 되면 디자인 내용이 수정될 때 각 요소의 크기나 위치를 직접 편집할 필요가 없어서 프로세스를 크게 단축시킴.

• 프레임에서만 쓸 수 있고, 프레임 안에 컨텐츠를 나열할 때 씀!
• 글자,이미지,컨텐츠가 들어가려면 프레임으로 만들어야함!
• margin : 프레임과 프레임 사이의 여백
• gutter,gap : 컨텐츠와 컨텐츠 사이의 여백 

[오토레이아웃 만들어보기 실습]

작은 디자인 레이아웃을 만들어놓고 오토레이아웃으로 복제해서 쓰면 손쉽게 쓴다. 

· 도형만들고 80*40 좋아하는 색 채우기 

· 사각형 도형 클릭된 상태에서 Shift+A 누르면 오토레이아웃 적용됨.

· 바(-)와 빗금(///)이 보이는 부분이 패딩 (패딩부분의 색상변경 가능! 오토레이아웃 이름을 클릭하면 패딩이 보임!)

· 안쪽 사각형 클릭하고 Ctrl+D,D,D 누르면 컨텐츠 영역이 자동복제됨. 

· 오토레이아웃 패널에서 Direction 바꿔줄 수 있음.

· height : hug 컨텐츠 옵션: 부모 프레임이 자식 프레임 넓이에 맞춰서 안아준다, 자식에 설정된 높이에 맞춰서 부모 프레임이 늘어남.

· Resizing fixed width를 500으로 바꾸면 안쪽 이미지들이 자동으로 늘어난다.

· gap 옵션 설정 가능 : 컨텐츠와 컨텐츠 사이 더 늘리거나 줄이고 싶을 때 하나로 통일해서 늘 동일하게 준다. 20px가장 많이 씀.

· padding 첫번째 옵션은 좌우, 두번째 옵션은 상하를 뜻함.

  (각각 따로 지정하는 건 패딩 오른쪽에 모서리 끊긴 사각형 누르면 됨. 패딩은 동일하게 주는 게 예쁘게 나오고, 짝수 사용하는 것이 가장 예쁘게 잘 나옴.)

· Alignment 옵션 : 회색영역이 프레임을 의미. 초기설정은 왼쪽상단에서 가로방향으로 배치된다고 나와있음.

 

[오토레이아웃실습2]

 

[글래스 모피즘 카드 만들기 실습] 

①배경 프레임 만들기-Unsplash에서 이미지 가져와 Frame안에 넣기 

②도형으로 카드 380*240 만들기, corner radius :16, Fill : FFF, opacity:20%,stroke:FFF,opacity:40%

③원 도형 2개 카드 뒤에 오도록 배치하고 ctrl+[ 눌러 카드 뒤로 보내기

④카드모양 클릭 후 Effects + 클릭한다. 옵션창에서 Background blur선택, blur크기 24. (투명한 카드 뒤에 비치는 도형 효과처럼 나타내기)

⑤payment 타이핑하고 카드는 보통 선명한 고딕체 사용한다. bold 20size, position x축으로부터 20, y축으로부터 23

⑥유효기간 : 09/25써주고 Regular, 12size 아래에 써주기 

⑦카드번호 : 맨아래 숫자 4개 쓰고 4칸 복제해서 간격 맞추고 spacing 8, 카드번호 다 썼으면 Ctrl+G 그룹으로 묶기 

⑧카드칩 : 도형틀 사각형으로 오른쪽에 width:48, height:38, corner radius:8, Fill:fff opacity 40%, Stroke:fff opacity 60% *stroke(테두리)가 흰색이면 입체효과가 떨어진다. stroke