Figma로 가져오기: Buddy는 이미지, HTML, Claude 디자인, Claude 프로토타입 및 웹사이트를 레이어로 변환합니다.1 min read

디자인 작업은 더 이상 한 곳에서 시작되지 않습니다.

때때로 첫 번째 아이디어는 Claude Design 프로토타입입니다. 때로는 Claude 아티팩트입니다. 때로는 HTML 실험, 스크린샷, 좋아하는 랜딩 페이지 또는 팀이 배우고 싶은 라이브 웹사이트일 수도 있습니다.

문제는 AI나 웹을 통해 흥미로운 것을 만들 수 없다는 것입니다. 문제는 그 아이디어를 제품 디자인이 실제로 일어나는 곳인 Figma로 다시 가져오는 것입니다.

Buddy를 사용하면 거의 모든 것을 Figma로 가져와 캔버스에서 편집 가능한 디자인 레이어로 바꿀 수 있습니다. 평평한 스크린샷이 아닙니다. 정적 참조 이미지가 아닙니다. 실제 레이어를 편집하고, 구성하고, 다듬고, 전달할 수 있습니다.

Buddy를 사용하여 무엇이든 Figma로 가져온 다음 Figma에서 계속 디자인하세요.

Buddy는 Anima의 Figma AI 디자인 에이전트입니다. Figma 내부에 있으며 캔버스를 읽고 채팅을 통해 디자인을 생성, 편집 및 구성하는 데 도움이 됩니다.

이제 Buddy는 외부 영감과 Figma 워크플로우 사이의 가교 역할도 합니다. 아티팩트, 이미지, 스크린샷, HTML 또는 URL를 붙여넣으면 Buddy가 이를 편집 가능한 Figma 레이어로 변환하므로 모든 프레임을 수동으로 다시 구성하지 않고도 디자인 프로세스를 계속할 수 있습니다.

즉, 다음에서 시작할 수 있습니다.

• Claude Design 아티팩트, AI 생성 인터페이스를 Figma로 가져오려는 경우.
• Claude 아티팩트, Claude에서 프로토타입, 화면 또는 인터랙티브 아이디어가 생성되었을 때.
• HTML 아티팩트, 생성된 HTML 또는 코딩된 모형에서 설계가 시작될 때.
• 이미지 및 스크린샷, 시각적 참조를 붙여넣고 편집 가능한 Figma 레이어를 얻으려는 경우.
• 웹사이트 URLs, 공개 웹사이트를 디자인으로 Figma에 복제하려는 경우 검사하고 리믹스할 수 있습니다.

작업 흐름은 간단합니다. 소스를 Buddy로 가져오고 Anima가 시각적 구조를 해석하도록 한 다음 Figma 캔버스에서 직접 디자인을 계속합니다.

이것이 중요한 이유: AI는 첫 번째 초안을 제공하고, Figma는 제어권을 제공합니다.

AI 도구는 첫 번째 초안을 생성하는 데 매우 능숙합니다. 앱 컨셉, 랜딩 페이지, 대시보드, 온보딩 흐름, 가격 책정 페이지, 내부 도구 및 제품 실험을 몇 분 안에 만들 수 있습니다.

그러나 전문적인 디자인 작업은 첫 번째 초안에서 끝나지 않습니다. 보통 거기에서 시작됩니다.

팀은 여전히 ​​사본을 편집하고, 계층 구조를 수정하고, 브랜드를 적용하고, 간격을 정렬하고, 구성 요소를 사용하고, 극단적인 경우를 검토하고, 다른 디자이너, PM 및 엔지니어가 실제로 작업할 수 있는 파일을 준비해야 합니다.

그렇기 때문에 수입이 중요합니다. AI에서 생성된 아이디어가 채팅 창, 아티팩트 뷰어, 스크린샷 또는 브라우저 탭 내에 잠겨 있으면 실제 제품 디자인 워크플로로 전환하기가 어렵습니다.

Buddy는 해당 작업을 편집 가능한 레이어로 Figma에 다시 가져오므로 AI 출력은 팀이 구성할 수 있는 결과물이 됩니다.

Claude Design 아티팩트를 Figma로 가져오기

Claude Design는 UI 아이디어와 대화형 개념을 빠르게 탐색하는 데 적합합니다. 제품, 기능 또는 랜딩 페이지를 설명하고 세련된 결과물을 빠르게 얻을 수 있습니다.

그러나 다음 단계가 디자인 검토, 브랜드 개선 또는 전달인 경우 일반적으로 팀에는 Figma의 결과가 필요합니다.

Buddy를 사용하면 Claude Design 아티팩트를 Figma로 가져와 거기서부터 계속할 수 있습니다. Buddy는 인터페이스를 편집 가능한 레이어로 다시 생성하므로 캔버스에서 레이아웃, 타이포그래피, 색상, 간격, 아이콘 및 콘텐츠를 조정할 수 있습니다.

이는 창립자, PM, 마케팅 담당자 또는 엔지니어가 AI 프로토타입을 먼저 만든 다음 디자이너가 이를 생산 품질로 만들기를 원하는 경우에 유용합니다.

Claude 아티팩트 및 AI 프로토타입 가져오기

Claude 아티팩트는 단일 화면 이상을 포함할 수 있습니다. 여기에는 상태, 패널, 메뉴, 양식, 테이블, 카드, 빈 상태 및 전체 UI 개념이 포함될 수 있습니다.

수동으로 스크린샷을 찍고 디자인을 추적하는 대신 아티팩트를 Buddy에 붙여넣으세요. Anima는 팀이 편집할 수 있는 구조화된 Figma 디자인으로 변환합니다.

캔버스에 있으면 다음을 수행할 수 있습니다.

• 화면을 프레임으로 분리합니다.
• 텍스트 및 제품 카피를 편집합니다.
• 간격과 계층 구조를 조정하세요.
• 일반적인 시각적 요소를 브랜드 자산으로 대체하세요.
• 디자인 시스템을 적용하세요.
• 검토 또는 엔지니어링 전달을 위해 설계를 준비합니다.

AI 프로토타입은 막다른 골목이 아닌 출발점이 됩니다.

HTML 아티팩트를 Figma로 가져오기

이제 많은 AI 도구가 설계 출력으로 HTML를 생성합니다. 이는 빠른 미리보기에 유용할 수 있지만 HTML가 항상 제품 디자인을 평가하는 데 가장 적합한 장소는 아닙니다.

디자이너에게는 캔버스 제어가 필요합니다. 레이어를 이동하고, 옵션을 비교하고, 계층 구조를 검사하고, 디자인 시스템에 맞춰 작업을 조정해야 합니다.

Buddy는 HTML 아티팩트를 Figma로 다시 가져오는 데 도움이 됩니다. HTML 출력을 소스로 사용한 다음 이를 정리, 재구성 및 다듬을 수 있는 편집 가능한 Figma 레이어로 변환할 수 있습니다.

이는 먼저 코드로 프로토타입을 만든 다음 협업을 위해 적절한 디자인 파일이 필요한 팀에게 특히 유용합니다.

이미지나 스크린샷을 붙여넣고 편집 가능한 Figma 레이어를 받으세요.

스크린샷은 제품 작업의 모든 곳에 있습니다.

사용자는 자신이 좋아하는 흐름의 스크린샷을 보냅니다. 팀원이 경쟁업체 페이지를 공유합니다. PM이 Slack에 대략적인 UI 아이디어를 추가합니다. 창업자는 다른 AI 도구를 사용하여 랜딩 페이지를 스케치합니다.

일반적으로 해당 스크린샷은 단지 참고용일 뿐입니다. Figma에 배치할 수 있지만 편집하려면 UI를 수동으로 다시 빌드해야 합니다.

Buddy를 사용하면 이미지나 스크린샷을 붙여넣고 편집 가능한 Figma 레이어로 변환할 수 있습니다. 텍스트, 레이아웃, 시각적 구조 및 UI 요소는 캔버스에서 작업할 수 있는 요소가 됩니다.

그러면 프로세스에서 가장 성가신 부분이 절약됩니다. 즉, 변경할 수 있도록 이미 존재하는 것을 다시 만드는 것입니다.

URL를 붙여넣어 웹사이트를 복제하세요.

웹사이트 영감은 신제품 및 마케팅 작업의 가장 일반적인 출발점 중 하나입니다.

어쩌면 SaaS 홈페이지의 구조가 마음에 들 수도 있습니다. 가격 책정 페이지를 연구하고 싶을 수도 있습니다. 대시보드 레이아웃, 온보딩 흐름 또는 랜딩 페이지 섹션을 캡처해야 할 수도 있습니다.

Buddy를 사용하면 웹사이트 URL를 붙여넣고 페이지를 편집 가능한 디자인으로 Figma로 가져올 수 있습니다. 스크린샷을 저장하는 대신 Buddy를 사용하면 시각적 구조를 캔버스의 레이어로 다시 만들 수 있습니다.

이를 사용하여 패턴에서 배우고, 대안을 탐색하고, 무드보드를 구축하거나, 새 페이지의 첫 번째 버전 속도를 높이세요. 그런 다음 카피, 구성 요소, 브랜드 및 제품 스토리를 사용하여 귀하의 것으로 만드십시오.

Figma 캔버스에서 얻는 것

주요 차이점은 편집 가능성입니다.

Buddy는 단순히 캔버스에 비트맵을 배치하는 것이 아닙니다. 목표는 편집, 검토 및 개선이 가능한 실행 가능한 Figma 설계를 제공하는 것입니다.

가져온 후에는 일반적인 Figma 작업을 계속할 수 있습니다.

• 텍스트를 직접 편집하세요.
• 레이어를 이동하고 크기를 조정합니다.
• 색상, 글꼴, 간격 및 계층 구조를 조정합니다.
• 프레임과 섹션을 구성합니다.
• 필요한 경우 Auto Layout를 적용하십시오.
• 거친 요소를 실제 구성요소로 교체합니다.
• 결과를 디자인 시스템에 맞춰 조정하세요.

이것이 Buddy의 핵심입니다. 제어력을 잃지 않는 속도입니다.

AI 생성 설계를 위한 더 나은 작업 흐름

이전 작업 흐름은 다음과 같았습니다.

1. AI 도구에서 아이디어를 생성하세요.
2. 스크린샷을 찍으세요.
3. 스크린샷을 Figma에 붙여넣으세요.
4. 디자인을 처음부터 수동으로 재구성합니다.
5. 실제 디자인 작업을 시작합니다.

Buddy 작업 흐름은 더 짧습니다.

1. 소스(아티팩트, HTML, 이미지, 스크린샷 또는 URL)를 생성하거나 찾습니다.
2. Buddy에 붙여넣으세요.
3. 편집 가능한 Figma 레이어를 가져옵니다.
4. 캔버스에서 계속 디자인하세요.

더 많은 팀이 AI 및 웹 영감에서 시작하지만 여전히 전문적인 디자인 워크플로우가 필요하기 때문에 이는 중요합니다. Buddy는 이러한 세계를 연결합니다.

이것은 누구를 위한 것인가요?

Buddy로 무엇이든 가져오기는 Figma 워크플로를 잃지 않고 빠르게 이동해야 하는 모든 사람에게 유용합니다.

• 디자이너 AI 출력과 스크린샷을 편집 가능한 시작점으로 바꿀 수 있습니다.
• PM 보다 명확한 제품 토론을 위해 Claude 아티팩트 또는 웹 사이트 참조를 Figma로 가져올 수 있습니다.
• 창립자 모든 것을 수동으로 재구성하지 않고도 아이디어에서 디자인 파일로 이동할 수 있습니다.
• 마케팅 담당자 랜딩 페이지 영감을 복제하여 브랜드에 맞게 조정할 수 있습니다.
• 엔지니어 HTML 또는 AI 도구로 프로토타입을 제작한 다음 결과를 다시 설계에 전달할 수 있습니다.

디자인을 바꾸는 것이 아닙니다. 아이디어와 편집 가능한 캔버스 사이의 지루한 재구성 작업을 제거하는 것입니다.

다음 아이디어를 Buddy로 가져와 보세요.

다음으로 훌륭한 제품 화면은 Claude Design, Claude 아티팩트, 생성된 HTML 프로토타입, 스크린샷 또는 웹사이트 URL에서 시작될 수 있습니다.

Buddy를 사용하면 해당 시작점이 기존 워크플로우에서 편집 가능한 Figma 디자인이 될 수 있습니다.

Buddy에 붙여넣고 캔버스에 레이어를 가져온 다음 계속 디자인하세요.