Dev Mode의 새로운 기능은 무엇인가요?
Config 2023에서 Dev Mode를 발표한 이후, 당사에서는 고객과 협력하여 더 나은 핸드오프를 위한 도구를 구축해 왔습니다. Dev Mode는 이제 다음 단계로 접어들고 있으며, 이제 액세스하려면 유료 시트가 필요합니다. 이번 변화에 따라 작업 속도를 높이고, 협업을 개선하고, 워크플로를 사용자 정의하는 데 도움이 되는 새로운 기능과 개선 사항을 도입했습니다.
Dev Mode의 새로운 기능 소개
Figma의 Dev Mode는 개발자가 디자인 파일을 탐색하고 디자인을 코드로 변환하는 데 필요한 모든 것을 제공합니다. Dev Mode를 사용하면 디자이너와 개발자가 같은 정보를 공유할 수 있으므로 핸드오프 과정에서 중요한 세부 정보가 누락되지 않도록 할 수 있습니다.
또한 몇 가지 새로운 Dev Mode 기능과 개선 사항도 출시했습니다.
- 디자인 관련 최신 상태를 유지하는 Dev Mode의 어노테이션을 사용하여 핸드오프 준비 속도 향상
- VS Code용 Figma에서 향상된 탐색 기능 및 플러그인 실행 기능
- 코드와 두 프레임 간의 차이점을 확인할 수 있도록 변경 사항을 비교하는 새로운 모달
- 자신을 위한 플러그인 자동 실행. 또는 전체 조직을 위한 자동 실행(엔터프라이즈 요금제만 해당).
Dev Mode 사용 방법 알아보기
무료 Dev Mode 베타는 1월 31일에 종료되었으며 이제 팀이나 조직 내에서는 유료 시트가 필요합니다. Dev Mode에 대한 액세스 권한은 팀 또는 조직의 요금제, 팀이나 조직이 파일을 소유하고 있는지 여부, 그리고 보유한 시트에 따라 달라집니다. Dev Mode 액세스 권한은 다른 시트 유형과 마찬가지로 계정이 아닌 팀 또는 조직에 부여됩니다.
- 스타터 요금제: 이용할 수 없음
- 프로페셔널 요금제: 풀 디자인 시트에서만 이용 가능
- 오거니제이션 요금제: 풀 디자인 시트와 함께 사용하거나 월 $25에 독립형 시트로 이용 가능
- 엔터프라이즈 요금제: 풀 디자인 시트와 함께 사용하거나 월 $35에 독립형 시트로 이용 가능
스타터 요금제 및 파일 뷰어 사용자는 디자인 모드에서 속성 및 측정값을 계속 보고, 코드를 복사하고, 에셋을 내보낼 수 있습니다.
참고: 프리랜서 또는 에이전시로서 고객의 팀 또는 조직에서 파일 작업을 하는 경우, 해당 팀 또는 조직의 풀 디자인 시트 또는 Dev Mode 시트를 요청해야 합니다. Figma에서 고객과의 협업을 위한 권장 사항에 대해 자세히 알아보기 →
유료 시트로 업그레이드
유료 시트로 업그레이드하고 Dev Mode를 계속 사용하려면 Dev Mode에서 파일 상단의 배너에 있는 Get Dev Mode(Dev Mode 가져오기)를 클릭하고, 지침에 따라 요금제를 업그레이드하거나 시트를 요청하세요.
참고: 유료 요금제에서 Dev Mode로 업그레이드하려면 관리자의 승인이 필요합니다. 워크플로의 즉각적인 중단을 최소화하기 위해 승인을 기다리는 동안 Dev Mode를 계속 사용할 수 있습니다.
나에게 맞는 시트 선택하기
Dev Mode로 업그레이드하지 않더라도 디자인을 검사하고 공동 작업할 수 있습니다. 디자인 모드에서 뷰어로서 속성 값과 프레임 세부 정보를 검사하고, 에셋을 내보내고, CSS, iOS, Android 코드 스니펫을 복사할 수 있습니다. 또한 수식 키를 사용하여 디자인에 수정 사항을 표시하고 크기를 측정할 수 있습니다.
디자인 모드에서 보기 액세스
-
A
속성 값 및 프레임 세부 정보 검사
-
B
자산 내보내기
-
C
레이어를 마우스 오른쪽 버튼으로 클릭 시 복사/붙여 넣기 메뉴에서 CSS, iOS, Android 코드 생성을 코드로 복사
다음은 Dev Mode에서 얻을 수 있는 기능과 디자인 파일의 뷰어로서 얻을 수 있는 기능 간의 몇 가지 주요 차이점입니다.
할 수 있는 작업 |
Dev Mode에서 사용 가능 | 뷰어가 디자인 모드에서 사용 가능 |
---|---|---|
간격 및 측정값 보기 |
마우스오버 시 |
수식 키를 통해 |
속성 값 및 프레임 세부 정보 보기 |
✓ |
✓ |
자산 내보내기 |
✓ |
✓ |
CSS, iOS, Android 코드 생성 보기 |
✓ |
✓ |
✓ |
|
|
어노테이션을 사용하여 파일에 정보 및 측정값 추가 |
✓ |
|
✓ |
|
|
✓ |
|
|
Jira, Storybook, GitHub와 같은 개발자 중심 통합 사용 |
✓ |
|
플레이그라운드에서 디자인 시스템 컴포넌트를 탐색합니다. |
✓ |
|
✓ |
|
|
✓ |
|