DESIGN SETUP AND HAND-OFF
DESIGN SETUP AND HAND-OFF
Embedded Files
PRODUCTION
Creating New Figma Files
Creating New Figma Files
Project Folders:
Project Folders:
Every client project has its own dedicated folder in Figma.
Within each client project folder, files are categorized into Internal Designs, UI Kit, and Client Review.
File Categories:
File Categories:
Internal Designs: For internal drafts, brainstorming, and development stages. These files are not client-facing and are intended solely for team use.
UI Kit: This folder contains reusable components, design systems, and style guides that are client-specific.
Client Review: Only final or near-final designs that are ready for client presentation go here.
Client Review File Covers:
Client Review File Covers:
To prevent accidental sharing of incorrect files, Client Review files should have a dark-colored cover. This visual cue helps distinguish review-ready files from those still in development.
Updating the UI Kit: Best Practices
Updating the UI Kit: Best Practices
As designs evolve through client feedback and iteration, some components or layouts may need to be updated. Keeping the UI Kit aligned with these changes ensures everyone on the team has access to the latest design elements. Here’s how to make sure updates are clear and consistent for everybody:
1. Assign a Clear UI Kit Owner
At the start of every project, ensure there’s a designated main designer responsible for maintaining and updating the UI Kit. This person is the point of contact for any component or layout changes.
Coordinate Changes After "Ready for Dev"
Once a design is marked "Ready for Dev," any further changes should be coordinated with the UI Kit owner. If updates arise due to client feedback or design iteration, reach out to the UI Kit owner to make the necessary adjustments in the file.
Announce Updates in Slack
Once the UI Kit has been updated, notify the team in the relevant Slack channel. Tag both designers and developers on the project, and include a brief summary of the changes and why they were made.
Example:
“@DesignTeam @DevTeam: Updates have been made to the UI Kit based on Client X's feedback from September 4th. Please adjust any instances of the design/build accordingly. [List of changes]”
Provide Additional Context for Major Updates
For significant changes, consider scheduling a quick huddle or meeting to discuss the client or design updates. Ensure transparency by sharing a summary in the project’s Slack channel. This way, everyone stays informed and aligned on all updates!
Following these practices helps ensure everyone is in sync and using the latest designs, keeping our work accurate and aligned. Thank you for helping maintain consistency across the project!
Other file creation tips
Other file creation tips
Page structure
Page structure
Click here for the default empty Figma file and duplicate it for your new project. Rename the project as needed.
or
Click here for an example project using this structure.
Use the pill button in the top left corner to mark what stage the file is in (Research, In design, Design review, Ready for development, In development, or Done). These are made into variants so simply change the instance of the button depending on what's appropriate
Add the client name as well as a detailed project tagline (ex: "Mellenger Interactive Blog page design and functionality")
Be sure to be updating the Quick Links frame as often as possible. Links housed here will usually be as follows:
Component Library
Typography
Colours
Exportable elements
Ready for development
Last client presentation
Static designs
Prototype
This is the page that will have all Frames and flows that are ready for the developers to start building. Everything on this page should be housed in a 'Marked for Dev' section and all notes/annotations should be in here. Ideally, the dev should be able to go through this page and completely understand how to build this without your explanation.
This is also where all exportable elements should be (images, specific icons in that frame/flow, etc). Place them in the frame marked "Exportable elements", name them, and mark them Ready for Export -> SVG.
This is where all fully fleshed out designs will live that we are getting feedback on from anyone. Be sure to put the date as shown: Iteration-1 [MM.DD] Each file will have a different number of Iteration pages.
These are the two pages used for styles and components. A few of the things that belong in each page are:
Styles
Font styles
Colour styles
Drop shadows
Layer blurs
Button styles
Logos
Components
Cards
Header
Footer
Sections
Icons
Tables
This is where to put all foundational research materials - user personas, site maps, empathy maps, competitive analysis, etc. If using FigJam for any of these processes, either provide the FigJam link or copy and paste all FigJam structures into this page.
This is only a page that designers should ever need to access. This is where all the actual building of frames takes place. Don't worry about keeping it organized or understandable - anything anyone else other than a designer will be looking at will be in either Iteration, Ready to Dev, or Client Presentation.
This is our 'archive' page so to speak. Instead of deleting previous ideas or work, always just move it to this page. That way, you or the client can always refer back to them.
This is where prototypes and prototype links are made for clients. This way, anyone on the team can go view the exact prototype you showed in the client presentation on any given date. Be sure to name the page with the date of the presentation: "[MM DD YYYY Client presentation].
This will also ensure that the links you provide the clients with the prototype will always work and never break. Be sure to update the 'Prototype' and 'Static designs' links in the Cover as often as needed.
Page updated
Report abuse