피그마

총 25개의 글

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

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

19

실습 프로젝트 및 평가

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

13

프롬프트 템플릿 모음

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

15

Figma 디자인 13가지 핵심 원칙

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

13

커리큘럼

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

12

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

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

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

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

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

433
[플러그인] html.to.design

[플러그인] html.to.design

html로 된 웹주소를 입력하면 figma에서 디자인된 페이지를 확인할 수 있습니다.https://www.figma.com/community/plugin/1159123024924461424/html.to.design

200

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

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

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

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

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

2318

피그마에서 점선 만들기

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

7128