[피그마 공부] 메타코드 강의별 스터디 후기 (왼쪽 패널 페이지, 레이어, 에셋)

 

피그마에서 여러 페이지들을 만들었을 때 커버의 이름을 바꾸는법을 알려준다.

저 위에 화면에서는 더블클릭으로 바꾸는 법을 설명하고있는데

마우스 오른쪽을 클릭해서 Rename page로 이름을 바꿔도 된다고 한다.

(더블클릭이 훨씬 빠르고 편하니 굳이 후자방법은 머리에서 지워도 될듯하다. ㅎ0ㅎ)

 

 

페이지를 삭제할 때에는 Delete page를 누르면 된다.

잘못 삭제되었을 때는 복구할 수 있는데 커맨드키와 Z키를 누르면 된다고 한다.

여기서 커맨드키가 무엇인지 몰랐던 나는 검색해서 찾아보았는데

윈도우에서는 Ctrl키라고 한다. 애플맥의 고유한 키였던것! 이제야 알게되었다. 하하

 

 

Ready for dev라고 띄어져있는 저 아이콘 표시는

개발버전으로 바로 넘겨도 가능할 정도로 디자인이 완성되어있다는 표시라고 한다.

반대로 표기되어있지않으면 아직 넘길 수 있을정도로 완성되어있지 않았다는 것!

이를 데브모드라고 말하나보다. 디벨롭이 데브로 불리는 것!

사소하지만 이런 호칭하나하나를 놓치다보면 나중에 강의 들을 때 어려울것같으니 메모~

 

 

회색 실선 아래쪽에 나열되어 있는 것이 레이어다.

왼쪽 아이콘은 어떠한 방식으로 만들어진건지를 표시한다고하고

오른쪽 자물쇠는 띄어진 레이어의 이동성을 제한할 수 있고

눈 표시로 숨기기도 가능하다고 한다.

이름변경도 더블클릭이면 만사 오케이~

 

 

웹기반으로 사용되는 피그마는 디자인을 보낼 때 자동으로 코드로 변환가능하다고 한다.

시각적으로만 보여지는것을 코드로 바꾸어서 활용할 수 있도록 해준다는 것이다.

CSS, IOS, ANDROID, SVG, PNG, 링크 등으로

디자인을 다양하게 보낼 수 있다는 점도 좋아보인다.

 

 

 

링크로 보내는 방법으로는

페이지 전체를 보내는 방법이랑 특정레이어를 콕 짚어서 보내는 방법이 있다고 한다.

전체링크는 부분을 찾기에는 조금 어렵게 위의 자료처럼 보내진다고 하니

만약 특정 디자인부분만 피드백을 받고 싶다면 레이어를 선택해서 Copy link로 보내면 된다.

 

 

에셋에서는 미리 UI를 만들어 두어 저장해두면

디자인 할 때에 다시 만들지 않고 만들어두었던걸 다시 사용할 수 있게 만드는

저장창고같은 역할을 기대할 수 있다.

만들 때에는 오래 걸리겠지만 한번 만들어 두면 다음 작업속도 때 충분히 빨라질 것 같기에

너무 유용할 것 같다.

 

 

오늘 단축키를 잘 알지못해 잠깐 헤매는 해프닝이 있었다.

사실 이전 강의에서 커맨드 키를 언급할 때에는 바로 찾아보지 않았다.단축키가 아닌 메뉴클릭으로도 가능했었기 때문이다.하지만 메뉴없이 단축키만으로 써야할 상황이었기 때문에 이번에는 찾아보아서 확실히 알게 되었다.역시 모르는 내용은 그냥 넘어가면 안된다는 교훈을 얻었다.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.