[Figma MCP]를 활용한 효율적인 UI 컴포넌트 개발 및 실제 적용 경험을 공유합니다
Figma MCP를 Cursor와 연동해 디자인 시안을 React/Vue 컴포넌트로 옮긴 경험을 공유했습니다. 실제 업무에서 개발 시간을 줄이고 세부 튜닝에 집중한 사례를 소개했습니다.
#Figma#MCP
14800
필터 1
Figma MCP로 UI 컴포넌트 개발 효율화하기
Figma MCP를 Cursor와 연동해 디자인을 코드로 변환하는 방법을 소개했습니다. 실제 업무 적용으로 컴포넌트 작업 시간을 줄이고 스토리북 관리에도 도움을 얻었습니다.
#Figma#MCP
20400
아름답고 이해하기 쉬운 세션 자료 만들기 | Simplicity 4 제작기 #5
Simplicity 4 세션 자료를 숏폼에 맞는 시각적 해설자로 설계한 제작 과정을 소개했습니다. 피그마와 템플릿으로 누구나 만들 수 있는 지속 가능한 제작 환경도 마련했습니다.
#UI/UX#Figma
7200
구성원 인터뷰 - 프로덕트 매니저(PM) CY 님
포스타입 PM이 요구사항을 구체화하고 데이터 기반으로 기능을 기획하는 방식과 사례를 소개했습니다. 또한 자율성과 협업이 큰 PM 파트 문화와 중요한 역량을 함께 전했습니다.
#Jira#Confluence
5000
단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
Figma Variables와 CSS Variables를 연결해 디자인 토큰을 자동화한 사례를 소개했습니다. data-theme 속성만으로 다크 테마와 브랜드 테마를 단순 전환하도록 구성했습니다.
#Figma#CSS
1500
디자이너가 48시간만에 만든 Figma Plugin
디자이너가 Cursor AI로 Figma 플러그인을 만들어 애셋 배포 검수 비효율을 줄였습니다. 이틀 만에 완성해 배포 실패를 사전 차단했고 실무 효과도 확인했습니다.
#Figma#Cursor
2900
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편
피그마 플러그인으로 실제 데이터를 디자인 시안에 적용하는 구조와 구현 과정을 정리했습니다. 샌드박스, CORS, 라우팅 제약을 우회한 방법과 로그 수집 개선 사례도 소개했습니다.
#Figma#React
8700
디자인 생산성을 높이는 피그마 플러그인을 만들어보자 1부: 디자인 편
UT용 프로토타입 데이터 입력의 반복 작업과 리소스 탐색 비효율을 줄이기 위해 피그마 플러그인 데이터브릿지를 만들었습니다. 실제 데이터 적용과 기능 단순화로 작업 시간을 크게 줄이고 인터뷰 몰입도를 높였습니다.
#Figma#UI/UX
8600
프론트엔드 엔지니어가 AI로 완성한 n8n 랜딩 페이지 제작 후기 \:\ 기획, 디자인, 개발의 통합 경험
AI 도구를 활용해 n8n 랜딩 페이지를 기획부터 디자인, 개발까지 완성한 과정을 공유했습니다. 각 단계별 도구 활용법과 생산성을 높이는 실무 팁을 정리했습니다.
#Figma#Canva
800
프론트엔드 엔지니어가 AI로 완성한 n8n 랜딩 페이지 제작 후기 \:\ 기획, 디자인, 개발의 통합 경험
AI 도구를 활용해 n8n 랜딩 페이지를 기획, 디자인, 개발한 경험을 공유했습니다. 단계별로 도구를 분리해 사용하며 속도와 품질을 함께 높인 과정이 핵심입니다.
#Figma#Notion AI
17000
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
디자인 시스템을 통해 UX와 FE 간 Hand-off를 표준화하고 협업 효율을 높인 사례를 설명했습니다. Figma, Token, Storybook, NPM을 연결해 일관성과 재사용성을 강화하는 과정도 다뤘습니다.
#Design System#Storybook
3000
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.
#Design System#UI/UX
4600
"딸깍"이면 끝! 피그마에서 바로 리액트 컴포넌트로 변환하기
피그마 디자인을 React 컴포넌트로 바로 변환하는 플러그인 구현 과정을 소개했습니다. 사내 규칙을 반영한 자동화로 수작업을 줄이고 생산성을 높인 사례입니다.
#Figma#React
2100
사용자 모르게 리멤버 UI icon 개선하기
리브랜딩 후 사용자에게 오류처럼 보이던 UI icon을 폰트 기반 디자인과 명확한 가이드로 개선했습니다. 그 결과 VOC가 감소하고 아이콘 제작 리소스도 크게 줄었습니다.
#UI/UX#디자인패턴
5500