디자인 라이브러리 연결하기
디자인 라이브러리를 알려주면 생성되는 모든 내비게이션 바가 실제 컴포넌트, 아이콘, 여백 토큰을 사용해요 — 일반적인 플레이스홀더가 아니에요.
캔버스에서 바로 만드는 AI 내비게이션 바 생성기
AI로 내비게이션 바, 메뉴, 내비게이션 컴포넌트를 만들어요 — 실제 디자인 시스템을 사용해 Figma Design 안에서 바로요. 필요한 걸 설명하면 몇 초 안에 완성된 걸 확인할 수 있고, 바로 다듬을 준비가 돼요.
더 높은 완성도로 내비게이션 옵션을 탐색해요
에이전트가 디자인 라이브러리를 사용해 캔버스에 실제 내비게이션 바 컴포넌트를 만드니, 어떤 옵션이든 처음부터 프로덕션에 바로 쓸 수 있어요.
디자인 시스템으로 내비게이션 바를 생성해요
Figma 에이전트는 실제 컴포넌트, 토큰, 변수를 사용해 내비게이션 바를 만들어요 — 나중에 다시 만들어야 하는 플레이스홀더 UI가 아니에요. 생성된 모든 내비게이션 바는 첫 프롬프트부터 디자인 시스템과 딱 맞아요.
번거로운 작업은 줄이고, 흐름은 유지해요
아이콘을 정렬하고, 링크 간격을 맞추고, 드롭다운을 일일이 설정하는 지루한 작업은 넘어가요. 필요한 내비게이션 구조를 설명하면 에이전트가 만들어주니, 더 중요한 결정에 집중할 수 있어요.
팀을 하나로, 루프를 완성해요
생성된 내비게이션 바는 공유 파일에 그대로 남아서, 개발자와 스테이크홀더가 같은 걸 봐요. 내보내기 과정에서 아무것도 손실되지 않아요 — 모두가 같은 소스에서 작업해요.
생성 뒤에 있는 기능들
디자인 팀이 실제로 작업하는 방식에 맞춰 Figma 에이전트가 차별화되는 점을 자세히 살펴보세요.
병렬 프롬프팅
고정 헤더, 햄버거 메뉴, 메가 내비게이션을 한 번에 탐색해요. 여러 프롬프트를 동시에 실행해서 기다림 없이 방향을 비교할 수 있어요.
공유 가능한 스레드
스레드를 공유하면 팀원 모두가 전체 프롬프트, 맥락, 반복 히스토리를 볼 수 있어요. 따로 핸드오프할 필요 없이 내비게이션 바가 어떻게 만들어졌는지 모두 이해해요.
스킬
내비게이션 바 워크플로를 재사용 가능한 스킬로 만들어요. 헤더, 푸터, 모바일 메뉴용 프롬프트를 팀 전체가 실행할 수 있는 명령어로 묶어두세요.
Figma는 제 손의 자연스러운 확장처럼 느껴져요. 캔버스에서 디자인 아이디어를 구상하면, 이제는 에이전트가 마지막 단계까지 완성해줘요. 디자인 라이브러리를 연결해두면 디자인에서 코드까지 이전보다 훨씬 빠르게 이동할 수 있어요.
Andy Madrick
Notion Product Designer
Figma 에이전트로 시작해보세요
에이전트 열기
왼쪽 사이드 레일에서 에이전트를 선택하거나 CMD + Enter를 눌러요. 작업할 프레임을 추가하거나, 내비게이션이 필요한 기존 레이아웃을 선택해요.
내비게이션 바 설명하기
필요한 걸 알려주세요 — 로고와 링크가 있는 고정 헤더, 모바일 햄버거 메뉴, 드롭다운이 있는 메가 내비게이션 등이요. 정확한 컴포넌트를 위해 디자인 라이브러리를 연결해요.
캔버스에서 확인하기
생성된 내비게이션 바를 캔버스에서 확인해요. 같은 스레드에서 다듬거나, 다른 내비게이션 패턴을 탐색하려면 병렬 스레드를 시작해요.
계속 다듬어가기
여백을 조정하거나, 아이콘을 추가하거나, 반응형 변형을 시도하려면 다시 프롬프트를 입력해요. 모든 게 계속 편집 가능한 상태로 남아서 언제든 직접 다듬을 수 있어요.
에이전트 전문가가 되어보세요
FAQ
AI 내비게이션 바 생성기는 처음부터 직접 만들지 않고 필요한 걸 설명하는 것만으로 내비게이션 바, 메뉴, 헤더 컴포넌트를 만들 수 있게 도와줘요. Figma 에이전트를 사용하면 기존 컴포넌트와 스타일을 그대로 활용해서 디자인 캔버스에 바로 내비게이션 바가 생성돼요. 결과물은 완전히 편집 가능하고 바로 반복 작업을 시작할 수 있어요.
Figma Design에서 왼쪽 사이드 레일의 에이전트를 열거나 CMD + Enter를 눌러요. 원하는 내비게이션 바를 설명해요 — 예를 들어 로고와 가로형 링크, CTA 버튼이 있는 헤더처럼요. 에이전트가 디자인 라이브러리를 사용해 캔버스에 생성해줘요. 원하는 결과가 나올 때까지 추가 프롬프트로 다듬어요.
Figma 에이전트는 데스크톱, 태블릿, 모바일 브레이크포인트에 맞는 다양한 내비게이션 바 변형을 생성할 수 있어요. 필요한 반응형 동작을 설명하면 — 예를 들어 모바일에서 햄버거 메뉴로 접히도록요 — 에이전트가 각 변형을 만들어줘요. 여러 반응형 방식을 한 번에 탐색하려면 병렬 프롬프트를 실행할 수 있어요.
에이전트가 생성하는 모든 내비게이션 바는 완전히 편집 가능한 레이어와 컴포넌트로 캔버스에 들어와요. 같은 스레드에서 다시 프롬프트를 입력하거나, 직접 속성을 조정하거나, 라이브러리의 컴포넌트로 교체할 수 있어요. 아무것도 평면화되거나 잠기지 않아요.
Figma 에이전트는 모든 Figma 유료 플랜에서 이용할 수 있어요. Figma Design의 왼쪽 사이드 레일에서 찾을 수 있어요. 현재 진행 중인 오픈 베타 기간에는 AI 크레딧을 소모하지 않으니, 지금이 바로 살펴보고 실험해보고 피드백을 공유하기 좋은 시점이에요.
Figma 에이전트로 더 빠르게 만들어요