[VSCode/Figma] VS Code상에서 Figma 화면을 볼 수 있다?!

평소처럼 커리어리 피드를 보던 중 팔로우하는 어떤 개발자분께서 VS Code 내에서 Figma 화면을 볼 수 있다는 말씀에

후다닥 VS Code의 확장에 Figma를 검색해보니 Figma for VS Code 플러그인이 있어 간단하게 사용해본 후에

후기 및 사용법을 간단히 포스팅해보겠다.

 

먼저 앞서 말했듯 VS Code 확장 탭 > Figma 를 검색하면 Figma for VS Code 가 위와 같이 나올텐데, 당연히 install 을 눌러준다.

 

그러면 위 사진과 같이 좌측 탭에 피그마 로고가 생기면서 클릭해보면 피그마에 로그인해달라는 문구가 뜬다.

버튼을 눌러 로그인해주자.

 

정상적으로 로그인 되었다면 VSC 상에서 위와 같이 보일텐데, Recents 혹은 Shared Files 토글을 열어 작업 중인 프로젝트에 해당하는

피그마 프로젝트를 열어주면

두둥!!

이렇게 전처럼 매번 IDE <-> 피그마 웹을 왔다갔다 할 필요 없이 피그마 화면을 VS Code상에서 볼 수 있게 되었다. 짝짝짝

 

더욱 유용한 것은, Figma 상의 컴포넌트들을 클릭하면 아래와 같이 컴포넌트의 css 부분을 바로 확인할 수 있게 된다.

옆자리 선임님한테 장난칠 때 주로 사용하는 컴포넌트..

 

아래 Layout 부분과 Style 부분에 마우스를 갖다대면 Copy 버튼이 생기는데, 이를 복사해서 

css 항목에 붙여넣기만 해도 자동으로 적용된다.

 

안타깝게도 앱에서는 width 나 height를 픽셀 수치로 주기가 애매한 경우가 많아 모두를 카피하여 적용하기는 힘들겠지만,

그래도 가장 까다로운게 텍스트나 어떤 컴포넌트의 배경색상 등을 일일이 찾아 넣어줘야하는 번거로움 정도는 아예 덜 수 있을 것 같아

앞으로 프로젝트를 진행할 때 유용하게 사용될 것 같다.