Figma Weave 딥다이브 (Config 2026) · Part 1. 빈 캔버스에서 작은 영상까지
노드를 연결해 프롬프트→이미지→영상을 만들고, 변수·Iterator로 여러 장면을 한 번에 만듭니다.
Config 2026 라이브 데모의 1막입니다. 빈 캔버스에서 노드를 연결해 이미지를 만들고, 모델을 비교하고, 편집·합성을 거쳐 작은 영상 한 편까지 만듭니다. 영상을 다시 열지 않아도 화면 흐름이 읽히도록 구간 캡처를 본문에 펼쳐 두었습니다.
한 줄 요약
노드를 연결해 프롬프트 → 이미지 → 영상을 만들고, 프롬프트 변수와 Iterator로 여러 장면을 한 번에 만듭니다.
들어가며
이 파트에서 익히는 것: 노드 연결의 기본기(프롬프트 → 이미지 모델), 여러 모델 동시 비교, 이미지 편집과 Compare, 프롬프트 변수와 Text Iterator로 여러 장면 만들기, 이미지를 영상으로 바꾸기, 수동 그래픽 제어, Compositor와 타임라인 합성. 각 섹션은 영상 구간 링크와 함께 보면 됩니다.
복제해 볼 공식 노드 샘플 (Figma Community)
데모에서 만든 머신 자체는 공개되지 않았지만, Weave 워크플로우는 Figma Community에 공식 샘플로 공개돼 있습니다. 열어서 구조를 보고 ‘Open in Weave’ → ‘Duplicate to your files’로 내 파일에 복제해 바꿔 쓸 수 있습니다. 이 수업과 바로 이어지는 샘플:
- Weave Welcome (by Figma Weave) — 처음 익히는 입문 워크플로우.
- Variables Workflow — 프롬프트 변수(섹션 05) 패턴.
- Video Compositor (by Figma Weave) — Compositor·타임라인(섹션 09·10) 패턴.
- Image to 3D (by Figma Weave) — 이미지 → 3D 메시.
- Moodboard · Combining 2 Styles (by Figma Weave) · Character Consistency — 응용 워크플로우.
커뮤니티 갤러리 둘러보기:
- Weave 워크플로우 모음 — 노드 워크플로우 파일(위 샘플들이 모인 곳).
- 발행된 Weave 도구 — Figma 캔버스에서 바로 실행하는 도구 모음(Part 3와 이어짐).
01. 들어가며 — 노드 기반 AI 창작이란
이 구간: 한 장씩 프롬프트하고 다시 고치는 방식의 한계와, 노드로 워크플로우를 짜는 방식의 차이를 잡습니다.
발표자는 AI 창작이 늘 같은 순환이었다고 말합니다. 프롬프트하고, 고치고, 다시 반복하고, 도구와 모델 사이를 오가고, 새 프로젝트마다 처음부터 다시 시작합니다. Weave는 노드 기반 환경에서 모든 것을 서로 연결합니다. 결과물 하나가 아니라 워크플로우를 만들고, 모델을 조합하고, 반복되는 과정을 재사용 가능한 시스템으로 묶어 자동화합니다.
오늘 데모는 세 단계입니다. (1) 빈 캔버스에서 기본 블록으로 작은 영상 만들기 — 이 Part 1, (2) 매달 반복할 수 있는 브랜드 자산 머신 만들기 — Part 2, (3) 그 머신을 Figma 캔버스에서 실행하는 Weave 도구로 발행하기 — Part 3.
02. 첫 빌딩블록 — Prompt 노드를 Image 모델에 연결
실습 워크플로우 · Node Examples (기본 노드) — Prompt·Image·Video 등 핵심 노드의 입출력·연결을 복제해 직접 만져 보는 기본 예제.
새 파일을 열면 빈 무한 캔버스가 나옵니다. 캔버스를 우클릭해 노드를 검색하거나, 왼쪽 레일에서 노드를 끌어다 놓습니다. 먼저 텍스트 노드를 만들어 프롬프트를 적습니다.
- Prompt 노드 — 텍스트 입력 노드. 단독으로는 동작하지 않고 다른 노드에 연결해야 합니다.
이 프롬프트를 이미지 모델에 연결합니다. 왼쪽 레일의 이미지 모델 섹션에서 모델 하나(데모에서는 Flux 계열)를 캔버스로 끌어옵니다.
- Image 생성 노드 — 프롬프트(또는 이미지)를 입력받아 이미지를 생성하는 노드. 모델별 특성은 공식 비교표 참고.
프롬프트의 출력 포트를 이미지 모델의 입력 포트로 연결하고 실행하면 첫 워크플로우가 완성됩니다.
기능 메모: 연결은 호환되는 포트끼리만 됩니다. 포트 색으로 타입을 구분합니다 — 이미지 녹색, 텍스트 보라, 영상 빨강, 배열·3D 파랑, 마스크 라임. 포트 타입(Datatypes) 문서.
03. 여러 모델 동시 비교 — 취향으로 고르기
이 구간: 같은 프롬프트를 여러 이미지 모델에 동시에 물려 결과를 비교합니다.
Weave 안에는 사용 가능한 이미지 모델이 모여 있습니다. 같은 프롬프트 노드 하나에 모델 두세 개를 연결하고 함께 실행하면, 같은 맥락에서 모델마다 결과가 어떻게 다른지 한눈에 보입니다.
크리에이터로서 할 일은 그중 취향에 맞는 결과 하나를 고르는 것입니다. 데모에서는 이 결과를 다음 단계의 입력으로 가져갑니다.
기능 메모: 모델은 자주 추가·교체됩니다. 특정 모델명을 외우기보다 “이미지 모델 섹션에서 후보를 여러 개 물려 비교한다”는 흐름을 기억하세요.
04. 이미지 편집 + Compare 노드
이 구간: 고른 이미지의 빛을 바꾸고, 원본과 결과를 슬라이더로 비교합니다.
선택한 이미지를 편집형 이미지 모델에 연결해 조명을 손봅니다. 왼쪽의 저장(Saved) 섹션에는 프롬프트·모델·워크플로우 일부를 저장해 두고 재사용할 수 있습니다. 데모에서는 미리 저장해 둔 image-to-image 프롬프트를 가져와 연결합니다.
프롬프트는 “조명을 부드러운 구름 필터의 골든아워로 바꿔라”입니다. 원본과 비교하기 위해 Compare 노드를 두고, 첫 이미지와 결과 이미지를 각각 입력으로 연결합니다.
- Compare 노드 — 두 결과를 슬라이더 또는 토글로 겹쳐 보며 고르는 비교 도구.
- 저장(Saved) 섹션 — 프롬프트·모델·워크플로우 조각을 저장해 다른 작업에서 재사용.
05. 레퍼런스로 새 장면 + 프롬프트 변수
이 구간: 한 이미지를 “레퍼런스”로만 써서 인물은 유지한 채 새 장면을 만들고, 바꿀 부분만 변수로 빼냅니다.
새 이미지 모델에 앞 결과를 레퍼런스 입력으로 연결합니다. 프롬프트는 “레퍼런스 이미지는 인물의 정체성 보존에만 쓰고, 같은 알래스카 하이크의 다른 위치에서 완전히 새로운 샷을 만들라”입니다.
프롬프트 전체를 매번 고치면 번거롭습니다. 바꿀 부분만 변수로 빼냅니다. 프롬프트 안에서 @를 입력해 변수(예: 새 샷 설명)를 만들면, 그 자리에 입력 포트가 생깁니다. 나머지는 고정되고 변수만 바뀝니다.
- 프롬프트 변수(Prompt Variables) — 프롬프트의 일부를 외부 입력으로 빼내, 그 부분만 다른 노드에서 바꿔 넣는 기능.
06. Text Iterator — 여러 장면을 한 번에
실습 워크플로우 · Iterator Workflows (기본) — 리스트를 한 번에 돌리는 Iterator 패턴을 복제해 보는 예제.
이 구간: 장면을 하나가 아니라 여러 개 동시에 만듭니다.
장면을 여러 개 만들려면 변수의 입력으로 Text Iterator를 연결합니다. Iterator에 항목(예: 원거리 롱샷, 알파인 초원의 사슴, 물웅덩이를 밟는 부츠 클로즈업…)을 넣으면, 그 뒤의 모든 노드가 항목 수만큼 동시에 실행됩니다.
항목이 4개면 “4 values”로 네 번 동시에 돕니다. 스케일을 키울 때 핵심이 되는 도구입니다.
- Text Iterator — 여러 항목을 받아 뒤따르는 워크플로우를 항목 수만큼 동시에 실행하는 노드.
07. 이미지 → 영상 + 실행 횟수
이 구간: 정지 이미지를 첫 프레임으로 삼아 영상을 만들고, 한 번에 여러 번 돌립니다.
검색에서 “입력 이미지 → 출력 영상”으로 필터하면 이미지-투-비디오에 맞는 모델만 보입니다.
원하는 영상 모델을 골라 이미지를 연결하면 그 이미지가 첫 프레임이 됩니다. 저장해 둔 image-to-video 프롬프트를 붙이고, 실행 횟수와 속성(예: 6초·720)을 정한 뒤 실행합니다.
- Video 생성 노드 — 이미지·텍스트를 입력받아 영상을 생성하는 노드. 모델별 특성은 공식 비교표 참고.
기능 메모: 노드를 실행할 때 실행 횟수를 지정해 한 번에 여러 결과를 받을 수 있습니다. 영상 생성은 크레딧을 많이 쓰므로 횟수와 속성을 먼저 확인하세요.
08. 수동 그래픽 제어 노드
이 구간: AI가 만든 결과에 사람이 직접 손대는, 생성형이 아닌 그래픽 제어 노드들입니다.
AI 결과를 그대로 두지 않고 직접 다듬습니다. Color Correction 노드를 연결해 노출·색온도를 조절하고, Levels 노드로 특정 색(예: 과한 빨강)을 줄이고, Crop으로 비율을 바꿉니다(예: 16:9).
- Color Correction · Levels · Crop — 노출·색·비율을 수동으로 조절하는 비생성형 편집 노드. 크레딧을 쓰지 않습니다.
기능 메모: 생성형 노드(Run·크레딧 소모)와 달리, 이런 편집 노드는 AI를 거치지 않으므로 크레딧이 들지 않습니다.
09. Compositor — 이미지 위에 텍스트
실습 워크플로우 · Compositor Example (기본) — 여러 레이어를 합치는 Compositor 노드를 복제해 보는 예제.
이 구간: 이미지와 텍스트를 한 노드에서 합치고, Figma처럼 타이포그래피를 다룹니다.
텍스트 프롬프트 노드(“Alaska”)를 만들고, 이미지와 함께 Compositor 노드에 넣습니다. Compositor는 이미지·텍스트·영상·오디오 등 서로 다른 타입의 레이어를 동시에 받습니다.
Compositor를 열면 새 캔버스가 나오고, Figma에서 하던 방식 그대로 타이포그래피를 다룹니다.
- Compositor 노드 — 이미지·텍스트·영상·오디오 레이어를 한 캔버스에서 합치는 편집 노드.
기능 메모: 앞 단계의 값을 바꾸면(예: 노출) 워크플로우 전체에 흐르듯 반영됩니다. 한 곳을 고치면 연결된 결과가 함께 갱신됩니다.
10. 영상에 적용 + 타임라인 합성
이 구간: 이미지에 적용한 보정·합성을 그대로 영상에 옮기고, 타임라인으로 클립을 편집합니다.
이미지에 색보정과 텍스트 합성을 다 해 둔 상태에서, 입력만 이미지에서 영상으로 바꿔 끼웁니다. 그러면 색보정부터 Compositor까지 적용한 모든 것이 영상에 그대로 적용됩니다.
Compositor에 영상을 넣으면 시간 축이 생겨 타임라인이 열립니다. 레이어를 쌓고 길이를 조절하고 트림하며 편집합니다.
기능 메모: 보정·합성 설정은 노드에 저장되므로, 입력만 갈아 끼우면 같은 처리를 다른 소재에 재사용할 수 있습니다.
공식 튜토리얼 위치 (Part 1)
| 이 파트 섹션 | 공식 문서 |
|---|---|
| 02 노드 입출력·실행 | Understanding nodes |
| 02 포트 타입·연결 규칙 | Datatypes |
| 02 · 03 이미지 모델 | Image models comparison |
| 07 영상 모델 | Video models comparison |
| 06 Iterator | Iterators |
| 04 · 08 · 09 · 10 Compare · Color Correction · Levels · Crop · Compositor | Editing tools |
따라해보기 / 워크북 (Part 1)
- Prompt 노드 1개를 이미지 모델 2개에 연결해 같은 프롬프트의 결과를 비교했다 (02·03)
- image-to-image로 조명을 바꾸고 Compare 노드로 원본과 비교했다 (04)
- 프롬프트에서
@로 변수를 만들고 Text Iterator로 3개 이상 장면을 한 번에 생성했다 (05·06) - 이미지를 첫 프레임으로 영상을 만들고 Compositor 타임라인에서 텍스트를 얹었다 (07·09·10)
출처
- 원본 영상: Figma deep dive: Weave | Config 2026 (Figma, Weave team — Gal · Ron). 본문 캡처는 이 영상의 풀스크린 UI 구간 프레임이며, 발표자 캠 오버레이는 크롭으로 제외했습니다.
- 공식 Knowledge Center: help.weavy.ai
- 제품: Figma Weave · 커뮤니티: Figma Weave Discord
모듈 허브 · 이전: figma-weave-from-scratch · 다음: Part 2. 반복 가능한 브랜드 자산 머신