목차
- Figma 소개
- Figma Dev Mode
2-1. Design Inspector
2-2. Copy relevant code
2-3. Mark as Ready for Dev - 2024년 1월 업데이트 이후
3-1. Compare Changes
3-2. Annotations
3-3. Plugins - Figma for VS code
- Figma 요금제
- 참고자료
1. Figma란?
Figma는 온라인에서 사용할 수 있는 협업 인터페이스 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능을 제공합니다.
출처: Figma 공식 홈페이지
2. Figma Dev Mode란?
개발자 모드는 디자인을 코드로 더 빠르게 변환하는 데 도움이 되는 기능을 갖춘 개발자를 위한 Figma의 새로운 공간입니다.
2023년 6월, Figma Dev Mode가 추가되었습니다.
기존 피그마의 Inspector 창에 있는 기능이 Dev Mode로 옮겨오면서 새로운 기능들이 추가되었습니다.
2-1. Design Inspector
Figma Dev Mode에서 브라우저의 개발자 도구와 유사하게 디자인 파일을 검사할 수 있습니다.
개체(프레임, 텍스트, 이미지 등) 를 클릭하면 치수, 사양, 스타일과 같은 세부 정보를 확인할 수 있습니다.
2-2. Copy relevant code
Figma Dev Mode에서는 디자인에 관련된 코드를 복사할 수 있는 기능이 있습니다.
완벽하지는 않으나, 개발에 도움이 될 만한 코드 스니펫을 생성해줍니다.
또한 아래처럼, 사용하는 프레임워크에 맞추어 코드를 생성할 수 있습니다.
여러 프레임워크를 지원
2-3. Mark as Ready for Dev
Section 의 이름 옆에 Ready for Dev 아이콘이 추가되었습니다.
해당 아이콘이 붙은 디자인은 개발자가 개발을 시작해도 되는 디자인임을 직관적으로 알 수 있습니다.
3. 2024년 1월 업데이트 이후
2024년 1월, Dev Mode의 베타 기간이 종료되고 Figma 에서는 아래의 3가지 기능이 추가되었습니다.
- compare changes 기능 업데이트
- annotations 추가
- plugins 기능 업데이트
하나씩 알아보겠습니다.
3-1. Compare Changes
Ready for Dev 아이콘이 붙어있는 디자인은, 요소별로 수정사항을 비교해서 볼 수 있습니다.
누가 언제 무엇을 어떻게 변경했는지 히스토리가 남고, 변경사항을 쉽게 추적할 수 있습니다.
Overlay
변경사항을 비교하는 방식을 Side by side 혹은 Overlay 로 설정할 수 있습니다.
Overlay로 설정하면 위 사진처럼 변경된 사항을 겹쳐서 보여줍니다.
3-2. Annotations
Figma의 Annotations 기능은 Java의 Annotation, Nest.js의 Decorator와 유사합니다.
Annotions 기능으로 Dev Mode에서 주석을 추가할 수 있습니다.
Annotations 기능으로 디자이너와 개발자는 각각 아래의 장점을 얻을 수 있습니다.
- Designer : 개발자와 사양 및 측정값을 공유할 수 있음.
- Developer : 작업 중에 디자이너가 남긴 메모를 쉽게 볼 수 있음
데스크톱 앱 기준 좌측 상단의 문서 모양 아이콘이 Annotations 기능 입니다.(Dev Mode에서)
어노테이션 아이콘을 클릭하고 어노테이션을 작성할 개체를 선택하면, 어노테이션의 이름과 해당 개체에 들어가는 프로퍼티를 주석으로 보여줄 수 있습니다.
개체마다 정의되어 있는 프로퍼티들이 다르기 때문에, 어노테이션에도 추가할 수 있는 프로퍼티가 개체마다 다릅니다.
위 사진의 경우 아이콘과 프레임에 어노테이션을 달아봤는데, 프레임에는 Height와 Width, Fill Color만 정의된 반면 아이콘에는 Stroke 프로퍼티가 추가되어있습니다.
수치 측정
Clock and drag to measure
어노테이션 좌측의 Measure 아이콘으로 개체의 사양과 측정 값을 명시적으로 표기할 수 있습니다.
측정 값 표기
Hightlight important details without cluttering the canvas
주석은 특정 줌 수준에서 자동으로 나타지거나 사라지므로, 작업 시 개발자가 방해받지 않습니다.
Hightlight important details without cluttering the canvas
3-3 Plugins
Plugins
데스크톱 앱 기준 화면 우측 상단에 Plugins 탭이 있습니다.
팀에서 이미 사용중인 다양한 툴을 효율적으로 사용할 수 있습니다.
Github 플러그인으로 테스트해보겠습니다.
피그마에 여러 계정이 로그인 되어있거나, 인증하려고 하는 Gihtub계정과 피그마 계정이 일치하지 않으면 위와 같은 에러를 마주할 수 있습니다.
위와 같이 개체를 선택하면, 해당 개체와 관련된 Github pull request와 issue를 등록할 수 있습니다.
4. Figma for VS code
Figma for VS code
Dev Mode의 기능은 아니지만, 매우 유용한 VS Code 확장이 있습니다.
Figma for VS code 확장은 VS code 상에서 Figma 화면을 불러올 수 있습니다.
확장을 설치하면 VS code 의 좌측에 Figma 아이콘이 생깁니다.
이후 피그마에 로그인해주면 VS code 상에서 Figma를 불러올 수 있습니다.
이제 IDE와 피그마를 왔다갔다 하지 않고 에디터에서 피그마를 한번에 확인할 수 있습니다.
5. Figma 요금제
2024년 1월 31일부터 Dev Mode 는 유료 요금제로 전환됩니다.
요금제에 따라 Dev Mode를 계속 사용하기 위해서는 플랜 업그레이드가 필요할 수 있습니다.
- Starter Plan : Dev Mode 미포함
- Professional Plan : 전체 디자인 시트에 Dev Mode 포함
- Organization Plan : 전체 디자인 시트에 Dev Mode를 포함되거나, 월 25달러에 Dev Mode 사용 가능
- Enterprise Plan : 전체 디자인 시트에 Dev Mode를 포함하거나, 월 35달러에 Dev Mode 사용 가능
6. 참고자료
