Figma를 신뢰하는 주요 고객
Figma 컨텍스트를 활용하여 더 나은 코드를 생성하세요
Figma MCP 서버로 Figma Design을 정확한 코드로 변환하세요. Figma 컨텍스트를 VS Code, Cursor, Windsurf, Claude 같은 에이전틱 코딩 도구에 직접 가져와 더 효율적인 업무 흐름을 제공합니다.
빌드에 필요한 정보를 '빠르게' 찾아보세요
더 간소해진 코드 검사, 한눈에 확인하는 ready for dev 상태 덕분에 업무 흐름이 눈부시게 원활해집니다.
디자인 변경 사항 비교
프레임이나 컴포넌트가 마지막으로 편집된 시점을 확인하거나, 버전 내역을 열어 디자인 변경 사항을 나란히 비교할 수 있습니다.
디자인 사양 살펴보기
색상 코드 및 토큰 값과 같은 컴포넌트 속성을 검사하고, 간격을 확인하며, 코드를 복사하고 붙여넣어 개발 프로세스의 속도를 높일 수 있습니다.
보기 모드 전환으로 더 쉽게 파악하는 정보
ready for dev 보기를 클릭하여 ready for dev 상태로 표시된 디자인을 확인하세요. 특정 컴포넌트를 클릭하여 포커스뷰로 분리할 수도 있습니다.
VS Code 확장 프로그램으로 빌드를 더 간편하게
VS Code 확장 프로그램으로 익숙하고 좋아하는 환경에서 작업하세요. 화면 전환은 줄이고 코딩에 더 집중할 수 있습니다.
Figma의 Dev Mode는 개발자와 디자이너 간의 협업을 간소화하여 둘 사이의 마찰을 줄여주는 데, 그게 정말 마음에 들어요.
Sandra Schaus
Volkswagen Group Services 비즈니스 개발 서비스, 리드 UX 전문가
디자인 시스템과 코드베이스를 연결해 빌드 품질을 일정하게 유지하세요
Dev Mode를 사용하면 일관되고 재사용 가능한 디자인을 만들고, Code Connect를 통해 코드베이스에 매끄럽게 연결할 수 있습니다.
Code Connect와 코드베이스 연결
Code Connect로 코드베이스를 Figma의 기존 디자인 시스템과 연결해 바로 사용 가능한 스니펫을 생성할 수 있습니다.
Code Connect의 가장 큰 장점은 개발자가 이전에 수행해야 했던 여러 환경 간 전환을 많이 줄일 수 있다는 점입니다.
Gilson Hoffmeister
디자인 시스템 전략가, HP
확 줄어드는 디자이너와의 소통 간극
상태 업데이트, 댓글, 주석 등의 기능 덕분에 빌드 중에도 디자이너와 손발이 척척 맞습니다.
의사소통 개선으로 줄어드는 반복 작업
디자인 변경 사항을 실시간으로 알려주어 항상 최신 정보로 빌드할 수 있습니다. ready for dev 보기는 빌드할 준비가 된 항목, 변경된 항목, 완료된 항목을 깔끔하게 요약하여 제공합니다.
더 많은 디자인과 개발 리소스를 살펴보세요
Dev Mode에 대해 알아야 할 모든 것
Figma는 아이디어 구상부터 코딩까지 보다 효율적인 제품 개발을 위해 Dev Mode를 구축했습니다. Figma의 제품 철학과 향후 계획에 대해 알아보세요.
원활한 핸드오프를 위해 디자이너가 알아야 할 5가지 사항
핸드오프는 순간이 아닌 과정입니다. 끊임없이 진행되는 디자인 작업과 소통, 협업 속에서 어떻게 핸드오프를 간소화할 수 있을까요? 디자이너 옹호자인 Lauren Andres가 자신의 팁을 공유합니다.
개발자를 위한 커뮤니티 플러그인 살펴보기
Figma 커뮤니티에서 제작한 수천 개의 플러그인을 만나보세요. 작업 방식에 새로운 가능성이 열립니다.