Engineering
Prompt Engineering
AI Design Prompt Gist
AI를 이용한 Figma 디자인 리팩토링

AI를 이용한 Figma 디자인 리팩토링

이 문서는 AI를 사용하여 Figma 디자인을 리팩토링하는 방법에 대한 지침과 팁을 제공합니다. 훌륭한 디자인을 만들기 위해서는 여러 번의 반복 작업이 필요할 수 있으며, 후속 프롬프트를 적용하여 디자인을 수정하고 개선하는 것이 예상됩니다.

원본 Gist

자산 추가

Figma MCP는 아이콘이나 이미지를 직접 추가할 수 없으므로, 디자인 리팩토링 과정에서 이를 처리해야 합니다.

  1. pplx.ai와 같은 도구를 사용하여 필요한 아이콘의 절대 URL을 가져옵니다.
  2. 가져온 마크다운을 붙여넣고 해당 URL의 파일을 컴퓨터에 다운로드하도록 요청합니다.
  3. 다운로드한 파일을 Figma로 드래그합니다.
  4. 현재 플레이스홀더를 아이콘으로 교체하는 계획을 세웁니다. 이름 차이 등에 대해 구체적으로 설명해야 합니다.
  5. 계획을 실행합니다.

후속 수정

다음은 후속 수정 프롬프트의 예시입니다 (계획 모드로 전환):

1. 몇 가지 문제가 있습니다. 제목 컨테이너가 내부 콘텐츠를 자릅니다.
2. 부제 텍스트가 중앙에 정렬되지 않았습니다. 중앙에 정렬되어야 합니다.
3. 이미지를 보고 Figma 디자인을 확인하여 다른 문제가 무엇인지 파악해 주세요.

첫 프롬프트 초안

개선 전

  • 전체적인 미학은 shadcn 스타일에서 영감을 받아야 합니다.
  • 현재 디자인에는 몇 가지 문제가 있습니다.
    • 영웅 섹션 프레임: 오른쪽 버튼의 텍스트가 올바르게 정렬되지 않았습니다.
    • 기능 섹션 프레임: 그리드의 항목에 제목, 부제, 단락이 있어야 하지만 현재 단락이 누락되었습니다.
    • FAQ 섹션 프레임: 항목의 답변에 더 긴 텍스트가 필요합니다.
    • 푸터 섹션 프レ임: 링크 버튼이 지루해 보입니다.

개선 후

Figma 협업 디자인 작업

  • 전체적인 디자인 방향: 시각적 스타일은 shadcn에서 영감을 받아야 합니다 - 깔끔하고, 미니멀하며, 우아해야 합니다.
  • 섹션별 디자인 피드백 및 수정:
    • 영웅 섹션 프레임: 오른쪽 버튼 텍스트를 중앙에 정렬하고, 왼쪽 제목 텍스트를 세미볼드로 설정합니다.
    • 기능 섹션 프레임: 각 그리드 항목에 제목, 부제, 단락 텍스트를 포함하고, 그리드를 페이지 중앙에 수평으로 정렬합니다.
    • FAQ 섹션 프레임: 각 FAQ 답변을 더 길고 유익하게 만들고, 그리드를 중앙에 수평으로 정렬합니다.
    • 푸터 섹션 프레임: 링크 버튼을 더 창의적이거나 시각적으로 매력적인 스타일로 변경합니다.
  • 추가 개선: 기하학, 타이포그래피, 색상 선택을 개선하여 전반적인 향상을 적용합니다.

개선된 프롬프트

  • 색상 구성표: 기존 중립 색상을 shadcn의 계층화된 회색으로 교체하고, WCAG AA 표준을 충족하는지 확인합니다.
  • 타이포그래피: Inter 또는 Geist 글꼴로 마이그레이션하고, 일관된 크기 척도를 사용합니다.
  • 자동 레이아웃 및 간격: 자동 레이아웃 스택으로 구성 요소를 구조화하고, 4px 그리드에 맞춰 간격 토큰을 정렬합니다.
  • 구성 요소 기하학: 카드/모달에는 6px, 버튼/입력에는 4px의 테두리 반경을 적용합니다.
  • 모바일 재사용성: 구성 요소를 수평 및 수직으로 "콘텐츠 감싸기"로 설정하고, 모바일 중단점에 대한 변형을 만듭니다.

구현 체크리스트

  1. 기존 구성 요소의 일관성 없는 간격/색상을 감사합니다.
  2. 정적 값을 색상, 텍스트, 효과에 대한 Figma 스타일로 교체합니다.
  3. 자동 레이아웃을 사용하여 우선 순위 구성 요소(네비게이션 바, 양식)를 다시 빌드합니다.
  4. 모바일 너비(360px)로 프레임 크기를 조정하여 반응성을 테스트합니다.
MCP와 Figma를 이용한 디자인 리팩토링Shadcn 스타일로 리팩토링