Question Management: Figma Design Reference¶

Structured index of all Figma design frames in the SyRF Design v2 project related to Question Management. Use this document to navigate directly to specific designs when Figma MCP calls are available.

Figma Project: SyRF Design v2 File Key: CVHEW6l1oCEehOkhl6SLGa Base URL: https://www.figma.com/design/CVHEW6l1oCEehOkhl6SLGa/SyRF-Design-v2

Page 1: Question Editing (Older Designs)¶

URL: ?node-id=4336-10929 Canvas ID: 4336:10929

These are the earlier designs covering the three-mode question design interface (collapsed hybrid, expanded hybrid, edit mode), assign, preview, and supporting elements.

Design Tab -- View Modes¶

Frame	ID	Description
Settings - Question Design (Collapsed Hybrid Mode)	`4336:10930`	Main design page showing all 6 question types in collapsed hybrid view (input, checkbox, checklist, autocomplete, radio, dropdown). Includes category tabs, parent-child connectors.
Settings - Question Design (Expanded Hybrid mode)	`4586:12847`	Expanded view showing full question details with answer options visible.
Settings - Question Design (Collapsed Hybrid Mode)	`4587:13197`	Variant with "Add new question" buttons and check-circle validation icons.
Settings - Question Design (Collapsed Hybrid Mode)	`5329:16027`	Clean collapsed hybrid with parent-child connectors.
Settings - Question Design (Collapsed Hybrid Mode)	`5718:18169`	With add-new-question buttons and validation icons.
Settings - Question Design (Collapsed, 1 Question Hybrid Mode)	`5718:18717`	Single question expanded within collapsed tree, showing inline edit mode for dropdown.

Design Tab -- Edit Mode¶

Frame	ID	Description
Settings - Question Design (Edit Mode)	`5109:15319`	Full edit mode showing all 6 question types with form fields, answer options, validation indicators (alarm/done icons).
Settings - Question Design (Edit Mode)	`5331:16285`	Variant with additional input box edit states.
Settings - Question Design (Edit Mode)	`5718:16422`	Largest edit mode variant (33 child elements), comprehensive edit forms.
Input box - edit mode (standalone)	`5831:17225`	Isolated edit mode component: question settings checkboxes, activation state, text fields, drag indicator.

Design Tab -- Rearrange Mode¶

Frame	ID	Description
Settings - Question Design (rearrange mode)	`4336:11186`	Rearrange mode with reorder controls alongside hybrid collapsed views.
Moving Question	`4337:11429`	Question being dragged/moved visualization.

Design Tab -- Child Questions¶

Frame	ID	Description
Settings - Question Design (Child Question)	`5109:16239`	Parent-child relationship with connector lines, child question form, dropdown menu for condition selection.

Design Tab -- Question Selection¶

Frame	ID	Description
Settings - Question Selection	`5109:16672`	Question selection mode with action buttons for bulk operations.

Assign Tab¶

Frame	ID	Description
Settings - Question Design (Assign Stage)	`5665:16148`	Dual-tree assign view: all questions on left, stage questions on right, with parent-child connectors.

Preview Tab¶

Frame	ID	Description
Settings - Question Design Preview Form	`5109:16949`	Preview form rendering with review mode toggle, stage dropdown, stats bars, help icons.
Settings - Question Design (Preview Stage, enabled annotations)	`5718:19367`	Preview with annotations enabled, showing review mode and stage selector.
Settings - Question Design (Preview Stage)	`5773:17220`	Preview stage without annotations enabled.

Dialog Boxes¶

Frame	ID	Description
Question Edit Dialog Boxes	`5109:17266`	Collection of 9 dialog variants: confirmation dialogs, button bars, edit text dialogs.
Delete Annotations	`5109:15199`	Delete confirmation with answer options and data type selectors.

Utility Elements¶

Frame	ID	Description
Data type select	`5831:17293`	Standalone data type dropdown selector.

Page 2: Question Editing MVP (Latest Designs)¶

URL: ?node-id=5841-17420 Canvas ID: 5841:17420

These are the most recent designs, representing the MVP iteration. They include refined edit mode, assign page states, preview states, child question validation, and task-specific design frames.

Design Tab -- Edit Mode¶

Frame	ID	Description
Settings - Question Management (Edit Mode)	`5841:17511`	Key MVP frame. Full edit mode with inline forms, question settings checkboxes, lock icon for locked questions, parent-child connectors, child question editing, data type selector. 20+ key elements.
Settings - Question Design (Collapsed, 1 Question Hybrid Mode)	`5841:18306`	Single question expanded inline with dropdown edit, plus collapsed tree. Parent-child connectors.
Question managment - Question (Expanded Hybrid mode)	`5841:20195`	Expanded hybrid showing all question types with answer options visible.
Settings - Question Design (Collapsed Hybrid Mode)	`5841:20525`	Collapsed hybrid with add-new-question buttons and validation icons.

Design Tab -- Child Question Validation¶

Frame	ID	Description
Settings - Question Design (Collapsed Hybrid Mode) Invalid child question	`10728:17111`	Shows validation error state for invalid child questions within collapsed hybrid tree.
Settings - Question Design (Collapsed Hybrid Mode) child question amended	`10728:21201`	Shows amended child question state after parent option changes.
Answer options (standalone)	`10728:17674`	Isolated answer options component.
Answer options (standalone)	`10728:21537`	Variant of answer options component.

Assign Tab¶

Frame	ID	Description
Settings - Question Design (Assign Stage) - Annotation Not Enabled	`5841:19577`	Key MVP frame. Assign page when annotations are not yet enabled. Shows question tree with action buttons.
CSI Task 3 - Settings - Question Design (Assign Stage) - Annotation Not Enabled	`12247:21245`	Revised iteration of assign stage (annotation not enabled).
Settings - Question Design (Assign Stage)	`5886:18633`	Dual-tree assign with parent-child connectors, checkbox selection.
Settings - Question Design (Assign Stage) Updated	`5886:19031`	Updated assign stage with expanded element set (26 children).
Settings - Question Design (Assign Stage)	`5917:18786`	Assign stage variant with action buttons and contained text+icon buttons.
CSI Task 2 - Settings - Question Design (Assign Stage)	`12243:15130`	CSI task iteration of assign stage design.

Assign Tab -- Task-Specific Designs¶

Frame	ID	Description
DG Task 1 assign tab (system question)	`12252:3851`	Assign tab showing system questions with lock icons, carbon checkbox components.
DG Task 1 assign tab (data extraction question)	`12515:19102`	Assign tab for data extraction stage questions.

Preview Tab¶

Frame	ID	Description
Settings - Question Design (Preview Stage, enabled annotations)	`5841:18484`	Preview with annotations enabled, review mode toggle, stage dropdown.
Settings - Question Design (Preview Stage, enabled annotations)	`5841:19826`	Duplicate/variant of preview with enabled annotations.
Settings - Question Design (Preview Stage)	`5841:18614`	Preview stage without annotations, review mode, stage selector.

Component Reference Frames¶

Frame	ID	Description
Question Management component	`10248:15820`	Component structure reference.
CSI Task 1 - Question Management component	`12245:15293`	Task-specific component reference.
Question Design Header	`10200:15960`	Header component reference.
Hybrid	`9424:18127`	Hybrid mode component.
Buttons	`9697:22161`	Button variants used in QM.
text boxes	`9697:23350`	Text box variants used in QM.

Utility Elements¶

Frame	ID	Description
collapse_all	`9424:18317`	Collapse all icon/component.
expand_all (in Frame 2)	`9424:18311`	Expand all icon/component.
arrow_right	`6079:21446`	Arrow right icon.
arrow_downward	`6140:19934`	Arrow downward icon.

How to Access Specific Frames¶

To view any frame in Figma, use this URL pattern:

https://www.figma.com/design/CVHEW6l1oCEehOkhl6SLGa/SyRF-Design-v2?node-id={ID_WITH_DASH}

Replace : with - in the ID. For example, frame 5841:17511 becomes:

https://www.figma.com/design/CVHEW6l1oCEehOkhl6SLGa/SyRF-Design-v2?node-id=5841-17511

Key Frames for Implementation Reference¶

The most important frames to consult when implementing QM:

Edit Mode MVP: 5841:17511 -- The definitive edit mode design with all form elements
Assign (Not Enabled): 5841:19577 -- Assign page when stage annotations aren't active
Assign (Updated): 5886:19031 -- Most complete assign stage design
Preview (Enabled): 5841:18484 -- Preview with annotations enabled
Child Question Validation: 10728:17111 -- Invalid child question states
Collapsed Hybrid: 4336:10930 -- Reference for all 6 question types in collapsed view
Edit Mode (Comprehensive): 5718:16422 -- Largest edit mode design (33 elements)

Notes¶

These designs represent the mutable question editor (Draft Questions phase). No Figma designs exist yet for the versioning UI (version history, diff viewer, admin decision framework).
Some frames are duplicated or iterated (e.g., multiple "Collapsed Hybrid Mode" frames represent design evolution).
Frames prefixed with "CSI Task" or "DG Task" are task-specific iterations from team members.
The Figma MCP rate limit on Starter plan is 6 calls/month. Use the frame IDs above to make targeted get_screenshot or get_design_context calls.

Generated 2026-03-20 from Figma metadata extraction (no additional MCP calls required).