어디서나 이어지는 디자인 컨텍스트

AI로 인해 아이디어를 작동하는 코드로 바꾸는 것이 그 어느 때보다 쉬워졌습니다. 하지만 최고의 결과를 얻으려면 잘 짜인 프롬프트 이상의 것이 필요합니다. 오늘 우리는 IDE, AI 에이전트, 프로토타입 등 여러분이 작업하는 어디에든 Figma Design 컨텍스트를 가져올 수 있는 Figma MCP 서버와 Code Connect의 업데이트를 발표합니다.

이러한 업데이트는 디자인 시스템 구조, 코드베이스 작성 방식, 팀의 제품 구축 방식에 대한 디자인 컨텍스트를 더 휴대 가능하고 강력하게 만들어 주며, 보다 원활하게 아이디어에서 제품으로 넘어가도록 도와줍니다. 그러한 컨텍스트는 종종 오랜 시간 동안의 협력 노력을 나타내며, Figma 캔버스 안팎에서 모두 접근 가능해야 합니다.

Figma MCP 서버에 원격 접속 기능 가져오기

올해 초 우리는 Dev Mode에 로컬 MCP 서버를 도입하여 개발자들이 실시간 디자인 컨텍스트를 자신의 로 가져오는 방법을 제공했습니다. Affirm 및 Coinbase와 같은 회사의 팀들이 이미 이를 사용하여 복잡한 사용자 흐름을 훨씬 적은 시간 안에 구축하고 있습니다.

이제 Figma MCP 서버는 원격 접속을 지원합니다. 이는 IDE, AI 코딩 에이전트, 심지어 브라우저 기반 모델에서도 Figma에 연결할 수 있음을 의미합니다. Figma에서는 디자인이 단순한 정적 이미지 그 이상이 될 수 있습니다. Figma Design은 반응형 레이아웃, 인터랙션 세부사항, 경우에 따라서는 전체 시각적 프로그램을 인코딩합니다. 고객은 이러한 Figma 컨텍스트를 Android Studio, Replit, Warp와 같은 새로운 파트너에게 전달할 수 있습니다. 이제 더 이상 업무 흐름에 디자인 컨텍스트를 가져오기 위해 데스크톱 앱이 필요하지 않습니다. Figma는 팀을 더 가깝게 만들기 위한 브라우저에서 시작되었으며, 이번 업데이트는 그 사명을 확장합니다.

파트너 카탈로그를 통해 Figma를 업무 흐름에 연결하는 것도 더욱 쉬워졌습니다. 목록에서 원하는 IDE나 에이전트를 찾아 Figma MCP 서버를 통합하기만 하면 됩니다. 또는 클라이언트 내부에서 통합할 수도 있습니다. 우리는 Figma 파일에서 구하는 모든 개발자가 끊김이 없는 강력한 경험을 하길 원합니다. 그리고 디자인 시스템 규칙을 생성하는 최근의 도구 추가처럼, 베타 기간과 그 이후에도 MCP 서버에 더 많은 기능과 파트너를 계속 추가할 것입니다.

MCP를 Figma Make로 확장

팀이 제품 아이디어를 신속하게 구축하고 탐색하기 위해 Figma Make를 사용하는 경우, 이제 Figma MCP 서버가 Make와 코드베이스 간의 다리를 만들어 놓습니다. MCP 클라이언트를 통해 Figma Make 파일을 사용하면, AI 모델은 렌더링된 프로토타입이나 이미지 대신 기본 코드를 볼 수 있습니다.

방법은 간단합니다. Figma MCP 서버는 Make 파일의 코드를 인덱싱하여 여러분과 즐겨찾기 플랫폼이 필요한 것을 정확히 요청할 수 있도록 합니다. 개발자와 AI 에이전트는 지정된 파일에서 직접 코드를 재사용하거나 영감을 얻기 위해 로직, 디자인, 패턴을 참조할 수 있습니다.

우리는 Anthropic, Cursor, Windsurf, VS Code와 같은 파트너들과 협력하여 오늘부터 그들의 제품에서 이 경험을 할 수 있도록 제공합니다. 또한 파트너 MCP 서버를 Figma Make에 연결하는 것과 같은 다음 주요 업데이트를 이미 구축하고 있습니다.

Code Connect의 개선된 컴포넌트 매핑

Code Connect는 코드베이스 컴포넌트를 Figma Design 컴포넌트와 정렬하기 위해 구축되었습니다. 이러한 관계를 정의함으로써 Code Connect는 인간과 AI 에이전트 모두가 더 빠르게 제품을 구축할 수 있도록 합니다. 이는 디자인 시스템이 어디에 있든 통합하려는 우리의 사명을 향한 발걸음입니다.

지금까지 이러한 매핑은 터미널에서 수동 설정이 필요했습니다. Code Connect의 새로운 앱 내 매핑 경험으로 Figma 안의 컴포넌트를 탐색하고, 올바른 코드 및 파일로 매핑하여 어떤 것이 연결되어 있거나 누락되었는지를 쉽게 확인할 수 있습니다. 이는 Code Connect CLI를 보완하며, 대부분의 프레임워크에 대해 정의된 속성이나 변형 매핑과 함께 생산 준비가 된 스니펫을 Dev Mode로 가져오도록 돕습니다. 많은 팀이 두 가지를 모두 채택하고 있습니다.

Code Connect를 사용하는 고객은 이제 MCP 서버를 통해 디자인 컨텍스트 이상의 정보를 전달할 수 있으며 코드 컴포넌트 위치와 사용 가이드라인에 액세스할 수 있게 됩니다. Figma MCP 서버는 그 자체로 AI 에이전트에 풍부한 디자인 컨텍스트를 제공합니다. Code Connect를 통해 실제 생산 환경에 대한 인지도 제공합니다. 내부 평가 및 알파 고객의 초기 테스트 결과, 두 가지를 모두 사용할 때 AI 에이전트로부터 더 일관된 코드 출력, 더 빠른 파일 탐색, 향상된 토큰 효율성을 확인했습니다. 개발자와 팀은 베타 기간 동안 이 모든 카테고리에서 개선 사항 및 그 이상의 것을 확인하게 될 것입니다.

통합 검토 및 호출 제한

이미 사용 중인 도구와 Figma를 연결하는 더 많은 방법을 열어가면서, 그러한 연결을 신뢰할 수 있게 만드는 기반도 강화하고 있습니다. 확장성은 고객과 개발자가 구축 기반이 되는 플랫폼을 신뢰할 때 가장 효과가 좋습니다.

앞으로 모든 공개 타사 통합 및 MCP 클라이언트는 데이터에 액세스하기 전에 Figma의 검토를 거치게 됩니다. 이는 새로운 앱 또는 업무 흐름을 도입하는 데 있어 신뢰도를 더해주며, 플러그인 및 위젯을 검토하는 방식과 일관됩니다. 앱 빌더와 사용자에게 더 예측 가능한 경험을 제공하기 위해 REST API 요청 제한이 조정될 것입니다. 이러한 변경 사항은 11월 17일에 발효되며, Figma의 활성 사용자 중 1% 미만에게 영향을 미칠 것입니다.

미래를 내다보며

원격 MCP 서버, Figma MCP에서의 Make 파일 지원 및 앱 내 Code Connect 경험은 더 넓은 비전을 향한 첫걸음입니다. 우리는 탐색이 불필요한 재작성이나 수정 없이 생산 기능으로 발전할 수 있도록 도구 간 컨텍스트가 자유롭게 이동하기를 바랍니다.

오늘날 Figma MCP 서버는 디자인과 코드 컨텍스트를 다른 도구로 전달합니다. 시간이 지남에 따라 이는 양방향 커넥터가 되어 외부 컨텍스트를 다시 Figma로 가져올 것입니다. 이는 더 현실적인 프로토타입, 더 적은 재구축, 그리고 실제 문제를 해결하고 돋보이는 제품을 만드는 데 더 많은 시간을 할애할 수 있다는 것을 의미합니다.

디자인 결과물은 단순한 참조 자료가 아닙니다. 그것은 비즈니스와 사용자 경험을 형성하는 능동적인 입력입니다. 디자인 시스템, 인터랙티브 프로토타입, 주석이 달린 모형, 생성된 코드 중 무엇이든, 각각에는 팀이 더 정확하고 빠르게 구축하는 데 사용할 수 있는 지식이 담겨 있습니다.

이 모든 기능은 오늘부터 베타 버전으로 제공됩니다. 정식 출시를 위해 준비하면서 계속해서 이를 개선하고 발전시켜 나가는 중입니다. Figma가 여러분이 구축하는 모든 곳에 있을 때 무엇을 만들 수 있을지 상상해 보세요.