Cursor에서 Figma MCP를 써야하는 이유 - 디자이너와 개발자의 연결

소개

저번 주에 Cursor와 Figma MCP를 붙여서 몇 가지 시도를 했는데요, 그럼 클로드에서 Figma MCP를 붙이는것과 무슨 차이가 있냐...? 이런 질문을 받았습니다. (나도 몰랑... 😭)

여러가지 테스트를 하다가 꿀 활용법을 발견했습니다.

퍼퓸, 코스메틱, 패션 탭도 추가해줘

In addition to the jewelry section, create a perfume, cosmetics, and fashion tab. And make sure to focus on shapes that models are trying on.

다른 탭 디자인도 추가해줘
```
Create a screen for each of the following tabs: perfume, cosmetics, and fashion.
```

전체 페이지를 비슷한 톤앤매너로, 그리고 네비게이션바도 통일해줘.

Please recreate the screens so far in the same tone and manner, with the same mood, including the navigation bar.

피그마 복사를 누르고 피그마에 하나씩 붙여넣기 합니다 (ctrl V)

러버블이나 v0보다 좋은 점! 디자인을 바로바로 보면서 하나씩 직접 수정이 가능하다는 점이죠.

즉시 붙여넣기(Paste to Figma) 기능
Stitch는 생성된 UI 디자인을 Figma로 바로 복사해 붙여넣을 수 있는 기능을 제공합니다. 이 기능을 통해 디자이너는 Stitch에서 생성한 레이아웃을 Figma에서 바로 수정하거나 팀원과 협업할 수 있습니다. 이러한 연동은 디자인 작업의 연속성을 높여줍니다.
자동 레이아웃 및 컴포넌트 구조 지원
Stitch에서 생성된 디자인은 Figma로 복사할 때 자동으로 Auto Layout이 적용되어 반응형 디자인 구현이 용이합니다. 또한, 컴포넌트 기반의 구조를 유지하여 재사용성과 유지보수성을 높여줍니다.
빠른 프로토타이핑과 코드 생성
Stitch는 텍스트 프롬프트나 이미지 입력을 통해 UI 디자인을 생성하고, 이를 Figma로 가져와 빠르게 프로토타입을 만들 수 있습니다. 또한, 생성된 디자인은 HTML/CSS 코드로 변환하여 개발에 바로 활용할 수 있습니다.

v0: 주로 코드 중심의 UI 생성 도구로, 디자이너보다는 개발자에게 초점이 맞춰져 있습니다.
러버블(Lovelace): AI 기반의 UI 생성 도구로, 디자인보다는 코드 생성에 중점을 둡니다.개발자스럽다+1생성형 AI로 배우는 실무형 UX/UI & 프론트엔드+1
Stitch: 디자이너와 개발자 모두를 위한 도구로, 자연어 프롬프트나 이미지 입력을 통해 UI를 생성하고, 이를 Figma로 바로 가져와 수정 및 협업이 가능합니다.