피그마(Figma) 학원수강 2회차

 

2024.10.11

피그마 학원수강 2회차

 

학원 수강 노트 

 

프레임에 이미지를 가져오는 방법

1. 탐색기에 있는 이미지를 피그마에 프레임으로 드래그

2. 왼쪽 상단에 피그마 아이콘 - File > place image > 이미지 프레임에 드래그

- 포토샵과 다른점 : 포토샵에서는 비율이 가로 이미지를 세로 이미지로 가져올 경우, 혹은 임의로 늘리거나 줄이는 경우 이미지가 깨지는데 피그마에서는 이미지를 드래그한 비율에 맞춰서 공간 조절이 되고 이미지가 깨져보이지 않는다.

 

 

 

3. 피그마 하단에 도구상자에 이미지 모양(프레임 아이콘 옆아이콘에 화살표 클릭하면 이미지)

 

* 피그마 단축키

- 화면 확대 : Ctrl + 휠 위로

- 화면 축소 : Ctrl + 휠 아래로

- 화면 이동 : 스페이스바 + 드래그

- 복사 : Alt + 드래그

- 반복(직전행동 반복) : Crtl + D

- 글자입력 끝내기 : Ctrl + 엔터

포토샵과 다른점 : 글자 입력을 다 하고나서 글상자 크기를 늘릴 경우, 포토샵에서는 글자크기도 늘어나는데 피그마에서는 글상자의 크기만 늘어남

- 그룹 만들기 : Ctrl + G

- 그룹 해제하기 : Ctrl + Shift + G

 

선택 시, 보라색 라인 -> 컴포넌트

컴포넌트는 원본

컴포넌트의 복사본은 인스턴스

 

교재 79~80p

컴포넌트 : 반복적으로 사용할 디자인을 등록 (원본)
인스턴스 (◇) : 컴포넌트로 등록한 것의 복사본

Detach Instance (컴포넌트로부터 인스턴스를 분리,
Detach instance 후에는 메인 컴포넌트로부터 영향을 받지 않음)

Main component-push changes to main componet
(변경한 인스턴스 디자인을 컴포넌트에 적용)

=push overrides to main component