Figma (3) 썸네일형 리스트형 디자이너와 협업하는 방법 (핸드오프, 스펙 확인) 들어가며 디자이너와 개발자 사이에서 생기는 마찰의 대부분은 커뮤니케이션 문제다. 핸드오프 프로세스를 제대로 잡아두면 불필요한 오해와 재작업을 줄일 수 있다. 실무에서 겪은 상황 위주로 정리해둔다. 핸드오프란? 디자이너가 완성된 디자인을 개발자에게 넘기는 과정이다. 단순히 Figma 링크를 공유하는 게 아니라 개발에 필요한 모든 정보를 전달하는 과정이다. 좋은 핸드오프의 조건:- 모든 화면 상태가 디자인되어 있다- 스펙이 명확하게 정의되어 있다- 에셋(이미지, 아이콘)이 export 가능하다- 인터랙션과 애니메이션이 명시되어 있다- 디자인 변경 시 개발자에게 알림이 간다 핸드오프 체크리스트 개발 시작 전에 디자이너에게 확인해야 할 항목들이다. 화면 .. 개발자 모드 (Dev Mode) 활용하기 들어가며 Figma Dev Mode는 개발자가 디자인 스펙을 더 편하게 확인할 수 있도록 만들어진 모드다. 일반 뷰어 모드보다 훨씬 많은 정보를 제공하고 CSS 코드도 바로 확인할 수 있다. 실무에서 어떻게 활용하는지 정리해둔다. Dev Mode 진입 Figma 파일 열기 → 우측 상단 토글 버튼 → Dev Mode 전환단축키: Shift + D Dev Mode는 유료 플랜에서 제공되지만, 뷰어 권한으로도 접근 가능한 경우가 있다. 회사 Figma 플랜에 따라 다르다. Dev Mode에서 달라지는 것들 우측 패널 변화 일반 모드에서는 Design 탭만 보이지만 Dev Mode에서는 다음이 추가된다. Code 탭 : CS.. Figma 기본 개념 (개발자가 알아야 할 것들) 들어가며 Figma를 직접 디자인할 일은 없지만, 디자이너가 만든 화면을 열어보고 스펙을 확인하는 일은 개발하면서 자주 생긴다. 제대로 읽을 줄 모르면 디자이너에게 매번 물어봐야 하고 커뮤니케이션 비용이 늘어난다. 개발자 입장에서 꼭 알아야 할 것들을 정리해둔다. Figma 파일 구조 디자이너에게 링크를 받으면 브라우저에서 바로 열린다. 파일 구조를 먼저 파악하는 게 중요하다. 페이지 (Page) 좌측 상단에서 페이지 목록을 확인할 수 있다. 보통 이런 식으로 구성되어 있다. Cover : 파일 썸네일, 프로젝트 정보Design : 실제 화면 디자인Components : 버튼, 인풋 등 재사용 컴포넌트 모음Style Guide .. 이전 1 다음
