TemplateCraft2 min read
What it is for
Have designers, Product Owners and developers read the same Figma file the same way.
The questions it helps settle
Where in the design cycle
A Figma file shared between designers, Product Owners and developers needs signage that everyone can read: what is being explored, what can be discussed, what is set in stone for development.
Four statuses, a naming convention for pages, and a few rules for publishing and sharing. The icons are part of the page names: they can be read in the page list before the content is even opened.
| Signage | Status |
|---|---|
🔍 [Explo] | Topic being explored by the designers. Not ready to be presented. |
🚧 [WIP] | Design of a feature in progress. The work can be seen and discussed with designers, Product Owners and developers. |
✅ [Ready to dev] | The prototype is final and can be delivered in a ticket to be implemented during a sprint. |
📦 [Archive] | Section that gathers the archives of screens or journeys not used on the project. |
Create a WIP (work in progress) workspace in a new page, named as follows, icon included:
🚧 [Design-WIP] Story ticket no. - Scenario - Screens
In this page, you can create all your screens, tests and research. Sub-parts follow the title “Scenario X”.
Nothing in the WIP page will be used for development. For that, a “Ready to dev” page is created, the next step.
This space is reserved for work validated by the team, set in stone for implementation by the developers. The screens will be used as they are: they must be validated and documented for delivery.
If a flow already in Ready to dev needs adjustments, duplicate the Figma page and make the changes on the copy. The integrity of the validated journey is never touched.
There are two kinds of Ready to dev pages: the prototype and the specification.
This page holds the interactive prototype. All screens were validated beforehand with the Product Owner, and the prototype can be used for a demo. Create a new page named as follows, icon included:
✅ ▶️ [Ready-to-Dev] - Ticket no. - feature
This page holds the screens with their specifications. It is the final step: all screens and the prototype have been validated. The specifications give the front-end team brief information: screen size, padding and margins, font size, colours, interactive areas, display rules. Keep it simple: the specification completes the screens, it does not replace them.
✅ 📐 [Ready-to-Dev] - Ticket no. - feature
To make publishing a Ready to dev section easier, use the Trello plugin in Figma: it publishes the mockup into the Trello ticket automatically.
To share the work with the team, use the page address or the “Share” button. Keyboard shortcut: Cmd + L copies the link to the selected frame. Share links update by themselves, and everyone can comment on the screens for a question or a suggestion; the comment keeps a trace of it.
Once the Ready to dev screens are validated, document the work in the team’s documentation tool, next to the ticket.
