Skip to main content

Agent — Direct Figma Source Index

Source file: Agent — 9gjEinYPK6zby7CkShjxTm Current source node: 16:27479 (Portfolio 1var) Retrieved: 2026-07-21 through the Figma MCP (get_design_context, get_metadata, get_variable_defs).

This is a direct Figma record. Values in this document may be implemented; anything not recorded here must remain BLOCKED until its own Figma node is inspected. The current source is a mobile frame, not a desktop replacement. No production UI changes merely by adding this record.

Reference frame​

PropertyDirect Figma value
NodePortfolio 1var (16:27479)
Frame size1080 × 2340px
BackgroundVertical linear gradient: #2E5F98 → #0D2440
Root padding32px horizontal, 64px vertical
Primary inner frameFrame 174 (16:27480), 1016 × 1839px, positioned x:32, y:64
Main inner stack gap64px

Directly retrieved reusable tokens​

Figma nameDirect value
Lemon Chiffon#FFF2C2
Sunflower Gold#E6B84C
Baltic Blue#2E5E99
Icons / Icons (Inner shadow)Inner shadow #00000040, offset 2px 2px, blur 2px, spread 0
Inner shadow (Small)Inner shadow #00000040, offset 0 4px, blur 4px, spread 0
Meddium Shadow (Figma spelling)Drop shadow #00000040, offset 12px 12px, blur 12px, spread 0
Sort shadowDrop shadow #00000080, offset 3px 2px, blur 6.3px, spread 0
Button Stroke (Light)The style is referenced, but direct stop/angle data is not returned at this root: BLOCKED
Button Outline FillThe style is referenced, but direct fill data is not returned at this root: BLOCKED
Bitton stroke (Gold) (Figma spelling)The style is referenced, but direct stop/angle data is not returned at this root: BLOCKED
Logo GradientThe style is referenced, but direct gradient data is not returned at this root: BLOCKED

Confirmed screen structure and anchors​

OrderNode IDFigma layerPosition in rootSize
116:27480Main content / Frame 17432, 641016 × 1839
1.116:27481Header group / Frame 1740, 01016 × 249
1.1.116:27482Nav bar (Phone) NEW4, 01008 × 90
1.1.216:27483Portfolio0, 1221016 × 127
1.216:27484Profile group / Frame 1930, 3131016 × 256
1.2.116:27485Avatar0, 0256 × 256
1.2.216:27486Profile text/activity group280, 19.5736 × 217
1.2.2.116:27487Name/navigation text group0, 0397 × 92
1.2.2.1.116:27488White hard main text0, 0397 × 61
1.2.2.1.216:27489Text novigation0, 6195 × 31
1.2.2.216:27490Portfolio activity0, 116736 × 101
1.316:27495Amadeq Rate0, 6331016 × 310
1.416:27491Lists group / Frame 2534, 10071008 × 384
1.4.116:27830Sort and lists0, 0893 × 160
1.4.216:27493Sort and lists0, 2241008 × 160
216:27496Social Net Box32, 19391016 × 128
316:27497Text for agent329.5, 2103421 × 41
416:27498Navigation bar (Phone)32, 21801016 × 96

Source workflow from this point​

  1. Select a named Figma node from the table.
  2. Read its direct design context and, where needed, its style/variable data.
  3. Create or update its element passport with literal geometry, text, material, states, and parent anchor.
  4. Only then map it to the existing React/SCSS component.
  5. Compare the isolated Figma crop and the browser crop before accepting it.

Verified reusable element passport — Nav bar (Phone) NEW​

PropertyDirect Figma value
Node / placement16:27482; 1008 × 90px; placed at x:4, y:0 in the header group
Container layoutHorizontal Auto Layout; justify-content: space-between; vertical centre alignment; internal horizontal padding 32px
Left navigation groupFixed width 748.091px; vertical column wrapper
Navigation rowHorizontal Auto Layout; vertically centred; 12px gap
First labelLiteral Your portfolio; Space Grotesk Bold; 48px; normal line height; no wrapping; vertical text gradient #FFFFFF → rgba(255,255,255,.66); whole-label opacity 50%
ArrowExported Figma asset; 24.045 × 41.031px; opacity 50%
Second labelLiteral Profile; same typography, gradient, opacity, and no-wrap behaviour as the first label
LogoExported Figma asset; 96 × 96px; anchored at the right edge by the container's space-between layout
Reusable effect tokenIcons (Inner shadow): inner shadow #00000040, 2px 2px, blur 2px, spread 0
Interaction statesBLOCKED — the source context returns only the currently rendered default state; hover, pressed, and route actions need direct component/state inspection

Implementation rule: preserve the three elements as an Auto Layout row; do not replace the arrow or logo with approximated glyphs. Download the returned Figma assets before committing their production use, because the MCP URLs expire.

Verified reusable element passport — Navigation bar (Phone)​

PropertyDirect Figma value
Node / placement16:27498; 1016 × 96px; placed at x:32, y:2180 in the root frame
Inner navigationComponent 1:85309; 1008px wide; horizontal Auto Layout; justify-content: space-between; top aligned
Active itemVariant Study; wrapper 128 × 96px; centred content; its exported vector layout is 121 × 128px with rendered asset bounds top:0, right:-19.83%, bottom:-18.75%, left:0
Secondary symbol128 × 96px; whole-item opacity 50%; the source vector uses top:-6px, left:-6.6%, right:-5.9%
Home item128 × 96px; whole-item opacity 50%; source icon 96 × 96px
Avatars item144 × 96px; whole-item opacity 50%; source group 141.53 × 96px
Library item128 × 96px; whole-item opacity 50%; source icon 96 × 96px
AssetsEvery displayed icon is a Figma-exported asset; no Unicode or hand-drawn replacement is allowed
StatesThe source exposes Study as active and the other named variants as disabled; click routes, hover, and pressed behaviour remain BLOCKED pending component-state inspection
Effects available in source scopeMeddium Shadow: drop shadow #00000040, 12px 12px, blur 12px; Inner shadow (Small): inner shadow #00000040, 0 4px, blur 4px

Implementation rule: horizontal spacing comes from space-between across the 1008px inner bar. Do not convert it to equal-width grid columns: the avatars slot is intentionally 144px while the other disabled slots are 128px.

Next direct inspections​

  1. Reusable mobile navigation: 16:27482 and 16:27498.
  2. Reusable profile shell: 16:27485, 16:27488, 16:27489.
  3. Reusable controls: 16:27830 and 16:27493.