오늘은 지난번 강의에 이어서 피그마에 대한 심화 내용을 배우게 된다
실습도 진행하니 집중해서 잘 듣고 정리해야겠다
# 오토레이아웃
오토레이아웃이란 CSS의 flex와 유사한 기능이다
자주 사용되니 잘 알아두자
① 오토레이아웃으로 설정해주고 싶은 요소들을 드래그한다
② 단축키 shift + a 를 눌러 하나의 Frame으로 묶인 오토레이아웃으로 설정해준다
오토레이아웃 내의 요소들은 자동으로 정렬된다
오토레이아웃을 설정하면 요소의 크기가 늘어나거나 줄어들 때 자동으로 맞춰준다
# 오토레이아웃 실습
# input 컴포넌트 생성
1. text를 입력한 후 shift + a 로 오토레이아웃 설정을 한다
2. text 컴포넌트의 margin, padding, fill, stroke 값을 적절하게 설정한다
▶border color : ccc / ddd 가 가장 많이 사용된다
▶placeholder color : 777 이 가장 많이 사용된다
# button 컴포넌트 생성
1. input 컴포넌트와 동일하게 margin, padding, fill, stroke 설정을 한다
2. input 과 button 컴포넌트를 하나의 오토레이아웃으로 묶는다
3. input 컴포넌트의 오토레이아웃 속성을 fill 로 변경한다
=> searchBar의 크기가 바뀌면 input 컴포넌트의 크기가 알아서 변경된다
이 밖에도 여러가지 오토레이아웃 속성이 있다
사이드바에서 오토레이아웃 관련 설정을 이것 저것 클릭해보며 어떤 기능이 있는지 확인해보자
# 오토레이아웃 실습
오토레이아웃을 적용하여 만든 카드 리스트이다
# 컴포넌트
컴포넌트란 언제든지 재사용할 수 있도록 만들어진 디자인 요소이다
예로 버튼, 레이아웃, 아이콘 등 이 있다
상단의 툴바에서 가운데 요소를 클릭하면 컴포넌트를 생성할 수 있다
가장 하단의 ◆ 4개의 컴포넌트 : 메인 컴포넌트
상단 2개의 ◇ 컴포넌트 : 인스턴스 (메인 컴포넌트의 복사)
메인 컴포넌트의 요소를 수정하면 동일한 모든 인스턴스에 적용된다
주의할 점은 인스턴스를 직접 수정하지 말아야 한다는 것이다
수정이 필요하다면 메인 컴포넌트를 수정해야 한다
만약 인스턴스를 개별적으로 사용하고 싶다면
가장 오른쪽의 점 3개를 클릭한다
이 곳에서 detach를 클릭하면 인스턴스가 아닌 frame 으로 변경된다
# Properties
Properties는 메인 컴포넌트에서만 설정 가능하다
가장 자주 사용되는 Properties는 variant 이다
# variant
variant는 재사용에 매우 유용하다
지정해 준 값을 선택만 하면 인스턴스의 설정이 지정값으로 바로 변경된다
# 컴포넌트 실습
Properties 의 variant 설정을 통해 만든 다양한 종류의 버튼이다
# 반응형 설정 Constraints
부모 컴포넌트의 하위 컴포넌트에 제약을 주는 것으로 반응형 컴포넌트를 설정할 때 필수이다
# 새로 알게 된 점
피그마 심화 강의를 통해서 몰랐던 피그마의 숨은(?) 유용한 기능을 많이 배웠다
특히 반응형을 위한 기능들이 정말 유용한 것 같다
피그마를 배우면서 가장 중요하다고 느끼는 것은 단축키를 자유롭게 사용하는 능력인 것 같다
단축키를 잘 알고 있다면 매우 빠르고 간단하게 원하는 요소를 생성하고 필요한 설정을 할 수 있을 듯하다
피그마는 재미있고 유용한 툴이다
'TIL > 프로그래머스 데브코스' 카테고리의 다른 글
클라우딩 어플리케이션 엔지니어링 TIL Day 25 - 프로토타입 제작하기 (1) | 2024.02.09 |
---|---|
클라우딩 어플리케이션 엔지니어링 TIL Day 26 - Node.js 기초 (0) | 2024.02.02 |
클라우딩 어플리케이션 엔지니어링 TIL Day 22 - 프로그래머스 알고리즘 (0) | 2024.02.01 |
클라우딩 어플리케이션 엔지니어링 TIL Day 23 - 피그마 기초 (1) | 2024.01.31 |
클라우딩 어플리케이션 엔지니어링 TIL Day 18 - 고양이 사진 검색 사이트 해설 (4) (1) | 2024.01.24 |