Figma MCP 완전 정복: 설치부터 실전 활용까지
개요 Figma MCP (Model Context Protocol) 서버는 AI 코딩 도구(Claude Desktop, Claude Code)가 Figma 디자인 파일에 직접 접근할 수 있게 해주는 연결 도구입니다.
총 25개의 글
개요 Figma MCP (Model Context Protocol) 서버는 AI 코딩 도구(Claude Desktop, Claude Code)가 Figma 디자인 파일에 직접 접근할 수 있게 해주는 연결 도구입니다.
개요 Figma MCP (Model Context Protocol) 서버는 AI 코딩 도구(Claude Desktop, Claude Code)가 Figma 디자인 파일에 직접 접근할 수 있게 해주는 연결 도구입니다.
학습 목표 디자인 토큰의 개념 이해 Figma Dev Mode에서 정확한 CSS 값 추출 SCSS 변수 시스템 구축 디자인-퍼블 불일치 방지 1. 왜 디자인 토큰이 필요한가? Figma MCP의 한계 Figma MC
실습 프로젝트 프로젝트 1: 로그인/회원가입 시스템 목표: 회원 모듈 스킨 완성 파일: - login.html - signup.html - _member.scss 체크포인트: - [ ] PC/태블릿/모바일 반응형 -
템플릿 1: 기본 페이지 퍼블리싱 작업경로: layouts/lllayer_kda/assets/pages/_about_english.html 레이아웃에 SCSS 작성, HTML은 구조만 반응형: PC → Mobile
피그마 코딩(Figma MCP → AI 퍼블) 할 때 팁 ✅ 원칙 1: 디자인과 설명 분리 나쁜 예: 설명글을 Figma 레이어로 작성 좋은 예: 코멘트 기능 활용 이유: AI가 디자인 요소와 설명을 혼동 ✅ 원칙
Week 1: Figma 디자인 최적화 기초 세션 1-0: Figma MCP 환경 구축 (2시간) 학습 목표 - Figma MCP 서버 설치 및 연동 - 첫 Figma 디자인 불러오기 성공 - 기본 워크플로우 이해
강의 개요 항목 내용 강의명 Figma MCP를 활용한 AI 웹퍼블리싱 실무 기간 4주 (주 1회, 회당 2시간) 수강료 200만원 강사 이온디 (웹퍼블리싱 10년차, 바이브코딩 전문가) 수강 대상 웹디자이너, 퍼블
https://youtube.com/shorts/103XiZVOo74?si=Vinw9oFYtFPKvU-Ucursor-talk-to-figma-mcp 검색
안녕하세요 귀차니스트 이온디입니다. 너무 너무 귀찮지만, 머리 속의 지우개를 가지고 있기 때문에 적습니다. 귀하의 브라우저는 html5 video를 지원하지 않습니다.귀하의 브라우저는 html5 video를 지원하지
Pitchdesk Presentation Studio130 페이지 정도 되는 pptx 파일을 가져오는데 시간이 좀 오래 걸리네요.한 십분 넘게 걸리는 거 같네요https://www.youtube.com/watch?v
https://www.youtube.com/watch?v=O9zGylVljbIhttps://www.youtube.com/watch?v=O9zGylVljbI1. Install the "Figma to Webflow"
몇가지 있습니다만 Iconify 플러그인은 다양한 아이콘 셋을 검색해서 사용 가능합니다.
html로 된 웹주소를 입력하면 figma에서 디자인된 페이지를 확인할 수 있습니다.https://www.figma.com/community/plugin/1159123024924461424/html.to.design
기본적으로 figma 파일은 포토샵에서 불러오지는 못합니다.https://filestar.com/skills/fig/convert-fig-to-psdhttps://filestar.com/skills/fig/conve
임시해결방법3. 바로 CMD를 누른 상태에서 상하 스크롤(두 손가락으로 트랙패드를 위 아래로 스와이핑)을 하면 확대/축소 기능이 작동하는 것을 이용하는 것입니다ps. 아래 글에서 다른 방법도 안내가 되어있는데 이게
1. 프레임 사이즈 94*54(90*50) 만들기1) Unit Converter 플러그인 설치처음엔 몰라서 인터넷에서 px to mm 검색해서 컨버팅해주는 사이트에서 해봤는데 그 값이랑 실제 인쇄소에서 94mm 재단
ps. 저 빨간색 선은 가이드선입니다. 저런 게 아니라 빨갛고 파랗고 넓이 굵기도 제각각으로 나타납니다.피그마 요즘 빨간줄 파란줄 이렇게 생기는건 그래픽 카드 성능이 떨어져서 그런건가요?맥북에선 안 그렇던데 델 노트
출처 : Using Shape Tools – Figma Creating Dashed LinesDraw or select the line you'd like to make dashed.In the Stroke sect