[내일배움캠프] 피그마 - 프레임, 컨테이너, 오토레이아웃, 컨스트레인트, 프레임 리사이징

<피그마>
UI 디자인에 사용하는 가장 대중화되고 범용성 높은 디자인 툴

 

● 프레임

피그마에서 코드 블록(컨테이너)를 만드는 기능

피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체

디자인이 코드로 전환되어 블록처럼 쌓이는 식으로 저장
→ 웹과 앱이 코드를 읽고 다시 디자인으로 전환하여 보여주는 방식

▶ 프레임이 안에 다른 개체나 프레임을 담은 경우 '컨테이너'라고도 부른다

 

● 그룹

여러 개체를 하나로 묶어주는 기능

여러 개체를 한번에 조정하거나 디자인을 정리할 수 있다

프레임과 달리 코드 블록으로 인식되지 않고 이미지 개체로 인식하므로 잘 사용하지 않는다

프레임과 그룹의 차이
프레임은 코드 블록을 만드는 기능 vs 그룹은 코드 블록이 아니다
프레임은 개별 속성 적용 가능 vs 그룹은 속성을 정의할 수 없다
→ 보통 프레임만 사용한다

 

● 오토레이아웃

레이어를 쌓고, 프레임을 배치하는 피그마의 핵심 기능

개개인마다 다른 디스플레이 크기에 따라 레이아웃을 유동적으로 적용시켜주는 기능

오토레이아웃 설정으로 인한 프레임의 변화

패딩: 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백

보더: 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 태두리

마진:: 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

▶ 오토레이아웃을 한다 = 개체를 패딩으로 감싸는 것 (우리가 아는 UI의 크기 = 개체의 크기 + 패딩)

컨텐츠를 패딩으로 감싸고 → 그걸 마진으로 감싸서 → 다른 컨테이너와 합침

 

● 컨스트레인트

오토레이아웃은 그 자체로 레이아웃을 자동으로 쌓을 수 있다

반응형 웹사이트의 경우 실시간으로 같이 움직이는 레이아웃을 만들기 위해 오토레이아웃이 움직일 때의 규칙이 필요

즉 오토레이아웃 안에 있는 자식개체들이 움직이는 조건이 필요한 것.

(자식 컨테이너를 선택했을 때 나오는 파란색 점선이 컨스트레인트의 기준 의미)

 

● 프레임 리사이징

Fixed: 프레임이 기본적으로 가로와 세로 길이가 고정되어 있는 상태

→ 프레임을 오토레이아웃으로 감쌈녀 Fixed 외의 사이즈갑싱 생기는데, 이게 리사이징

즉 오토레이아웃 안에 있는 자식개체의 크기가 변하는 조건 or 자식개체에 따라 부모개체의 크기가 변하는 조건

 

● 포지션

피그마에서 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때 사용하는 기능\피그마에서 포지션은 프로토타입 패널에서 설정할 수 있다 (다만 Absolute는 포지션 패널이 아닌 오토레이아웃 패널에서 조정 가능)1) Static일반적인 요소들이 가지고 있는 포지션. 스크롤을 하면 화면과 같이 따라 움직임2) Fixed화면 전체를 기준으로 스크롤을 하더라도 고정된 위치에 있음웹사이트의 헤더나 하단의 버튼 등3) Absolute부모 컨테이너를 기준으로 스크롤을 하더라도 고정된 위치에 있음즉 부모 컨테이너 안에서 스크롤이 이루어져도 고정되어 있음4) Sticky스크롤에 따라 static과 fixed를 전환하는 포지션스크롤을 따라 움직이다가 특저ㅇ 위치부터는 상단에 고정

 

● 오토레이아웃, 컨스트레인트, 리사이징 과제

숙제 설명
예시를 보고, 똑같이 움직이도록 만들어 주세요.
2주차에서 배운 오토레이아웃, 컨스트레인트와 리사이징을 활용해 주세요.
움직임에 따라 중복 정답이 있을 수 있어요.

예시 영상
https://drive.google.com/file/d/1UsrNDjGo0u7dHhSph137xdkPTR1-fsZF/view?usp=sharing
https://drive.google.com/file/d/1y2NefcWflhdBPwlZ8Lc8UkjgsyN814kE/view?usp=sharing
https://drive.google.com/file/d/1QwWM7paXYfLhLkCyHqieyVIf0Hd3bDfN/view?usp=sharing
https://drive.google.com/file/d/1oqN8r4jE5889sZ1xfrVN7ijFXXnQcwPx/view?usp=sharing
https://drive.google.com/file/d/1XaL3OzJkoLSU4K-kwipmF9-qHJXHbmUt/view?usp=sharing
https://drive.google.com/file/d/1N1VqRTtWZrATuDBHrkkE4gFqKNsytKbg/view?usp=sharing

힌트 및 해설
https://teamsparta.notion.site/2-_-040cc22172d949a289861ffdae6c6db4?pvs=4

[피그마 기초] 2주차_강민재.fig

0.03MB