Figma MCP 서버에 연결 빌드 에이전트

Figma 모델 컨텍스트 프로토콜 서버 콘솔 (MCP) 서버를 빌드 에이전트 연결하여 Figma 디자인을 엔터프라이즈급 애플리케이션으로 변환하는 속도를 높입니다.ServiceNow AI Platform

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

Figma MCP 서버를 빌드 에이전트빌드 에이전트 연결하면 Figma 파일의 설계 데이터에 액세스할 수 있습니다. 이 연결을 통해 빌드 에이전트 설계와 의도를 이해하여 설계와 일치하는 애플리케이션을 만들 수 있습니다.

Figma 개발자 포털을 방문하여 Figma MCP 서버를 .빌드 에이전트 OAuth 앱을 생성하여 클라이언트 ID 및 클라이언트 비밀을 가져옵니다. 그런 다음 자격 증명을 사용하여 OAuth 프로세스를 처리하도록 구성 ServiceNow IDE 합니다.

• Figma MCP 서버에 대한 자세한 내용은 빌드 에이전트 을 참조하십시오 MCP 연결 및 빌드 에이전트.
• 지원되는 MCP 다른 서버에 연결하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 지원되는 MCP 서버에 연결 빌드 에이전트.

프로시저

1. Figma에서 OAuth 앱 구성
2. ServiceNow IDE에서 OAuth 제공자 구성
3. Figma MCP 서버를 연결하여 빌드 에이전트

   그림 1. Figma 및 빌드 에이전트

   

Figma에서 OAuth 앱 구성

Figma에서 OAuth 애플리케이션을 생성하여 Figma MCP 서버가 OAuth를 통해 사용자를 인증하고 Figma 디자인에 대한 액세스 권한을 부여 빌드 에이전트 할 수 있도록 합니다.

시작하기 전에

Figma Pro, Org 또는 Enterprise 플랜의 Dev 또는 Full 좌석이 있어야 합니다.

필요한 역할: 관리자

이 태스크 정보

Figma MCP(Model Context Protocol) 서버는 인증을 위해 OAuth를 사용하며 설치된 사용자가 빌드 에이전트 Figma 디자인 데이터에 액세스할 수 있도록 합니다. Figma MCP 서버를 에 빌드 에이전트연결하려면 Figma에서 OAuth 앱을 생성해야 합니다. 이 프로세스는 클라이언트 ID 및 클라이언트 비밀을 생성합니다. ServiceNow 는 이러한 자격 증명을 사용하여 OAuth 프로세스를 시작하고 Figma 계정으로 사용자를 인증합니다.

프로시저

1단계: Figma에서 OAuth 애플리케이션을 생성하여 클라이언트 ID와 클라이언트 비밀을 가져옵니다.

1. Figma 개발자 페이지로 이동합니다.
2. 새 앱 만들기를 선택합니다.
3. 양식에 다음 정보를 입력합니다.

   필드	설명
   이름	애플리케이션의 이름입니다. 예로는 ServiceNow 통합이 있습니다.
   앱의 소유자 선택	앱을 소유해야 하는 팀 또는 조직입니다. 중요사항: 입력한 값은 수정할 수 없습니다.

4. 앱 생성을 선택합니다.
   클라이언트 ID 및 클라이언트 암호가 생성됩니다.
5. 클라이언트 ID 및 클라이언트 암호는 다음에서 OAuth 설정에 필요하므로 안전하게 저장합니다.ServiceNow IDE
   중요사항:

   이 창을 닫은 후에는 클라이언트 암호를 다시 볼 수 없습니다.

6. 완료를 선택합니다.

2단계: Figma에서 OAuth 앱을 구성하고 게시합니다.

7. 생성한 애플리케이션을 엽니다.
8. 옵션: 일반 탭에서 앱의 로고를 업로드하고 간략한 설명을 제공합니다.
9. OAuth 자격 증명 탭의 리디렉션 URL 필드에 https://<인스턴스 이름>.service-now.com/oauth_redirect.do URL을 추가합니다. 그런 다음 <인스턴스 이름>을 실제 ServiceNow 인스턴스 이름으로 바꿉니다.
   OAuth 플로우는 리디렉션 URL 목록에 포함된 인스턴스에서만 ServiceNow 작동합니다. OAuth 플로우가 작동하도록 모든 인스턴스를 이 목록에 추가해야 합니다.

   언제든지 리디렉션 URL을 추가할 수 있습니다.

10. OAuth 범위 탭의 MCP 섹션 아래에서 mcp:connect 확인란을 선택합니다.
    중요사항:

    MCP 섹션이 표시되지 않으면 계정 관리자 또는 ServiceNow 지원(ServiceNow 지원에 문의)에 ServiceNow 문의하여 MCP 연결 범위를 활성화합니다. MCP 기능을 활성화할 수 있도록 클라이언트 ID를 공유해야 합니다.
11. 게시 탭에서 비공개 확인란이 선택되어 있는지 확인한 다음 게시를 선택합니다.

ServiceNow IDE에서 OAuth 제공자 구성

Figma에 연결할 수 있도록 OAuth ServiceNow IDE 애플리케이션 레지스트리 및 자격 증명을 설정합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

1단계: 애플리케이션 레지스트리 레코드를 만듭니다.

1. ServiceNow 인스턴스에서 시스템 OAuth > 애플리케이션 레지스트리.
2. 새로 만들기를 선택합니다.
3. 인터셉터 페이지에서 타사 OAuth 공급자에 연결을 선택합니다.
4. 다음 정보를 이용해 양식을 작성합니다.

   필드	설명
   이름	고유한 이름; 예: Figma OAuth 공급자.
   클라이언트 ID	Figma 앱에서 가져온 클라이언트 ID입니다.
   클라이언트 비밀	Figma 앱에서 가져온 클라이언트 비밀입니다.
   기본 부여 유형	드롭다운 목록에서 인증 코드를 선택합니다.
   인증 URL	https://www.figma.com/oauth.
   토큰 URL	https://api.figma.com/v1/oauth/token.
   리디렉션 URL	Figma 앱에서 추가한 리디렉션 URL입니다.
   자격 증명 보내기	기본 인증 헤더로 선택합니다.

5. 제출을 선택합니다.

2단계: OAuth 범위 정의.

6. 저장한 애플리케이션 레지스트리 기록에서 관련 목록을 찾아 아래로 스크롤합니다.
7. OAuth 엔터티 범위 탭을 선택합니다.
8. 새 행을 두 번 클릭(또는 키보드 단축키 사용)하여 행을 추가합니다.
9. 새 행에 다음 값을 입력합니다.

   필드	설명
   이름	이름; 예: Figma MCP Connect.
   OAuth 범위	Figma(mcp:connect)에서 정의한 정확한 범위 이름입니다.

10. 업데이트를 선택합니다.
    
    
    

3단계: OAuth 엔터티 프로파일을 구성합니다.

11. 동일한 애플리케이션 레지스트리 기록에서 OAuth 엔터티 프로파일 탭을 선택합니다.
    
    
    
    자동으로 생성된 기본 프로파일이 표시됩니다.
12. 프로파일 이름을 선택하여 기록을 엽니다.
13. 기본 프로파일 이름을 figma_profile로 변경합니다.
14. OAuth 엔터티 프로파일 기록의 OAuth 엔터티 프로파일 범위 관련 목록에서 새 행 삽입을 두 번 클릭(또는 키보드 단축키 사용)합니다.
15. Figma MCP Connect를 검색하여 선택합니다.
    
    
    
16. 저장을 선택합니다.
    프로파일 기록으로 다시 리디렉션됩니다.
17. 업데이트를 선택하여 프로파일을 저장합니다.
    기본 프로파일은 MCP 범위에 연결됩니다.

Figma MCP 서버를 연결하여 빌드 에이전트

Figma MCP(모델 컨텍스트 프로토콜) 서버를 연결하여 애플리케이션 생성에 Figma 디자인에 액세스할 수 있도록 합니다.빌드 에이전트

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

인스턴스와 Figma 간에 ServiceNow OAuth 연결이 설정되면 이제 Figma 계정에 연결 빌드 에이전트 하여 Figma MCP 서버 사용을 시작할 수 있습니다. 빌드 에이전트 내에서 애플리케이션을 자동으로 생성하고 업데이트 ServiceNow 할 수 있습니다.ServiceNow IDE

프로시저

1. OAuth 앱이 Figma에 구성되어 있고 애플리케이션 레지스트리를 생성했는지 확인하십시오.
   팁:

   ServiceNow IDE 에서 다음으로 이동합니다.모두 > 시스템 OAuth > 애플리케이션 레지스트리 OAuth 앱이 Figma에서 생성되고 구성되어 있는지 확인합니다.

   구성 단계는 해당 문서를 Figma에서 OAuth 앱 구성 참조하십시오 ServiceNow IDE에서 OAuth 제공자 구성.

2. 다음에서 ServiceNow IDEFigma MCP 서버 활성화:
   1. ServiceNow IDE에서 왼쪽 아래 모서리에 있는 선택한 다음 설정을 선택합니다.
   2. 빌드 에이전트를 검색합니다.
      모든 빌드 에이전트 설정이 나열됩니다.
   3. 빌드 에이전트: MCP 서버 사용 확인란을 선택하여 Figma MCP 서버를 사용하도록 설정합니다.
3. 채팅 패널을 빌드 에이전트 엽니다.
4. 채팅 패널의 오른쪽 상단에서 MCP 아이콘 찾아 선택하여 MCP 서버 페이지를 엽니다.
5. 구성한 OAuth 인증 플로우를 트리거하려면 연결을 선택합니다.
   Figma에 로그인하고 애플리케이션을 승인 ServiceNow 하라는 메시지가 표시됩니다.
6. 연결 요청을 승인한 ServiceNow 후 채팅 패널로 빌드 에이전트 돌아갑니다.
   Figma MCP 서버의 상태는 Figma에 연결되어 있음을 나타내는 녹색이며 사용 가능한 모든 도구가 나열됩니다. 생성된 토큰은 의 IDE Git 자격 증명 테이블 ServiceNow IDE에 저장됩니다.

결과

이제 를 통해 빌드 에이전트자연어를 사용하여 Figma MCP 서버와 상호 작용할 수 있습니다.

예를 들어 "UI 페이지를 만들고 <figma 링크> 빌드"와 같은 프롬프트를 사용할 수 있습니다. 빌드 에이전트 Figma에서 디자인 컨텍스트를 검색하고 디자인과 일치하는 애플리케이션을 생성합니다.

중요사항:

애플리케이션이 원래 디자인과 일치하는 정도는 디자인의 복잡성과 전체 구조에 크게 영향을 받습니다. 디자인이 간단하고 복잡하지 않은 경우 응용 프로그램은 의도한 디자인을 밀접하게 반영하는 경향이 있습니다. 반대로, 디자인이 복잡하거나 다면적인 경우 응용 프로그램이 원래 디자인과 더 크게 다를 수 있습니다.

Figma 파일을 더 잘 구성하려면 더 나은 코딩을 위해 Figma 파일 구조화를 참조하고 AI를 안내하는 효과적인 프롬프트 작성을 참조하세요.

표 1. 문제 해결: 빌드 에이전트 문제

문제	설명	솔루션
무단 접근 오류	MCP 서버가 비활성 상태일 수 있으며 무단 액세스 오류가 발생할 수 있습니다. 이 문제는 Figma가 OAuth 플로우를 완료한 후 생성된 토큰을 거부할 때 발생합니다.	문제를 해결하려면 다음 단계를 수행합니다. ServiceNow IDE에서 IDE Git 자격 증명 테이블로 이동하여 관련 토큰을 찾습니다. 활성 열에서 해당 토큰의 값을 true 에서 false 로 전환합니다. 채팅 패널로 빌드 에이전트 돌아갑니다. 채팅 패널의 오른쪽 상단에서 MCP 아이콘 찾아 선택하여 MCP 서버 페이지를 엽니다. 연결을 선택하여 OAuth 인증 플로우를 트리거합니다.