전체 글

Figma MCP 완전 정복: 설치부터 실전 활용까지

개요 Figma MCP (Model Context Protocol) 서버는 AI 코딩 도구(Claude Desktop, Claude Code)가 Figma 디자인 파일에 직접 접근할 수 있게...

Figma MCP 서버 완전 가이드: 디자인에서 코드로의 브릿지

개요 Figma MCP (Model Context Protocol) 서버는 AI 코딩 도구(Claude Desktop, Claude Code)가 Figma 디자인 파일에 직접 접근할 수 있게...

디자인 토큰과 정밀 퍼블리싱

학습 목표 디자인 토큰의 개념 이해 Figma Dev Mode에서 정확한 CSS 값 추출 SCSS 변수 시스템 구축 디자인-퍼블 불일치 방지 1. 왜 디자인 토큰이 필요한가? Figma...

실습 프로젝트 및 평가

실습 프로젝트 프로젝트 1: 로그인/회원가입 시스템 목표: 회원 모듈 스킨 완성 파일: - login.html - signup.html - _member.scss 체크포인트: - [ ]...

프롬프트 템플릿 모음

템플릿 1: 기본 페이지 퍼블리싱 작업경로: layouts/lllayer_kda/assets/pages/_about_english.html 레이아웃에 SCSS 작성, HTML은 구조만...

Figma 디자인 13가지 핵심 원칙

피그마 코딩(Figma MCP → AI 퍼블) 할 때 팁 ✅ 원칙 1: 디자인과 설명 분리 나쁜 예: 설명글을 Figma 레이어로 작성 좋은 예: 코멘트 기능 활용 이유: AI가 디자인...

커리큘럼

Week 1: Figma 디자인 최적화 기초 세션 1-0: Figma MCP 환경 구축 (2시간) 학습 목표 - Figma MCP 서버 설치 및 연동 - 첫 Figma 디자인 불러오기 성공...

Figma MCP 웹퍼블리싱 자동화 강의

강의 개요 항목 내용 강의명 Figma MCP를 활용한 AI 웹퍼블리싱 실무 기간 4주 (주 1회, 회당 2시간) 수강료 200만원 강사 이온디 (웹퍼블리싱 10년차, 바이브코딩 전문가)...

손하나 까딱하지 않고 말로만 수정하는 방법

https://youtube.com/shorts/103XiZVOo74?si=Vinw9oFYtFPKvU-Ucursor-talk-to-figma-mcp 검색

혹시 피그마에서 저 파란버튼을 누를때만 이미지가 하나씩 이동해서 보이게 하는 방법이 있을까요?

Figma에서 움직이는 GIF, MP4를 만들어보자.

안녕하세요 귀차니스트 이온디입니다. 너무 너무 귀찮지만, 머리 속의 지우개를 가지고 있기 때문에 적습니다. 귀하의 브라우저는 html5 video를 지원하지 않습니다.귀하의 브라우저는...

피그마에서 PPT 불러오는 방법 (How to import

Pitchdesk Presentation Studio130 페이지 정도 되는 pptx 파일을 가져오는데 시간이 좀 오래 걸리네요.한 십분 넘게 걸리는 거...

How to import from Figma to webflow plugin?

https://www.youtube.com/watch?v=O9zGylVljbIhttps://www.youtube.com/watch?v=O9zGylVljbI1. Install the...

피그마에서 아이콘을 불러오는 플러그인

몇가지 있습니다만 Iconify 플러그인은 다양한 아이콘 셋을 검색해서 사용 가능합니다.

[플러그인] html.to.design

html로 된 웹주소를 입력하면 figma에서 디자인된 페이지를 확인할 수...

포토샵에서 피그마 파일 불러오는 방법

기본적으로 figma 파일은 포토샵에서 불러오지는...

피그마(Figma) 맥북에서 확대/축소가 안 되는 문제

임시해결방법3. 바로 CMD를 누른 상태에서 상하 스크롤(두 손가락으로 트랙패드를 위 아래로 스와이핑)을 하면 확대/축소 기능이 작동하는 것을 이용하는 것입니다ps. 아래 글에서 다른 방법도...

피그마로 명함 디자인하기(How to Design a Business Card with Figma)

1. 프레임 사이즈 94*54(90*50) 만들기1) Unit Converter 플러그인 설치처음엔 몰라서 인터넷에서 px to mm 검색해서 컨버팅해주는 사이트에서 해봤는데 그 값이랑 실제...

피그마에서 빨간줄, 파란줄은 왜 생기는 걸까요

ps. 저 빨간색 선은 가이드선입니다. 저런 게 아니라 빨갛고 파랗고 넓이 굵기도 제각각으로 나타납니다.피그마 요즘 빨간줄 파란줄 이렇게 생기는건 그래픽 카드 성능이 떨어져서...

피그마에서 점선 만들기

출처 : Using Shape Tools – Figma Creating Dashed LinesDraw or select the line you'd like to make dashed.In...