디자인 핸드오프를 위한 Figma
디자인 핸드오프 간소화
Figma는 디자이너와 개발자가 동일한 정보를 공유할 수 있는 디자인 핸드오프 환경을 지원합니다. 소통을 개선하고 일관성을 유지하여 뛰어난 제품을 제작하세요.
![개발 모드 토글, CSS 박스 모델, 커서 채팅, 높이 치수, 바운딩 박스 등 Figma의 개발 모드를 나타내는 도형과 기호.](https://cdn.sanity.io/images/599r6htc/regionalized/6fc5dbcdb91b4c56b1a1ffb2af7b7e0d5f36d09d-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Figma를 신뢰하는 주요 고객
디자인과 개발의 간극 좁히기
디자이너와 개발자 간의 소통과 협업을 개선하여 디자인한 대로 구현할 수 있습니다.
![두 명의 팀원이 메모를 통해 전자상거래 제품 페이지에서 엔지니어링을 위한 디자인 노트를 문서화하고 있음.](https://cdn.sanity.io/images/599r6htc/regionalized/ec829ed4e31550b087b55e0869f75ae382c9bcd6-1560x1249.png?rect=1,0,1559,1249&w=780&h=625&q=75&fit=max&auto=format)
오해의 소지 최소화
디자인 파일에 메모와 측정값을 빠르게 추가하여 명확성을 개선하고 개발 프로세스를 가속화할 수 있습니다.
![개발자가 전자상거래 제품 랜딩 페이지에서 “장바구니에 추가” 버튼 컴포넌트의 현재 버전과 이전 버전을 비교하고 있음.](https://cdn.sanity.io/images/599r6htc/regionalized/a2106da9cb52e0d9da9c348f4baee3926503d293-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
번거로운 반복 작업 감소
개발자는 프레임을 이전 버전과 쉽게 비교하여 변경된 사항을 정확히 확인할 수 있습니다.
더 나은 디자인 핸드오프를 위한 기능 살펴보기
개발자를 위한 전용 보기 도구
개발자를 초대하여 시작 단계부터 협업을 진행하고 디자인 결정에 참여시키세요. 개발자가 디자인을 검사하고 비교하며 구현할 수 있도록 전용 보기 도구인 개발 모드를 제공하세요.
![전자상거래 웹사이트 디자인 시스템의 색상 스타일 근처에 있는 개발자의 커서.](https://cdn.sanity.io/images/599r6htc/regionalized/87a21162ebf76abd4de9c6f624aad67590bca9d7-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)
디자인 시스템과 코드의 조화
컴포넌트와 스타일을 간편하게 만들고, 유지 관리하고, 공유하세요. 토큰을 활용하여 디자인 파일과 코드에서 동일한 언어를 사용하고, 디자인 파일 내에서 바로 다른 개발자 리소스를 확인할 수 있습니다.
코드 스니펫 검사 및 가져오기
치수, 사양, 스타일 등 세부 정보를 확인하세요. 디자인에서 바로 제작 가능한 CSS, iOS 또는 Android 코드 스니펫을 생성하세요. 또는 클릭 한 번으로 에셋을 내보낼 수도 있습니다.
![Visual Studio Code의 프로젝트 작업 공간.](https://cdn.sanity.io/images/599r6htc/regionalized/dd9455290499b002fbd265cad9fd0158ba8bb319-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
VS Code 통합
VS Code용 확장 프로그램으로 디자인 파일을 텍스트 에디터로 가져올 수 있습니다. Figma 파일 검사, 디자이너와의 협업, 알림 받기, 코드 제안 받기 등의 모든 작업을 VS Code에서 수행할 수 있습니다.
예전에는 개발자가 각 요소를 검사해야 했어요. 하지만 이제는 디자인에서 코드를 자동으로 생성할 수 있어요.
사우라브 소니, Razorpay 디자인 책임자
디자인 핸드오프 모범 사례 자세히 알아보기
![산호색 배경에 녹색, 노란색, 검은색이 겹쳐진 개발 관련 형태(예: 개발 모드 토글).](https://cdn.sanity.io/images/599r6htc/regionalized/8244c56cf528cb567ce0b673c04470084968ea11-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
개발 모드 자세히 살펴보기
개발 모드에 대해 자세히 알아보고 개발 모드가 어떻게 디자인 핸드오프를 더욱 수월하게 만드는지 확인해 보세요.
![디자인 시스템 라이브러리에서 녹색 원을 선택하고 브랜드 색상 헥스 코드를 확인하는 개발자 커서.](https://cdn.sanity.io/images/599r6htc/regionalized/5552ea22fc3ac3b07f7dbac6c96f6fe5b53c6d8c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
핸드오프 모범 사례 살펴보기
전문가의 모범 사례 컬렉션을 확인해 보세요.
![녹색 커서에 의해 선택되는 과정을 보여주는 Figma 로고.](https://cdn.sanity.io/images/599r6htc/regionalized/3fd439980ffa346a4ffd308a95d0c6c699ed6f0b-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Figma가 개발 모드 사용하는 방법
Figma 엔지니어링팀과 디자인팀이 핸드오프에 개발 모드를 어떻게 사용하는지 알아보세요.