Engineering
Prompt Engineering
AI Design Prompt Gist
일반적인 MCP 피그마 프롬프트 (Common mcp figma prompts)

일반적인 MCP 피그마 프롬프트 (Common mcp figma prompts)

이 문서는 Figma 작업을 위한 다양한 MCP(Multi-Capable Platform) 프롬프트 예시를 제공합니다.

원본 Gist (opens in a new tab)

목차

프롬프트 개선:

이 가이드라인을 기반으로 프롬프트를 개선할 수 있습니다: Markdown-Instructions-for-Al--and-humans.md

오토레이아웃 프롬프트:

  1. mcp 채널 6dkiglef를 통해 Figma의 현재 디자인을 분석합니다.
  2. 분석을 기반으로 Figma 오토레이아웃을 적용합니다. 관련 원칙은 다음 링크에서 다운로드할 수 있습니다:
  3. 레이어 및 컴포넌트 이름 지정도 함께 수행합니다: figma-project-structure-best-practices.md

디바이스 프레임 프롬프트:

  • iPhone 16 Pro Max 세로 모드용 디바이스 프레임을 추가하는 계획을 세웁니다.
  • 화면 크기, 안전 영역, 디바이스 베젤을 정확하게 설정해야 합니다.
  • Figma 모범 사례 가이드라인에 따라 프레임을 적절하게 구성합니다: figma-project-structure-best-practices.md
  • 디바이스 메트릭 지침: apple-devices-figma-frames.md
  • 세로 모드는 해상도가 반전되며 3x 픽셀 비율로 작업해야 합니다 (크기 메트릭을 3으로 나눔).

피그마 프로젝트 네이밍 컨벤션 개선

  • 레이어 네이밍:
    • "Rectangle 1"과 같은 기본 이름 대신 설명적인 이름을 사용합니다.
    • 일관된 대소문자 스타일을 선택합니다 (가독성을 위해 Title Case 선호).
  • 컴포넌트 네이밍:
    • 컴포넌트 이름의 첫 글자는 대문자를 사용합니다.
    • 하이픈(-)으로 이름을 구분합니다 (예: Button-Primary).
    • 이중 밑줄(__)을 사용하여 변형을 정의합니다.
    • 슬래시(/)를 사용하여 요소별로 그룹화합니다.
    • 해당하는 경우 이름에 크기를 포함합니다 (예: icon-16-home).

Apple HIG를 사용한 디자인

Apple의 인간 인터페이스 가이드라인(HIG)을 준수하여 디자인합니다.

디자인 리팩토링

Figma mcp를 사용하여 현재 디자인을 분석하고, 마스터 참조 이미지와 비교하여 간격, 크기, 레이아웃, 색상, 요소 등 누락된 부분을 파악하고 수정 계획을 세웁니다.

아이콘 다운로드

피그마 반복적 수정

  • UI 디자인에 대한 수정 계획을 세웁니다.
  • 특정 레이어(path/to/layer)에 집중합니다.
  • Figma 디자인을 분석하고 첨부된 이미지와 비교하여 차이점을 파악합니다.
  • 타이포그래피, 색상, 간격, 크기 등에 중점을 둡니다.

폰트 교체

  • 모든 폰트를 "SF Pro Text"로 교체하고 적절한 두께를 적용합니다.
  • "SF Pro Text"의 네이밍 규칙에 대한 자세한 내용은 다음을 참조하십시오: SF_Pro_Text_in_Figma.md
Figma 오토레이아웃 개요 (Figma Autolayout Overview)