피그마 최신 업데이트 Dev Mode(개발자 모드)

오늘은 지난 22일 업데이트되었던 피그마의 Dev Mode(개발자 모드)를 살펴볼게요~

내용을 보니 역시 진정한 핸드오프 툴의 최강자 다운 업데이트였습니다.​​

​

개발 모드는 개발자를 염두에 두고 특별히 설계된 Figma 파일과 상호 작용하는 방법입니다.
우리는 디자인 핸드오프의 마찰을 줄이고 더 나은 커뮤니케이션 및 디자인 구현을
허용하는 방법으로 이 모드를 만들었습니다.
개발자 모드라고 하지만 디자이너가 이해하는 것도 중요합니다.
개발자 모드는 디자이너가 개발자가 볼 수 있도록 파일을 준비했을 때 가장 잘 작동합니다.

 

화면을 잠깐 살펴볼게요.

상단에 토글버튼을 올려도 전환되지만 단축키 shift + D를 눌러도 전환됩니다.

 

 

개발자 모드에서는 이제 개발자가 파일을 보다 쉽게 ​​탐색할 수 있도록 돕기 위해 만들어진 다른 스타일의 레이어 패널을 볼 수 있습니다.

개발자 모드에서 레이어 패널을 보는 동안 Ready for dev로 표시된 섹션의 영역 개발 준비가 된 각 화면의 썸네일 준비됨으로 표시되지 않은 캔버스의 개체는 패널 하단에 나타납니다.

 

 

패널 상단에는 프레임 히스토리 모듈이 있습니다.

이를 통해 선택한 항목의 이름, 항목 유형(구성 요소, 인스턴스, 프레임 등), 마지막 편집 여부와 시기를 확인할 수 있습니다.​

​

Code snippets​

캔버스에서 개체를 선택하면 개발자 모드의 검사 패널에 코드 스니펫이 나타납니다. 코드 섹션은 관련 구성 요소 세부 정보를 제공하고 Inspect에서 설정된 선택 및 언어 기본 설정을 기반으로 코드를 생성합니다. 대부분의 선택 항목에 대해 개체의 상자 모델이 표시되므로 여백, 테두리 및 안쪽 여백 세부 정보를 쉽게 찾을 수 있습니다.

​

개발자분들에게 작업을 넘길때 Zeplin을 통해 넘기곤 했는데 피그마에서 지원된다면 따로 올릴 필요 없이 피그마로도 충분할 것 같아요.

 

 

 

​

​디자인 모드와 다른점은 마우스를 갖다 대면 프레임 구조를 보여줍니다.

 

 

Open in playground​

제플린과 여타 다른 핸드오프 툴과 다른점은 피그마의 변형가능한 Component와 Variants 들을

Playground라는 메뉴에서 모두 확인할 수 있다는 점입니다. ​​

​

 

변형 및 구성 요소 속성을 사용하면 설계자가 구성 요소의 다양한 변형 간에 빠르고 쉽게 전환할 수 있습니다.
그러나 편집 권한 없이 디자인을 검사하는 경우 사용된 구성 요소의 전체 범위를 이해하기 어려울 수 있습니다.
이것이 변형 또는 속성이 있는 구성 요소를 볼 수 있도록 개발자 모드에서 플레이그라운드를 추가한 이유입니다.
플레이그라운드를 사용하면 보기 전용 모드에서도 변형이 어떻게 보이는지 확인할 수 있습니다.

 

 

변형 가능한 디자인을 모두 패널에서 볼 수 있다는 장점이 있네요~

개발 시 모듈화 할 수있는 작업들에 대한 파악이 쉬워질 것 같습니다.

​

Dev Mode는 현재 베타버전이며 올해까지 무료로 사용할 수 있으며, 내년에는 유료화된다고 하니 지금 한번 사용해 보세요~

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

레탑피그마 오픈 채팅방 문의

https://open.kakao.com/o/sJdtEyCe

레탑 피그마