[피그마 공부] 메타코드 강의별 스터디 후기 (개발자 모드 살펴보기)

 

일단 피그마를 개발자 모드로 바꾼 뒤 바를 선택해보면

오른쪽 Inspect에서 여러가지 정보들을 얻을 수 있다.

왼쪽에 띄워져있는 숫자들을 통해 넓이 등등을 상세하게 확인이 가능하고

Dev resources를 추가할 수도 있다고 한다.

 

 

또한 모드를 바꿔가며 뷰어 방식을 바꿀 수도 있다.

Code 나 Properties로 바꾸는 등

원하는 방식으로 확인이 가능하다.

여하튼간 피그마는 개발자들이 원하는 방식으로 다양하게 보여주는 듯 하다.

 

 

왼쪽 토픽이라고 나열된 부분에서는

언제 어떻게 수정이 되었는지 기록을 남겨준다.

이는 디자이너와의 커뮤니케이션을 원활하게 하는 역할을 하여

개발자는 언제 무엇이 수정되었는지를 확인할 수 있다.

피그마는 기록을 통해 대화할 수 있는것은 직접 커뮤니케이션해야하는 수고를 생략해준다.

 

 

토픽 아래쪽에는 선택된 프레임의 레이어들이 나열되어 보여지고 있다.

오른쪽에는 그 레이어들에 대한 상세한 정보들을 확인할 수 있는 코드가 보여질 것이다.

이렇듯 피그마의 데브모드는 비주얼적으로 디자인된 화면을

손쉽게 코드로 바꿔주는 것을명확하게 확인할 수 있다.

 

 

초록색 버튼인 Ready for dev를 누르면 세가지 옵션이 뜨는데

맨아래 Remove ready status를 누르면 데브모드가 해제된다.

반대로 준비 데브모드를 켜려면 같은자리에 있는 회색 상자를

누르면 된다.

 

 

피그마에서 데브모드를 켜고 Share 버튼을 누르면 디자인 모드가아닌 개발자 모드로 공유되어

그에 상응하는 목적을 가진 패널을 바로 확인할 수 있게된다.

디자이너도 데브모드로 확인하고 디자인을 넘길 수 있다면

더 정확한 완성도를 구현하는 데 도움이 된다고 강조하고 있다.

 

 

그렇다. 피그마를 통한 디자인의 최종목적은 개발이다.

개발자 모드라고 내가 하는 일이 아니니 대충 들으려던 나에게

내 디자인을 더 정확하게 개발될 수 있게 하기위해 데브모드도 정확하게 더블체크할 필요성을 일깨워준 이 강의는

니일내일 선긋지말고 높은 완성도를 위해 함께 만들어가자는 메세지로 들렸다.

내 일이 아닌것은 거들떠보지도 않으려는 내 모습을 돌아보며 반성했다.

 

: https://mcode.co.kr/

메타코드M

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