개발 모드
개발 모드를 만나보세요. 가장 빠르게 아이디어를 현실로 구현하세요. 이제 Figma에서 모든 조직의 디자이너와 개발자는 더욱 긴밀하게 협업할 수 있습니다.
Figma를 신뢰하는 주요 고객
![atlassian 로고](https://cdn.sanity.io/images/599r6htc/regionalized/e396ca8101ec0772e305218d4182d0d04b3b3ff5-288x44.png?w=164&h=25&q=75&fit=max&auto=format)
![decathlon 로고](https://cdn.sanity.io/images/599r6htc/regionalized/38cff5d002e30ff1323c74598a694494dacba646-250x44.png?rect=1,0,248,44&w=152&h=27&q=75&fit=max&auto=format)
![github 로고](https://cdn.sanity.io/images/599r6htc/regionalized/611ef663c85755149a71672db445935cc8f3538b-131x44.png?w=111&h=37&q=75&fit=max&auto=format)
![kayak 로고](https://cdn.sanity.io/images/599r6htc/regionalized/e6a2f4afef0df0946df6152e72dce876b42e144d-220x44.png?rect=3,0,214,44&w=141&h=29&q=75&fit=max&auto=format)
![razorpay 로고](https://cdn.sanity.io/images/599r6htc/regionalized/f7eb4c8070503110a15fbc623232090fb841e245-206x44.png?rect=3,0,201,44&w=137&h=30&q=75&fit=max&auto=format)
![volkswagen group services 로고](https://cdn.sanity.io/images/599r6htc/regionalized/49197d6d33f9d6c57bfc903535e66e434508bbae-192x44.png?rect=3,0,187,44&w=132&h=31&q=75&fit=max&auto=format)
디자인과 엔지니어링 간의 작업 주고 받기 간소화
개발 모드는 Figma에 체계를 더해주어 디자인과 엔지니어링이 더욱 원활하게 협업할 수 있게 합니다.
![](https://cdn.sanity.io/images/599r6htc/regionalized/1e778b8c40435b85ca41b70f110b92220b1dd59b-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
주석 및 측정값 추가
주석과 측정값으로 핸드오프 준비 시간을 단축하세요. 디자인이 변경되면 업데이트되므로 반복 작업을 계속할 수 있습니다.
프로세스에 명확성 부여
개발 모드를 사용하면 팀이 작업을 진행하는 데 집중할 수 있습니다. 만들 준비가 된 사항, 변경 사항, 완료 사항을 정확히 찾고 추적하세요.
![](https://cdn.sanity.io/images/599r6htc/regionalized/fd1fbb72b283e26a8098f2523d3cd528d495130e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
작업의 연결성 유지
인기 있는 개발 도구의 워크플로우 플러그인을 사용하면 디자인 라이브러리, 코드베이스, 프로젝트 관리 도구 사이를 오갈 필요가 없습니다.
Figma의 개발 모드는 개발자와 디자이너 간의 협업을 간소화하여 둘 사이의 마찰을 줄여주는 데, 그게 정말 마음에 들어요.
Sandra Schaus
Volkswagen Group Services 비즈니스 개발 서비스, 리드 UX 전문가
디자인 시스템 채택 촉진을 통한 제품 디자인 및 엔지니어링 품질 강화
디자인 및 개발 전반에서 일관성을 유지하여 디자인 시스템을 팀이 선택할 수 있는 가장 간단한 방법으로 만드세요.
![](https://cdn.sanity.io/images/599r6htc/regionalized/0d844e3984d0aacbf53803930a1b607d512b51fe-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
컴포넌트 정보 받기
캔버스의 개체에 직접 연결된 컴포넌트 속성 및 문서를 살펴보세요.
디자인 시스템과 코드베이스 연결
Code Connect를 사용하면 코드의 컴포넌트를 Figma의 디자인 시스템과 연결할 수 있으므로 코드 스니펫을 항상 프로덕션에 바로 사용할 수 있습니다.
HP가 개발 모드를 사용하여 디자인 시스템 채택률을 높이는 방법 알아보기
Figma에서 개발자가 더 효율적이고 효과적으로 작업할 수 있도록 지원
개발 모드를 사용하면 디자인 관련 지식이 없어도 빌드를 시작하는 데 필요한 세부 정보를 쉽게 찾을 수 있습니다.
![](https://cdn.sanity.io/images/599r6htc/regionalized/33b5228b51eab3dc76b2eaf4775fba64673137a5-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Visual Studio Code를 위한 Figma
VS Code용 확장 프로그램으로 디자인 파일을 텍스트 에디터로 가져올 수 있습니다. Figma 파일 검사, 디자이너와의 협업, 알림 받기, 코드 제안 받기 등의 모든 작업을 더 빨리 빌드할 수 있습니다.
![](https://cdn.sanity.io/images/599r6htc/regionalized/f5803db33bf612f962a2efd5f04ce8bf0dff762a-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
관련 코드 복사
디자인에서 CSS, iOS, Android 코드 스니펫을 생성하거나 플러그인으로 사용 중인 프레임워크나 라이브러리에 맞게 코드를 맞춤화하세요.