[UI/UX]패스트캠퍼스 챌린지 19일차 - 피그마 상단 가운데 패널

오늘은 패캠챌린지 19일차!

 

나 정말 왤케 인싸인 거 같은지 몰르겠다.

그저께도 약속, 어제도 약속 오늘도 약속 내일도 약속이다 ㅎㅎㅎ

오늘은 10년정도 된 친구들이 수원에서 멀리 자취방까지 와주신대서

강의도 쪼금 밖에 못듣구 (ㅠㅠ) 블로그를 쓰고 있다.

 

후 운전해서 데리러가야한다. (완전 운린이..ㅋ)

배고파 미치겠다

하지만 패캠 챌린지는 무조건 써야해!!!!

 

 

오늘은 피그마의 상단 중심에 있는 패널!에 대해 알아봤다

별거 없다 ㅋ

일러스트랑 비슷한거 같아 쉽게 들었다.

그리고 제목에 좀 뭐들었는지 써야겠다.. 복습하려니까 어딨는지 모르겠다눙..

 

 

---

피그마 상단 가운데 툴 정리

(어떤 것을 클릭했을 때만 나옴, 어떤 기능인지 알려줌)

2개를 포커스하는 것과 1개를 포커스하는 것은 다르게 나타남

1. Original
2. Union : 합쳐줌
3. Subtract : 빼줌
4. Intersect : 교집합 부분만 남겨줌
5. Exclude : 교집한 부분만 빼주고 나머지 남겨줌

** 피그마의 장점 합치고 빼고 난리를 다쳐도 레이어 별로 다 움직일 수 있음
계층으로 효과 적용이 가능하다!
(Flatten 어쩌고를 통해 아예 합쳐버려 오브젝트를 확정 지을 수 있음,
하지만 되돌리기는 불가함)



Component(컨트롤+알트+k)

- Mother : 원본 (나중에 내가 mother을 바꾸면 나머지도 다 바꿔짐)
- instance : 심볼의 개념과 비슷, component의 자식
* 한번 바꿔준 instance는 mother을 따라서 바뀌지 않음
- Mask : 어떤 여러가지 오브젝트를 모아서 잘라보이게 해주는 기능
* 마스크를 이용한 누끼따기 : 펜툴을 이용해 누끼를 따고 필을 채워줌(쉬프트+x)
-> 이렇게 만든 펜툴모양을 밑으로 내리고 펜툴과 이미지를 마스크 시키면댐
이것은 마치 클리핑 mask..~!


link
: 새롭게 피그마에 추가된 기능!

1. 링크 주소 하나 만들기
2. 링크 복사하고 그 주소에 붙혀넣기 하면 이동 가능

++) 외워야할 단축키 : 컨트롤 + Y 아웃라인 볼 수 있음

 

 

 

---

이건 오늘 배운 Union Subtract  Intersect Exclude를 활용하여 만든 예제이다.

이런 기이한 그림으로 요즘 nft에서 돈 많이 벌던데 나도 내볼까? 생각하게 하는 ㅋ.ㅋ..

 

이건 mother을 이용한 component예제!

위에 올린 그림을 바탕으로 타이포를 하나 넣었더니 다같이 따라온다 귀여워^_^

 

근데 이제 여기서 하나만 더블클릭하면 얘만 바뀌고 나머지는 안바뀐다

그리고 바뀐 아이는 mother의 영향을 받지 않는다는 점 꼭 기억하깃!

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.