hackforla
Design: Update the project tables in Figma with Project ID as it appears on the site
Overview
Need to update Figma to display project id changes implemented by Dev to keep all documentation, Style Guide, current with Dev implementation regarding this issue.
Details
Pages where this will appear
- Decided to put the ID directly to the left of project name on every table where it appears.
- On My Project's page it will appear between Status and Project Name (they can use the project id number to distinguish between projects that have the same name and other details and to look up submissions)
Project ID
Project ID appears as a 10-digit number on the website, by padding the Project ID number from the database with as many zeros as required.
- e.g., if the project id is 15 the number will be
- 00000-00015
- e.g, if the project id is 1015 the number will be
- 00000-01015
Action Items
- [x] Assign yourself to this issue.
- [x] Update the Figma Design System with changes resulting from the issue's final design, if applicable.
- [ ] Update the Style Guide Presentation, if applicable.
- [ ] Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
- [ ] Update the Dev Handoff Issue #2429 with link to the final comment with the designs and any notes for the developer
- [ ] Move the Figma page to the Development section of the Figma file.
- [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
- [ ] Include the development handoff issue number in the GitHub section below.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.
Resources
GitHub
- Project ID is being added to Page 5 and Print Summary PDF: #2313
- Manage Submissions page: #1953
- Redesign of the My Projects page: #2219
- Additional designs for the Submissions page: #2373
- Dev Handoff Issue: #2429
Figma
Dev Site
- Manage Submission: [Not yet implemented]
- My Projects: https://tdm-dev.azurewebsites.net/projects
- Submissions: https://tdm-dev.azurewebsites.net/submissions
- Archived Projects: https://tdm-dev.azurewebsites.net/archivedprojects
How to Navigate to the Archived Projects Page
- Log into the TDM site using the Security Admin account from 1Password.
- Navigate to the Security page listed in the top navigation bar.
- Click the View Archived Accounts link.
- Click the See All Archived Projects link.
Staging and Release decks
- Staging Deck
- Release Deck
- [2025-MM-DD Release deck, slide 2445]
Hi @ExperimentsInHonesty. In the Details section, there is a note next to My Projects saying that there is little utility to adding the UUID to that page. If that's the case, why is it being added there? Should we remove the My Projects page from the list of pages that the UUID is being added to?
@thetanmancan
Hi @ExperimentsInHonesty. In the Details section, there is a note next to My Projects saying that there is little utility to adding the UUID to that page. If that's the case, why is it being added there? Should we remove the My Projects page from the list of pages that the UUID is being added to?
Why we are keeping it
- for consistency
- little utility, doesn't mean, no utility (because we know they might use the My Projects page to look at submissions)
We decided to put the ID directly to the left of project name on every table where it appears.
On My Project's page it will appear between Status and Project Name
This issue should be revised to just be an issue to update figma
Overview
Need to update Figma to display project id changes implemented by Dev to keep all documentation, Style Guide, current with Dev implementation regarding this issue.
Details
Pages where this will appear
- Decided to put the ID directly to the left of project name on every table where it appears.
- On My Project's page it will appear between Status and Project Name (they can use the project id number to distinguish between projects that have the same name and other details and to look up submissions)
Project ID
Project ID appears as a 10-digit number on the website, by padding the Project ID number from the database with as many zeros as required.
- e.g., if the project id is 15 the number will be
- 0000000015
- e.g, if the project id is 1015 the number will be
- 0000001015
Action Items
- [ ] Assign yourself to this issue.
- [ ] Update the Figma Design System with changes resulting from the issue's final design, if applicable.
- [ ] Update the Style Guide Presentation, if applicable.
- [ ] Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
- [ ] Update the Dev Handoff Issue #2429 with link to the final comment with the designs and any notes for the developer
- [ ] Move the Figma page to the Development section of the Figma file.
- [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
- [ ] Include the development handoff issue number in the GitHub section below.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.
Resources
GitHub
- Project ID is being added to Page 5 and Print Summary PDF: #2313
- Manage Submissions page: #1953
- Redesign of the My Projects page: #2219
- Additional designs for the Submissions page: #2373
- Dev Handoff Issue: #2429
Figma
Dev Site
- Manage Submission: [Not yet implemented]
- My Projects: https://tdm-dev.azurewebsites.net/projects
- Submissions: https://tdm-dev.azurewebsites.net/submissions
- Archived Projects: https://tdm-dev.azurewebsites.net/archivedprojects
How to Navigate to the Archived Projects Page
- Log into the TDM site using the Security Admin account from 1Password.
- Navigate to the Security page listed in the top navigation bar.
- Click the View Archived Accounts link.
- Click the See All Archived Projects link.
Staging and Release decks
- Staging Deck
- Release Deck
- [2025-MM-DD Release deck, slide 2445]
hey @Rabia2219 :)
Update: Issue #2445
The issue asks to update Project Tables in Figma with the Project ID as it appears on the site
Project ID is found:
On the My Projects, Submissions Pages
- Update for Admin, User, Security Accounts
Progress:
New Mocks are ready for other eyes. I will bring it up in the meeting tomorrow. Would be great to have another designer take a look and scan if I've missed anything.
Blockers:
Once approved, I will add pages to the system and style guide.
*Something to note is that the issue asks for archived projects to be updated on the Security account, but after viewing that table, there is no developed Project ID column.
See Below
Links:
I will add screen shots to this update tomorrow
Update #2445 (Continued)
*Notes: There are still inconsistencies, including some typography mismatches that were not current as well. There will still be some tweaking after this, and more updates are needed in the system. But this is a starting place to work from.
See below for before and after screenshots for the new Project ID pages within each of the three accounts:
Admin
My Projects Page
.Before
After
Submissions Page
.Before
After
User Facing
My Projects Page
.Submissions Page
.Security Screens
My Projects
.Submissions
.
hey there @Rabia2219 @ExperimentsInHonesty :)
Update: #2445
After last week's meeting (10/22/25), I reviewed updated mocks with other designers and have since adjusted the discussed variations. See most recent before and after shots below. I think we should be good to go, but awaiting final approval.
Progress:
Once approved, I will add new pages into Figma design system.
Before and After Screenshots
Admin
My Projects
Submissions
User Facing
Submissions
My Projects
Security
Submissions
My Projects
@hDenison Thank you for the screenshots. Please describe the changes that were applied in the after for each one.
Thanks @Rabia2219 Please take a look at the changes listed underneath the after shots inside.
Issue: #2445
Changes: Old Figma Mocks to Updated Figma Mocks for the design system
1. Admin Login
My Projects
Changes:
Typography
- header text and font changed to Calibri from 20px to 16px, strong in the headers and regular in paragraphs, to match the site
Color
- header banner changed to dark navy, icons changed to dark navy
Icons
- changed size and color icons in table to 16px, dark navy, to match site
Layout
-
Nav Bar: Arrangement of items and copy changes
-
Footer: Size changes with icon for glossary
-
Columns: Changed heights to match site, first column in row is .5px taller than the rest. Removed and added new ones based on the current site. (See previous comment for more)
Submissions
There is no Figma Mock in the design system, see the new mock below
2. User Login
My Projects table
Submissions
Changes:
Layout
-
Added search bar and updated toolbar
-
Matched typography to current site
-
Footer: Size changes with icon for glossary
Elements
-
Updated button to match current site
-
Columns: Changed heights to match site, first column in row is .5px taller than the rest. Removed and added new ones based on the current site. (See previous comment for more)
3. Security Login
*There are currently no Figma Mocks in the design system. See the new mocks below
Submissions
My Projects
If more needed check out Figma Doc
@hDenison The one thing the MY Project's page mockup seems to be missing is that when a project is owned by the person logged in, it would show their username under created by followed by "(Me)"
Copy that! Thank you for catching @ExperimentsInHonesty
Update #2445
Progress:
The Created by Column has been updated on 'My Projects' Table to the current naming structure when owner is logged in: "Project Owner Name (Me)"
My Projects
Notes from meeting 11/19/25
Bonnie approved the updated project table designs. @hDenison will move mocks into Figma Design System
Update #2445
Progress
New and approved designs that include updated project tables with the Project ID have been added to the Figma Design System.
They include mocks for the My Projects and Submissions pages for the following accounts:
- Admin
- User Facing
- Security