Figma AI 'Make Design' 완벽 가이드: UX/UI 포트폴리오 프롬프트 깎는 법

썸네일

 
여러분, 오래 전에 Figma에서도 Ai 기능을 도입했던 사실...
 
이제 코딩을 하나도 모르는 웹 디자이너도, 포폴 레이아웃 자체가 막막했던 취준러도, 웹 포폴을 위한 레이아웃 구성을 고민 중인 현직 디자이너의 마음을 한 방에 사로잡을 기능이 나왔다는 거, 알고 계셨나요?
 
간단한 프롬프트를 공유합니다!

---

Figma Make?

사진 클릭하여 피그마 메이크 바로가기

Figma Make는 텍스트 프롬프트나 기존 이미지를 기반으로 편집 가능한 고해상도 디자인 레이아웃을 생성해 주는 AI 기능입니다.

• 핵심 가치: "First Draft"를 단 몇 초 만에 만들어 디자이너의 '백지 공포증'을 해소해 줍니다.
• 특이점: 단순 이미지가 아니라 피그마의 레이어 구조, 오토 레이아웃(Auto Layout)이 적용된 상태로 결과물을 주기 때문에 수정이 매우 용이합니다.

---

프롬프트 분석: 성공하는 문장 vs 실패하는 문장

많은 사용자가 "예쁜 포트폴리오 만들어줘" 같은 짧은 문장을 넣고 실망하곤 합니다. 피그마 커뮤니티의 성공적인 사례들을 분석해 보면 공통적인 프롬프트 공식이 존재하더라고요. 지니한테 소원을 빌 때 무작정 500억 줘! 해서 dirty money를 받는 게 아닌, 세금 신고 다 되었고, 법적으로 문제 없는 깨끗한 500억을 현금으로 줘. 같은 소원처럼, 피그마 메이크에도 명확한 지시 구분을 하는 프롬프트가 필요합니다
 

💡프롬프트에 꼭 넣으세요

1. Context(맥락): 사용자의 직무(PM, UX Designer 등)를 명시할 것!
2. Structure(구조): 어떤 섹션(Hero, Bento Grid, Case Study)이 필요한지 나열할 것!
3. Constraint(제약): "그라데이션 제거", "플랫 디자인", "12그리드 정렬" 등 스타일의 범위를 좁힐 것!
   1. 제약을 주지 않으면 주어진 그리드에서 마음대로 그리기 때문에, 정렬이 안 맞아서 스트레스받을 수 있어요

추가 꿀팁!
이미 만들어 놓은 포트폴리오가 있다면, 피그마 프레임 URL을 복붙하셔서, 아래의 맥락, 구조, 제약을 재명시하고 REDESIGN을 요청해 보세요

---

포트폴리오 레이아웃 잡기

STEP 1. 기본 구조 정의 (Layout Strategy)

일단, 무료 버전을 사용하시는 분들은 Figma Community에 있는 고수들의 작품을 먼저 분석하시길 바랍니다! 2026년 트렌드인 'Bento Grid' 스타일을 활용해 보세요. 정보를 사각형 박스 안에 논리적으로 배치하는 이 방식은 특히 지표와 성과를 강조해야 하는 PM 포트폴리오에 적격입니다.
 

STEP 2. 프롬프트 입력 (영문 권장)

그리고 아무래도 영어의 언어로 출발한 소프트웨어이다 보니, 한국어로 말하면 느낌적인 느낌을 모를 때가 있더라고요. 우리는 한정된 프롬프트를 입력할 수 있으니, 번역기나 제미나이를 사용해서 '정돈된' 영어 프롬프트를 사용할 예정입니다,,,,
 
저는 레이아웃 정렬과, 직관성을 새로운 포트폴리오의 콘셉트로 잡고 프롬트를 시도해 봤는데, 아래 두 개가 가장 마음에 들게 나왔습니다.
 
메인 페이지

"Create a 3-page web portfolio for a Product Manager. Page 1: Landing with a bento grid for key metrics. Page 2: Project Index with clean card layouts. Page 3: Detailed Case Study. Constraints: Use a flat design style, no gradients, and ensure perfect pixel alignment on a 12-column grid. Focus on visual hierarchy and intuitive UX."

 
 

상세 페이지

Design a project case study page with a storytelling scroll layout. Start with a full-width immersive header. Include specific sections for 'User Pain Points', 'Hypothesis Testing', and 'Final UX Impact'. Use #3A34BB to highlight data visualizations (charts, flowcharts). Ensure the typography is highly readable with a clear hierarchy. Add a 'Lessons Learned' section at the bottom in a separate bento box style

 
 
STEP 3. 레이아웃 정교화 (Fine-tuning)

AI가 결과물을 내놓으면, 피그마의 'Actions' 메뉴를 통해 레이어 이름을 일괄 변경하거나 오토 레이아웃 간격을 조정하세요. 만약 정렬이 어긋난다면 "Align all elements to the grid and unify padding"이라고 추가 명령을 내리면 됩니다.

✅ 그라데이션보다는 '면'과 '선'을 활용하세요
✅ 기존 작업물과의 연결 (리디자인 요청)
✅ micro-interaction이라는 단어를 추가하여, CTA나 인터랙션을 미리 맛보기로 체험해 보세요

---

 
저도 무료 버전을 사용하다 보니까 프롬프트를 3번 정도 입력하니 제약이 생기더군요... 초창기 때에 실습했을 때는 뭔가 무제한적으로 수정이 가능했던 것 같은데... 🤔
 
이번 포스팅을 위해 이것저것 수정하느라 '웹 포폴 수정'과는 조금 다르게 해 봤는데 매일 프롬프트 2-3개씩 수정하며 더 완성된 프롬프트를 가져와 보도록 하겠습니다! (완성된 레이아웃도 같이요 ㅎ)