Home ▶ Tools & Processes ▶ Dev Ready Checklist
PROCESS • ORG: Delivery Hero
Getting Ready: Making Figma files Ready for Development (Checklist)
July 2022
When it is time to change the status of design files to the "✅ Ready for Dev" page before the Sprint planning and grooming session, the designers are guided to see the checklist below to verify their files. Some of these checklist items can be worked upon with the PM in parallel while the Engineering team starts working on the tickets/stories, but some are non-negotiable.
Designers verify their Figma files thoroughly before moving them to the "✅ Ready for Dev" state by using a peer checking method.
Why do this?
The design, product management, and engineering teams worked together to come up with these checklist items for designs to cross-check their files to reduce confusion regarding which screens/pages are relevant and which are not further this checklist helped designers to expose their files with a consistent and vetted structure.
01
Use Design System Components
Priority: Medium (Negotiable) 🔶
👆 Check every screen and drill down inside each group or frame to see if they are linked to the Design System (DS) library. If not, it's time to add a new component to DS or connect it to an already existing element.
When checking for DS component links, check for frames that are not auto-layout enabled. It is always good to allow auto-layout on your frame to keep your design files clean.
02
Prepare assets and naming convention
Priority: High (Non-negotiable) 🔺
👆 Don't leave your frame names as random auto-generated labels like "Frame 3" or "Layer 54". Rename your layers, frames, and groups to communicate context and hierarchy properly.
Work with your PM to match the name for all your screens to the "Event Names" that are eventually going to be used for tracking events by Devs in the code
03
Connect screens using flow arrows
Priority: High (Non-negotiable) 🔺
👆 User flows can get messy with all the edge cases and states conveyed to the Dev within Figma. Hence, connecting your screens to communicate the end-to-end user flow like a story is a good idea.
While connecting screens as a flow, please remember to label each screen to help the Devs understand screen context and the change being communicated.
04
Mention the Version number on Page Title
Priority: High (Non-negotiable) 🔺
👆 Mention the version number on Page Name and accompany the version with the intended release timeline. For example: ✅ Ready for Dev - v1.0 [Post MVP].
It is also a good idea to name your pages properly so that you have just one "✅ Ready for Dev" page in your file at all times
05
Bring those "Skeletons" to life
Priority: High (Non-negotiable) 🔺
👆 Work with your backend and frontend developers to understand the screens where information is being supplemented from the backend (server).
Skeleton screens will enhance your already awesome designs and serve as the fallback loading state for developers and end-users to rely on. Please don't skip this step 🙏.
06
Redlining the screens 🔴
Priority: High (Non-negotiable) 🔺
👆 Redlining your screens will help devs in your team follow your component measurements without jumping into the inspect panel.
It will remove any leftover design inconsistencies and devs will appreciate your interest in making their lives easier. Redlining can be done easily by installing this nifty Figma plugin (Measure): https://www.figma.com/community/plugin/739918456607459153/Measure
07
JIRA ticket reference
Priority: Low (Negotiable) 🟡
👆 To help connect the dots for others, it is always a good idea to link the design or dev-ticket number(s) from your design file.
If there are a lot of dev tickets or stories, consider taking a screenshot of all the stories as a reference.
08
Capture gRPC/events name
Priority: Low (Negotiable) 🟡
👆 When backend devs are getting involved with the product feature, it is time to work with them to collect the gRPC call data and highlight the same on individual screens on your design files.
Although this step is not necessary, your devs & QA will always thank you for it.
09
Update E2E prototype
Priority: Medium (Negotiable) 🔶
👆 Last but not least, during the end or middle of your development cycle, it is time to duplicate your screens and link them with the End to End flow of the entire file in the E2E (End-2-End)* prototype Figma file.
External and internal stakeholders refer to this file, and it will be great if you can integrate your designs into the end-to-end app flow.
* To keep the business and C-suite stakeholders aligned on the new features added to the production build, the design team created a separate file with all the flows. The Figma Prototype link was shared with all the external teams to inform them informed about the latest additions.
10
Figma Checklist
To help tie it all together, a checklist was integrated within each of the Figma files on the "✅ Ready for Dev" page. This checklist enabled the design team to inform developers and product managers about what all components of the checklist can they expect in the file and what the ones remaining.
Aside from the checklist, we also added a note to put together links to the PRD, Miro-based brainstorming/wireframes, and feature discovery documentation/research.
