Figma 납품 보강

웹 데모만으로 약했던 Figma 원본 대응력을 import kit, component variants, Auto Layout, prototype map evidence로 보강한 화면입니다.

Figma 질문 대응 기준

현재 공개 샘플은 클라이언트 브랜드 적용 전 UI 구조 샘플입니다. 착수 후에는 이 화면의 frame inventory, Variables, component matrix, Auto Layout spec을 기준으로 Figma 파일을 재구성해 납품합니다. 모든 데이터는 가상 샘플이며 LLM 결과는 검토 보조와 담당자 확인을 전제로 합니다.

Figma import kit

Tokens Studio JSON, Variables JSON, frame inventory, component matrix 포함

READY

Component variants

button, badge, table, modal, tabs, consent, LLM workbench 상태 정의

38 states

Auto Layout spec

desktop/tablet constraints, overflow, modal bounds, density mode 기준

15 frames

Prototype map

auth, dashboard, CRM modal, comparison, LLM review, consent 완료 흐름

12 flows

15p frame inventory

공고 화면 수와 Figma page/frame 네이밍을 1:1로 매핑

No	Frame	Route	Figma path	Status
01	Login	`/login`	01_App_Screens/Auth/Login	Ready
02	Signup	`/signup`	01_App_Screens/Auth/Signup	Ready
03	Forgot password	`/forgot-password`	01_App_Screens/Auth/ForgotPassword	Ready
04	Dashboard	`/dashboard`	01_App_Screens/Core/Dashboard	Ready
05	Customer list	`/customers`	01_App_Screens/CRM/CustomerList	Ready
06	Customer detail modal	`/customers`	01_App_Screens/CRM/CustomerDetailModal	Ready
07	18 supplier comparison	`/comparison`	01_App_Screens/Comparison/DenseTable	Ready
08	LLM context	`/assistant`	01_App_Screens/Assistant/Context	Ready
09	LLM generate	`/assistant`	01_App_Screens/Assistant/Generate	Ready
10	LLM review	`/assistant`	01_App_Screens/Assistant/Review	Ready
11	Consent customer flow	`/consent`	01_App_Screens/Consent/CustomerFlow	Ready
12	Board	`/board`	01_App_Screens/Communication/Board	Ready
13	Account	`/account`	01_App_Screens/Settings/Account	Ready
14	Design system	`/design-system`	02_Design_System/VariablesComponents	Ready
15	Handoff guide	`/handoff`	03_Handoff/DevModeQA	Ready

Component variant matrix

Figma component properties로 전환할 수 있는 상태 표

Button

variant / size / icon / disabled

primary, outline, ghost, danger · sm, md, icon

components/button.tsx

StatusBadge

tone / icon / label

success, warning, info, danger, neutral

components/status-badge.tsx

DataTable

density / pinned / selected / overflow

comfort, dense, selected, empty, filtered

comparison dense table

CRM Modal

tab / consentStatus / warning

overview, ledger, history, comparison, llm, next

customers detail modal

LLM Workbench

phase / guardrail / approval

context, generate, review, blocked, approved

assistant workbench

Consent Stepper

step / required / optional / complete

purpose, retention, withdrawal, complete

consent customer flow

Auto Layout constraints

desktop/tablet frame 전환 규칙

Desktop App Shell

Desktop · sidebar 256 + fluid content

Tablet · drawer + full width content

hug nav / fill content / min 1024

Dashboard Grid

Desktop · 4 KPI + 2 column BI

Tablet · 2 KPI + 1 column BI

wrap cards / equal height

Comparison Table

Desktop · sticky first columns + horizontal overflow

Tablet · summary cards first + table scroll

min table 1180 / overflow x

CRM Detail Modal

Desktop · max width 960 centered

Tablet · max width calc viewport minus 32

vertical scroll / sticky tablist

LLM Workbench

Desktop · 3 columns context-generate-review

Tablet · stacked review-last

columns fill / audit panel fixed bottom

Consent Flow

Desktop · stepper + content + summary

Tablet · stepper horizontal scroll + content stack

form controls fill width

Prototype flow map

Figma Prototype 연결 시 사용할 주요 인터랙션

LoginDashboard

Action: primary button

인증 후 운영 홈 진입

DashboardCRM Detail Modal

Action: risk item click

주의 고객 상세 확인

CRM Detail Modal18 Supplier Comparison

Action: comparison tab

고객 맥락 기반 비교표 확인

ComparisonPinned Compare Tray

Action: pin supplier

후보 비교 트레이 고정

ComparisonLLM Context

Action: send to LLM review

검토 보조에만 전달

LLM GenerateLLM Review

Action: approval gate

담당자 확인 전 외부 공유 금지

ConsentConsent Complete

Action: complete required

필수/선택 동의 분리 기록

Tokens Studio import coverage

Figma Variables로 가져갈 수 있는 token 파일

색상, 타이포, spacing, radius, shadow, density mode를 JSON으로 분리했습니다.

코드 CSS 변수와 Figma Variables naming을 같은 의미 체계로 맞췄습니다.

태블릿 제약, dense table, modal overlay 토큰은 별도 usage로 기록했습니다.

Evidence file map

R4 소스 ZIP 안에 포함된 Figma 보강 파일

figma/README.md

figma/tokens/tokens-studio.json

figma/tokens/figma-variables.json

figma/frames/frame-inventory-15p.csv

figma/components/component-variants.csv

figma/layout/auto-layout-matrix.csv

figma/prototype/prototype-map.csv

figma/export/figma-cover.svg