Figma Weave 입문

캔버스 빈 곳에서 우클릭해 Prompt 노드를 만듭니다.

노드 안에 문장을 씁니다.

발표에서는 "rear view of a mixed group of 3 hikers running downhill in Alaska, cinematic, 35mm grain."을 썼습니다.

왼쪽 레일에서 Image Models 목록을 열고 원하는 모델(발표에서는 Flux 2 Pro)을 캔버스로 끌어다 놓습니다.

Prompt 노드의 출력 포트에서 이미지 모델 노드의 입력 포트로 드래그해 연결합니다.

Run Model을 누르고, 결과 이미지가 이미지 모델 노드 안에 채워지면 첫 워크플로우가 완성된 것입니다.

파일 이름을 지어 저장합니다.

발표에서는 이 시점에 파일 이름을 "demo with config"로 정했습니다 — 나중에 다시 찾을 수 있게 초반에 이름부터 붙이는 습관입니다.

왼쪽 레일 검색에서 추가할 모델(발표에서는 Nano Banana 2, Recraft 4)을 찾아 캔버스로 끌어다 놓습니다.

새로 놓은 이미지 모델 노드들을 전부 선택합니다.

기존 Prompt 노드의 출력 포트를 선택된 노드들의 입력 포트로 한 번에 연결합니다.

각 모델의 Run Model을 눌러 세 결과를 나란히 확인합니다.

같은 맥락에서도 모델마다 결과가 다르게 나온다는 걸 눈으로 비교합니다.

발표에서는 Flux 2 Pro·Nano Banana 2 두 결과를 놓고 "다르게 그려진다"는 점을 짚었습니다.

마음에 드는 결과 하나(발표에서는 Nano Banana 2)를 골라 다음 노드에 연결합니다.

나머지 두 노드는 그대로 캔버스에 남겨 뒤에 다시 비교할 수 있게 둬도 됩니다.

마음에 든 결과 이미지를 골라 이미지 편집 모델(발표에서는 Nano Banana Raw) 노드에 이미지로 연결합니다.

왼쪽 레일의 Saved 섹션을 엽니다.

여기에는 프롬프트·모델·워크플로우 조각을 저장해 둘 수 있습니다.

Saved 패널에서 미리 준비해 둔 "image to image" 프롬프트를 캔버스로 꺼내 편집 모델의 Prompt 입력에 연결합니다.

실제 문구는 "Change the lighting to soft cloud-filtered golden-hour lighting."입니다.

Run Model을 눌러 조명만 바뀐 새 이미지를 받습니다.

Compare 노드를 캔버스에 놓고, Input 1에는 원본을, Input 2에는 방금 만든 결과를 연결합니다.

Compare 노드의 Mode를 Slider나 Toggle로 바꿔 가며 두 이미지를 겹쳐 봅니다.

새 이미지 모델 노드(발표에서는 Nano Banana Pro)를 놓고, 앞서 고른 이미지를 이미지 입력으로 연결합니다.

Prompt 노드에 "Use the reference image only to preserve the subject's identity. Create a completely new shot from a different location along the Alaska hike. New Shot:" 처럼 고정할 지시문을 씁니다.

인물 정체성은 참조 이미지가, 장소·구도 조건은 이 문장이 맡습니다.

바꾸고 싶은 자리(장면 묘사)에서 `@`를 누르면, 그 자리가 입력을 받는 변수로 바뀝니다.

변수 자리에 원하는 값(발표에서는 "Low angle, Fish eye lens, Side view of the group")을 채웁니다.

Prompt 노드 아래 Add variable로 변수가 잘 생겼는지 확인하고, 이미지 모델을 실행합니다.

값만 바꿔 다시 실행해 봅니다.

참조 이미지·고정 문장은 그대로인데 장면만 새로 나오면 변수가 제대로 만들어진 것입니다.

Text Iterator 노드를 캔버스에 놓습니다.

앞 카드에서 만든 프롬프트 변수의 값을 지우고, 그 포트에 Text Iterator의 출력을 연결합니다.

변수는 그대로 두고 값의 출처만 바뀌는 것입니다.

Text Iterator 안에서 Add another item으로 장면 문구를 하나씩 추가합니다.

발표에서는 "extreme long shot of the group hiking along a remote mountain", "a deer grazing in an alpine meadow", "close-up of a hiker's boots splashing through a puddle", 그리고 앞 카드에서 쓴 "low angle, fish eye lens, side view of the group" 네 항목을 넣었습니다.

이미지 모델을 실행합니다.

오른쪽 패널의 Iterators에 항목 수(4 values)가 표시되고, 그 수만큼 결과가 나옵니다.

Batch 결과 화면에서 항목별로 생성된 이미지를 하나씩 넘겨 보며 확인합니다.

발표에서는 원거리 하이킹 장면·사슴·부츠 클로즈업·저각 어안렌즈 네 장이 각각 다르게 나왔습니다.

항목을 더 추가하거나 줄여서 뒤에 연결된 노드가 그 개수만큼 다시 실행되는지 확인합니다.

왼쪽 검색에서 From을 Image로, To를 Video로 거르면 이미지를 받아 영상을 만드는 모델만 남습니다.

목록에서 영상 모델(발표에서는 Grok Imagine Video)을 캔버스로 끌어다 놓습니다.

만들어 둔 이미지를 영상 모델의 Image 입력 포트에 연결합니다.

이 이미지가 영상의 첫 프레임이 됩니다.

Saved 패널에서 저장해 둔 영상용 프롬프트를 꺼내 Prompt 포트에 연결합니다.

실제 문구는 "use the input image as the first frame, slow motion shot, camera steady tracking shot."입니다.

오른쪽 패널에서 Duration·Resolution을 정합니다.

발표에서는 6초, 720p로 설정했습니다.

Run selected의 Runs 값을 3으로 늘려 후보 영상 세 개를 한 번에 받습니다.

같은 프롬프트라도 실행마다 결과가 조금씩 다릅니다.

발표에서는 같은 영상 모델을 하나 더 놓고 같은 프롬프트로 실행해, 최종적으로 여러 후보 중 마음에 드는 컷을 골랐습니다.

Color correction 노드를 캔버스에 놓고, 손보고 싶은 이미지를 입력으로 연결합니다.

Exposure·Temperature 같은 슬라이더를 움직여 색감을 바로 확인합니다.

발표에서는 "너무 노란색"이라고 판단해 Temperature를 낮췄습니다. 이 노드는 생성 모델이 아니라서 크레딧이 들지 않습니다.

Levels 노드를 연결해 히스토그램을 보며 톤을 다듬습니다.

발표에서는 "빨간색이 조금 있다"며 레벨로 빨간 톤을 눌렀습니다.

Crop 노드를 연결하고 Aspect ratio를 원하는 비율(발표에서는 16:9, "더 시네마틱하게")로 정합니다.

세 노드를 순서대로 연결한 체인의 결과를 확인합니다.

색·톤·비율이 모두 반영된 이미지가 마지막 노드에 남습니다.

슬라이더를 움직일 때마다 미리보기가 즉시 바뀌는지 확인합니다.

Run Model을 기다리는 생성형 노드와 다르게, 값을 바꾸는 즉시 반영됩니다.

새 Prompt 노드에 넣고 싶은 문구(발표에서는 "Alaska")를 텍스트로 씁니다.

Compositor 노드를 캔버스에 놓고, 앞 카드에서 만든 이미지와 이 텍스트를 각각 레이어로 연결합니다.

Compositor는 이미지·텍스트·영상·오디오를 동시에 층으로 받을 수 있습니다 — 이 카드에서는 이미지와 텍스트 두 층부터 시작합니다.

Compositor 노드를 열면 Figma와 같은 캔버스가 나옵니다.

텍스트 레이어를 선택해 폰트·크기·정렬을 조정합니다.

텍스트가 이미지 위에서 잘 안 보이면 위치를 다시 잡거나 정렬을 맞춥니다.

발표에서는 처음에 텍스트가 가운데 정렬이 안 돼 있어 다시 맞췄습니다.

캔버스를 닫고 확인하면 텍스트가 이미지 위에 얹힌 한 장짜리 결과가 만들어져 있습니다.

앞쪽 색보정 노드의 노출 값을 다시 바꿔 보고, 그 변화가 Compositor 결과까지 따라 바뀌는지 확인합니다.

이미지에 적용해 둔 색보정 → 레벨 → 크롭 → Compositor 체인을 그대로 둡니다.

지우거나 다시 만들지 않습니다.

체인의 맨 앞 입력 포트에 연결된 이미지를 지우고, 그 자리에 앞서 만든 영상 노드의 출력을 연결합니다.

체인의 각 노드가 이미지 대신 영상을 받으면서, 미리보기에 재생 바(00:00:00, 재생 버튼)가 나타납니다.

색보정·레벨·크롭 값을 영상에 맞게 살짝 조정합니다.

발표에서는 "너무 초록색"이라 색보정 값만 다시 만졌습니다. 노드 자체는 새로 만들지 않습니다.

같은 체인을 Compositor 노드에도 연결합니다.

이번엔 이미지+텍스트가 아니라 시간이 있는 타임라인 편집 화면이 열립니다.

Compositor의 타임라인에서 텍스트 레이어의 길이·위치를 영상 재생 시간에 맞게 조정하고, 다른 영상 클립을 트림해 하나로 이어 붙입니다.

완성된 결과를 재생해, 색보정·크롭·텍스트 합성이 모두 반영된 짧은 영상이 나오는지 확인합니다.

Any LLM 노드를 캔버스에 놓고, 이름을 알아보기 쉽게 바꿔요(발표에서는 "run an LLM"). Gemini·GPT 같은 챗봇형 모델을 노드로 쓸 수 있습니다.

먼저 아무 지시나 시켜서 LLM이 챗봇과 똑같이 동작한다는 걸 확인합니다.

발표에서는 "나 지금 컨퍼런스 무대에 있고 사람들이 조용히 나를 보고 있어. 뭘 해야 할까? 한 단어로만 답해"라고 시켰고, 이탈리아 여행이나 피자 레시피를 물으면 그 답을 그대로 돌려준다는 것도 보여줬습니다.

그 잡담용 프롬프트를 지우고, 워크플로우에 쓸 수 있는 시스템 프롬프트로 바꿉니다.

지시문은 역할(Role) · 작업(Task) · 출력 형식(Output format) 세 부분으로 나눠 씁니다.

역할(role) 부분은 "You are an expert brand visual analyst and image generation brief writer."(당신은 전문 브랜드 비주얼 분석가이자 이미지 생성 브리프 작성자입니다)입니다 — 모델이 어떤 정체성으로 답해야 하는지 지정합니다.

작업(task) 부분은 "Your task is to receive one input image containing a grid of brand images and create a precise visual production brief."(입력으로 브랜드 이미지 그리드 한 장을 받아, 정확한 비주얼 프로덕션 브리프를 작성하세요)입니다 — 무엇을 입력받아 무엇을 만들어야 하는지 명시합니다.

브랜드 이미지 그리드를 이미지 입력으로 연결합니다.

발표에서는 Figma에서 복사한 브랜드 이미지 여러 장을 그대로 붙여 넣었습니다.

실행하면 core visual identity(핵심 비주얼 정체성), photography style(촬영 스타일), composition rules(구도 규칙) 같은 항목이 담긴 제작 기준서가 텍스트로 나옵니다.

이게 "output format"이 암묵적으로 지정한 구조입니다 — 산문이 아니라 항목별로 정리된 브리프.

Prompt 노드에 새 장소 이름을 넣는 변수 하나(발표에서는 "New Location")를 만듭니다.

이 자리만 매달 바뀝니다.

앞 카드에서 만든 제작 기준서를 두 번째 입력으로 Any LLM 노드에 연결합니다.

기준서는 고정된 채로 재사용됩니다.

이 LLM의 시스템 프롬프트는 브랜드 기준서 카드와 다른 작업을 시킵니다 — "당신의 역할은 특정 브랜드 비주얼 언어로 표현된 새 장소를 위한 영화적인 텍스트-투-이미지 프롬프트 변형을 생성하는 것입니다." 입력이 "이미지 → 기준서"였다면, 이번엔 "기준서 + 장소 → 프롬프트 여러 개"로 역할이 바뀝니다.

LLM에게 새 장소(New Location, 이 발표에서는 Alaska)와 브랜드 기준서 두 가지를 함께 입력으로 줍니다.

브랜드 기준서는 Router를 거쳐 연결해 선을 정리했습니다.

LLM의 출력을 Text Iterator로 바로 연결합니다.

LLM이 별표(*)나 줄바꿈 같은 구분자로 써낸 프롬프트 여러 개가 자동으로 항목별로 나뉩니다.

Text Iterator를 이미지 모델에 연결해 실행합니다.

발표에서는 장소 한 단어에서 이미지 여덟 장이 한 번에 나왔습니다.

Figma 파일에서 매달 쓰는 프레임(발표에서는 인스타그램 포스트·스토리·이메일 헤더 등 네 종)을 복사합니다.

Weave 캔버스로 돌아와 붙여 넣으면 각 프레임이 그대로 노드가 됩니다.

프레임 위에 이미지를 드롭하면 새 입력 핸들이 생깁니다.

이 핸들에 앞 카드에서 만든 이미지를 연결합니다.

프레임 안의 텍스트 레이어는 연결 가능한 레이어 목록에서 골라 값을 연결합니다.

관계없는 레이어는 목록에 뜨지 않습니다 — 이미지 필드가 있는 레이어만 이미지 연결 대상으로, 텍스트 필드가 있는 레이어만 텍스트 연결 대상으로 걸러집니다.

워크플로우의 맨 앞(장소 이름을 넣는 Prompt 노드)에서 나온 값도 Router를 거쳐 프레임의 텍스트 레이어(예를 들어 행사명)에 연결합니다.

이 발표에서는 장소 이름 "Alaska"가 프레임의 hike name 레이어까지 이어졌습니다.

네 프레임 모두에 같은 이미지·텍스트를 연결한 뒤, 그 값을 바꿔 보고 네 종의 게시물이 동시에 갱신되는지 확인합니다.

프레임의 디자인 자체를 고치고 싶으면 Edit를 눌러 연결된 Figma 파일을 엽니다.

원본 프레임이 아니라 Weave가 만든 연결된 사본을 편집하고, 컴포넌트·디자인 시스템 색상을 그대로 쓸 수 있습니다. 편집 후 Weave로 돌아오면 최신 변경을 가져올지 그대로 둘지 선택합니다.