피그마 개발자버전 (Figma dev mode) 출시
원래 Figma는 CSS, Swift 및 XML을 지원하지만 사용 가능한 대부분의 코드에는 시각적 속성과 간격만 포함되어 있습니다. Javascript 등으로는 지원이 되지 않았습니다.
그런데, 피그마 데브버전이 출시했습니다!
1. 기본 Dev Mode에 대한 설명
우측 상단에 보면 이런 코드스니팻 아이콘이 보여요.
이걸 누르면 안내가 나옵니다.
이렇게 안내가 나오고 next를 눌러보면...!
이런 플러그인이 있어서 핀을 해두었습니다.
기존에도 figma to html 플러그인이 있기는 했는데 코드를 실행해보니 정렬도 안맞고 어설퍼서 사용하기를 포기했었어요. 이번에는 새로운 플러그인 활용해서 잘 변환되기를 바랍니다...!(아직 안써봄 ㅋㅋㅋ)
이 플러그인을 활용하면 HTML, 플러터, 스위프트 단위로 각각 변환해줍니다.
아까 핀해두었던 플러그인을 켜고 영역을 선택하면 우측 패널에 위와 같이 코드선택 / 크기 별 view / 코드스니팻 이렇게 나옵니다. 이번에 대대적인 변화로 피그마 활용 범위가 디자인을 넘어 개발까지 가는 허들을 확 낮춰주었어요.
위의 예시와 같이 단순히 호버링을 하는 것 만으로도 오토 레이아웃 컨테이너는 자동으로 간격 및 패딩 등을 보여주는 것을 볼 수 있습니다.
2. VS CODE용 Dev Mode
개발자모드만 업데이트 한 것이 아니라 실질적으로 편의성을 높여주기 위해 VS Code Extension도 공개했습니다.
VS Code 익스텐션에서 'Figma for VS Code'를 검색하고 VSCode를 재실행하면 왼쪽 패널에 피그마 아이콘이 추가되고, 계정 로그인 후 아트보드들을 모두 VSCode에서 바로 볼 수 있습니다.
현재 공개 베타 버전이며 내년 2024년 까지 누구나 무료로 사용할 수 있다고 합니다.
2024년부터 개발 모드에 액세스하려면 유료 시트가 필요하지만 값 복사, 코드 생성 및 자산 내보내기 기능은 계속 무료라고 하네요!
업데이트를 통해 개발자의 편의성, 생산성, 연동성 모두 고려하여 앞으로의 행보가 더욱 기대됩니다.
해당 내용은 아래 글을 참고하여 작성하였으니 원본을 확인해주세요!
https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
