AI로 코드를 짜는 개발자는 68%인데, 그 결과물을 믿는다는 사람은 32%뿐이에요.
왜 이렇게 신뢰가 안 갈까 봤더니, 원인 중 하나가 의외로 단순했어요. AI가 여러분 팀의 진짜 디자인 시스템을 본 적이 없다는 거죠.
다들 이렇게 코딩하고 있었잖아요
Figma는 자기네 블로그에서 이렇게 짚었어요. "디자인 시스템 컨텍스트 없이 AI에게 코드를 생성하라는 건, 신입 엔지니어에게 온보딩도 없이 바로 배포부터 시키는 것과 같다"고요.
실제로 벌어지는 일은 이래요. AI 에이전트한테 "이 화면 구현해줘"라고 하면, 여러분 팀이 실제로 쓰는 shadcn/ui나 Base UI 컴포넌트 대신 AI가 그럴듯하게 지어낸 비슷한 컴포넌트를 만들어내요. 결과물은 얼추 맞아 보이지만, 리뷰어가 다시 뜯어고쳐야 하는 코드가 나오는 거죠.
이게 신뢰 격차의 정체예요. AI가 게을러서가 아니라, 애초에 볼 수 있는 컨텍스트가 스크린샷 한 장이나 대충 붙여넣은 텍스트뿐이었던 거예요.
매번 탭 전환한다고 해결될 문제가 아니었다
그럼 지금까지는 어떻게 했냐면, 개발자가 직접 Figma 탭을 열어 사양을 확인하고 다시 IDE로 돌아오는 식이었어요. JetBrains는 이걸 두고 "스펙은 한 번 확인되고, 그다음엔 버려진다"고 표현했어요. 매번 확인하기 귀찮으니 대충 기억에 의존하게 된다는 뜻이죠.
Forrester가 실제 기업의 개발자 200명을 조사해봤더니, Dev Mode로 디자인 사양에 접근할 수 있었던 팀은 주당 평균 98분을 아꼈고, 산출량은 20~30% 늘었어요. 반대로 말하면, 이 98분은 지금 이 순간에도 탭을 왔다 갔다 하며 새고 있는 시간이라는 거예요.
직접 삽질해본 개발자 후기도 있어요. WebStorm에 Figma MCP를 억지로 붙이려던 한 개발자는 SSE 프로토콜 미지원 문제에 부딪혀 Rust로 별도 MCP 서버를 컴파일하고, API 토큰을 환경변수로 직접 관리해야 했어요. 그마저도 안정적이지 않아서 결국 Cursor로 갈아탔다고 적었고요.
그래서 WebStorm이 고른 건 스크린샷이 아니라 '주소값'이었다
2026.2.1부터 WebStorm에 정식으로 들어온 Figma Connect는 접근 자체가 달라요. Figma 레이어를 클릭하면 스크린샷을 캡처하는 게 아니라, 그 노드의 식별자(참조)만 AI 컨텍스트에 첨부해요. 이러면 컨텍스트 용량은 아끼면서도, AI 에이전트가 필요할 때마다 Figma MCP를 통해 실제 컴포넌트·스타일·디자인 토큰을 직접 조회할 수 있어요.
같은 시기에 나온 Chrome DevTools Connect까지 붙이면 그림이 완성돼요. "이 화면 저 디자인대로 만들고 브라우저에서 확인해줘"라고만 하면, 에이전트가 코드를 만들고 실제로 Chrome을 열어 콘솔·네트워크·화면까지 검증해요. 디자인 → 코드 → 브라우저, 이 세 구간을 IDE 밖으로 한 번도 안 나가고 끝내는 거예요.
| 기존 방식 | Figma Connect | |
|---|---|---|
| 디자인 확인 | 탭 전환 + 스크린샷 캡처 | IDE 도구 창에서 레이어 클릭 |
| AI에게 전달하는 것 | 이미지 또는 대략적 설명 | 실제 노드 참조 + 디자인 토큰 |
| 컴포넌트 선택 | AI가 비슷한 걸 추측 | 실제 shadcn/ui·Base UI 컴포넌트 |
| 검증 | 브라우저 따로 열어 확인 | Chrome DevTools Connect로 IDE 내 완결 |
지금 바로 붙여보는 법
- Figma 유료 플랜 확인
Dev Mode 또는 Full Design 접근 권한이 있는 유료 계정이 필요해요. 무료 플랜은 지원 안 돼요. - WebStorm에서 Figma Connect 도구 창 열기
View → Tool Windows → Figma Connect에서 'Set Up'을 클릭하면 설정 마법사가 시작돼요. - Figma Desktop에서 MCP 서버 켜기
Figma Desktop의 Dev Mode에서 "Enable desktop MCP server"를 켜주세요. - JetBrains Connect 플러그인 실행 + 연결 승인
Figma에서 플러그인을 열고, WebStorm에서 뜨는 연결 요청에 Allow를 누르면 도구 창 상태가 'Connected'로 바뀌어요. - 레이어 선택 → Add to Context
원하는 레이어를 클릭하고 'Add to Context'를 누르면 AI 채팅(Junie, Claude, Copilot 등)에 바로 참조가 붙어요.
