화면은 비슷한데, 팀 코드처럼 보이지 않는다
Figma 시안을 AI에게 보여주고 화면을 만들어달라고 했더니, 간격과 색은 얼추 맞는데 낯선 컴포넌트가 잔뜩 생깁니다. 개발자는 다시 Figma 탭에서 수치를 확인하고, 기존 코드베이스에서 알맞은 컴포넌트를 찾아 생성 코드를 고쳐야 하죠.
이 문제는 프롬프트만 길게 쓴다고 해결되지 않습니다. AI가 어느 프레임을 구현해야 하는지, 그 안에 어떤 컴포넌트·스타일·변수가 쓰였는지 읽을 통로가 필요해요. WebStorm 2026.2.1의 Figma Connect는 선택한 Figma 노드의 참조를 AI Chat에 첨부해 이 통로를 만듭니다.
다만 설치만 하면 팀의 프로덕션 컴포넌트까지 자동으로 골라주는 것은 아닙니다. Figma Connect와 MCP, Code Connect의 역할을 구분해야 기대한 결과에 가까워집니다.
68%와 32%는 같은 개발자 집단의 답이 아니다
먼저 널리 인용된 숫자부터 바로잡을게요. Figma의 2025년 조사에서 개발자의 68%가 프롬프트로 코드를 생성한다고 답한 것은 맞습니다. 하지만 AI 출력에 의존할 수 있다고 답한 32%는 개발자만이 아니라 전체 응답자 기준이에요. 같은 조사에서 개발자의 AI 도구 만족도는 82%였습니다.
따라서 “AI로 코딩하는 개발자 68% 가운데 32%만 결과를 믿는다”는 식으로 두 숫자를 빼거나 비교하면 안 됩니다. 공개된 조사만으로는 디자인 컨텍스트 부족이 32% 응답의 원인이라고도 말할 수 없어요.
확인된 범위: 디자인 시스템 정보가 부족하면 생성 코드가 팀의 실제 구현 방식과 어긋날 수 있다는 것이 Figma의 설명입니다. Figma Connect 도입 전후의 정확도·재작업률·신뢰도를 비교한 독립 평가는 아직 공개되지 않았습니다.
Figma Connect가 전달하는 것은 이미지가 아니라 위치다
Figma Connect의 핵심은 선택한 레이어의 스크린샷이나 전체 파일을 채팅에 복사하지 않는다는 점입니다. Figma Desktop에서 고른 프레임·컴포넌트·레이어와 WebStorm의 선택 상태를 연결하고, Add to Context를 누르면 해당 노드의 식별자 참조가 AI Chat에 들어갑니다.
에이전트는 이 참조를 출발점으로 Figma MCP가 제공하는 컴포넌트, 스타일, 변수 정보를 읽을 수 있습니다. 어느 화면을 말하는지 텍스트로 길게 설명하거나 캡처 이미지만 보고 구조를 추측하게 하는 것보다 구체적인 입력이 되는 셈이에요.
| 연결 요소 | 맡는 역할 | 자동으로 보장하지 않는 것 |
|---|---|---|
| Figma Connect | Figma에서 선택한 노드를 WebStorm AI Chat의 컨텍스트로 첨부 | 팀 코드 컴포넌트와의 자동 매핑 |
| Figma MCP | 노드의 컴포넌트·스타일·변수 정보를 에이전트에 제공 | 프로덕션 코드와 디자인의 일대일 연결 |
| Code Connect | Figma 컴포넌트를 실제 코드 리소스와 매핑 | 매핑되지 않은 모든 요소의 올바른 구현 |
| Chrome DevTools Connect | 브라우저 실행과 콘솔·네트워크·화면 검사 지원 | 사람의 최종 QA와 디자인 판단 대체 |
디자인과 실제 컴포넌트를 직접 매핑하려면 Code Connect가 필요하다
Figma MCP가 디자인 정보를 읽는다고 해서 사내 버튼이나 shadcn/ui 컴포넌트가 자동으로 선택되는 것은 아닙니다. 에이전트가 코드베이스에 접근할 수 있다면 Code Connect 없이도 기존 컴포넌트를 찾아 재사용할 수 있지만, 어떤 디자인 컴포넌트가 어떤 코드 리소스에 대응하는지 자동으로 정확히 판단한다고 보장할 수는 없어요.
Code Connect는 이 대응 관계를 직접 정의합니다. Figma는 디자인 요소와 코드가 매핑돼 있으면 에이전트가 실제 코드 리소스를 참조할 수 있고, 매핑이 없으면 전달받은 스타일 컨텍스트를 바탕으로 새 코드를 작성한다고 구분합니다.
Code Connect를 이용하려면 Figma Organization 또는 Enterprise 플랜의 Full 또는 Dev 시트가 필요해요. 결국 결과는 Figma Connect 설치 여부뿐 아니라 에이전트의 코드베이스 접근 범위, 기존 컴포넌트 구조, Code Connect 매핑 범위에 함께 달려 있습니다.
Dev Mode 도입 기업에서 보고된 주당 98분 절약도 Figma Connect의 성과로 가져오면 안 됩니다. 이는 한 회사의 개발자 200명이 Dev Mode 사용 후 보고한 평균이며, 20~30% 산출량 증가는 Figma 의뢰를 받은 Forrester가 인터뷰를 바탕으로 만든 합성 조직의 추정치입니다.
기존 프로젝트를 연 뒤 첫 노드 연결하기
이 실습은 이미 홈페이지 구현이 들어 있는 프로젝트와 Figma 시안을 비교하는 흐름입니다. WebStorm 2026.2.1, Dev Mode 또는 Full Design 접근 권한이 있는 유료 Figma 시트, 작업 파일을 열 수 있는 Figma Desktop을 준비하세요. AI Chat에서 프로젝트 파일을 수정하려면 JetBrains AI 구독이나 호환 제공자의 자체 API 키로 구성한 AI Assistant도 필요합니다.
- WebStorm에서 수정할 홈페이지 프로젝트를 엽니다. Project 도구 창에서 비교할 페이지의 엔트리 파일과 기존 컴포넌트가 보이는지 확인하세요. 빈 프로젝트라면 먼저 사용할 프레임워크와 페이지 엔트리 파일을 준비해야 아래 비교 요청을 실행할 수 있습니다.
- Figma Connect 공식 설정 문서를 열고 View → Tool Windows → Figma Connect로 이동합니다. 도구 창의 Set Up을 선택하세요.
- AI Assistant를 설치하고 채팅 인증을 마칩니다. 설정 마법사가 설치를 요청하면 안내에 따라 플러그인을 설치하고 Restart IDE가 표시될 경우 WebStorm을 재시작하세요. JetBrains AI를 쓴다면 로그인하고, 자체 API 키를 쓴다면 Tools → AI Assistant → Providers & API Keys에서 호환 제공자와 키를 구성한 뒤 AI Chat에 입력할 수 있는지 확인합니다. BYOK만 사용할 때는 공식 안내에 따라 기존 JetBrains AI 인증을 해제하거나 Provider를 None으로 두어야 할 수 있습니다.
- Figma Desktop에서 구현할 디자인 파일을 엽니다. 설치돼 있지 않다면 설정 마법사의 안내에 따라 먼저 설치하세요.
- Figma Desktop에서 Dev Mode로 전환합니다. Inspect 패널의 Enable desktop MCP server를 선택하세요. 다시 WebStorm 마법사로 돌아와 It’s Enabled를 누른 뒤 적용 범위를 Per Project 또는 Globally로 정합니다.
- 마법사에서 Open JetBrains Connect를 선택합니다. Figma의 Plugins 패널에서 플러그인을 실행하고 Connect를 누른 다음, WebStorm에 표시된 연결 요청을 Allow합니다.
- Figma Connect 도구 창이 Connected인지 확인합니다. Currently selected 또는 Layers에서 구현할 프레임이나 컴포넌트의 Add to Context를 누릅니다.
- 첨부된 디자인과 열어둔 프로젝트의 기존 구현을 함께 비교하도록 요청합니다. 첫 입력은 “첨부한 Figma 디자인과 현재 프로젝트의 홈페이지 구현을 비교하고, 시각적 차이와 레이아웃 차이를 수정해줘. 기존 프로젝트 컴포넌트와 디자인 토큰을 우선 사용하고 새 컴포넌트를 만들면 이유를 설명해줘.”처럼 작성해보세요.
첫 성공 기준은 세 가지입니다. 도구 창이 Connected로 표시되고, 선택한 노드가 AI Chat에 첨부되며, 에이전트가 실제로 열어둔 프로젝트 파일을 대상으로 구현안이나 변경안을 반환해야 합니다. 비교할 기존 페이지가 없다면 “첨부한 Figma 디자인을 현재 프로젝트의 지정한 페이지 엔트리에 구현해줘”라고 요청하고 대상 파일을 명시하세요.
브라우저 검사는 별도 연결로 이어진다
생성된 화면을 Chrome에서 열고 콘솔·네트워크·스크린샷까지 검사하는 기능은 Figma Connect가 아니라 별도의 Chrome DevTools Connect입니다. WebStorm 2026.2.1에 관련 CLI 스킬이 번들되지만, 처음 사용할 때 패키지 설치를 요청할 수 있어요.
그러니 첫날에는 범위를 좁히는 편이 좋습니다. 노드 하나를 연결하고, 기존 컴포넌트 재사용 여부와 레이아웃 차이를 확인하세요. 그다음 필요한 컴포넌트에 Code Connect 매핑을 추가하고 브라우저 검사를 붙이면 어느 연결이 결과를 개선했는지 구분하기도 쉬워집니다.
첫 검토에서 볼 세 가지: 에이전트가 올바른 Figma 노드를 읽었는지, 기존 프로젝트 컴포넌트를 재사용했는지, 새 컴포넌트와 임의의 스타일 값을 만들었다면 이유를 설명했는지 확인하세요. Figma Connect의 가치는 자동 완성 약속보다 AI가 추측해야 할 디자인 정보를 줄이는 데 있습니다.
