{"id":3638,"date":"2021-09-30T00:00:00","date_gmt":"2021-09-30T00:00:00","guid":{"rendered":"https:\/\/staging.azafinance.com\/2021\/09\/30\/how-to-improve-the-ux-of-your-file-organisation-in-figma\/"},"modified":"2024-09-26T07:29:41","modified_gmt":"2024-09-26T07:29:41","slug":"how-to-improve-the-ux-of-your-file-organisation-in-figma","status":"publish","type":"post","link":"https:\/\/azafinance.com\/how-to-improve-the-ux-of-your-file-organisation-in-figma\/","title":{"rendered":"How to improve the UX of your file organisation in Figma","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Over a year ago, our design team was just two people: <a href=\"https:\/\/medium.com\/@cjjharries\" target=\"_blank\" rel=\"noopener\">Christian<\/a> and I, and while we worked as primary design owners for specific products, we were always collaborating on feature designs across these products. Our typical design process started with problem definition <\/span><i><span style=\"font-weight: 400;\">[Google Docs and Confluence]<\/span><\/i><span style=\"font-weight: 400;\"> and then research + ideation <\/span><i><span style=\"font-weight: 400;\">[Zoom, Sheets, and Balsamiq]<\/span><\/i><span style=\"font-weight: 400;\">\u00a0before we proceed to visual and experience design <\/span><i><span style=\"font-weight: 400;\">[Sketch and Invision]<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As the design team grew to five members, we discovered that some approaches were no longer scalable. We needed a more collaborative tool to hand-off projects as well as for prototyping.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hence, we made the decision to switch from Sketch to <a href=\"http:\/\/www.figma.com\" target=\"_blank\" rel=\"noopener\">Figma<\/a>. Figma checked all of our requirements on paper, but at the same time, it presented new challenges in communicating processes and navigating files created over time.<\/span><i><span style=\"font-weight: 400;\">\u00a0<\/span><\/i><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Our Figma files are accessed by several teams in the company from product, to marketing, to engineering, all with their own requirements: <\/span><b>As a front-end developer,<\/b><span style=\"font-weight: 400;\"> I want to see approved high-fidelity designs. How can I navigate to the edge cases and prototypes directly?<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>As a product designer,<\/b><span style=\"font-weight: 400;\"> I want to see what design iterations are available. How can I access previous product design decisions?<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>As a product manager,<\/b><span style=\"font-weight: 400;\"> I want to see what status the design deliverables are being created by the team..<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">I came across more questions in my quest for answers:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><i><span style=\"font-weight: 400;\">When is it proper to create a new Figma file?\u00a0<\/span><\/i><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><i><span style=\"font-weight: 400;\">How should we handle the differentiation between design propositions and the version that shipped?\u00a0<\/span><\/i><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><i><span style=\"font-weight: 400;\">Can we have a uniform naming strategy for files &gt; pages &gt; layers\/elements?<\/span><\/i><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Our journey was filled with triumphs, mistakes, and learnings. Through all of that, we found a solution that worked for us. Here is what we recommend for any growing team that is looking to scale its processes.<\/span><\/p>\n<p><b>Project Cover Template<\/b><\/p>\n<p><span style=\"font-weight: 400;\">After attending a couple of design workshops, reading a tonne of Medium posts, and thinking generally about our use case and current process, it became apparent that an idea worth considering was that of a <\/span><b>project cover template.<\/b><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone  wp-image-8434\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-300x155.png\" alt=\"Project-Cover-Template\" width=\"619\" height=\"320\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-300x155.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-1024x530.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-768x398.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-1536x796.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Project-Cover-Template-2048x1061.png 2048w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/p>\n<p><b>What is a project cover template?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">A project cover template is a thumbnail with five key data points about any Figma file:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Design status<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u200a\u2014\u200aongoing, approved, handed-off, shipped<\/span><\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone  wp-image-8436\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-300x39.png\" alt=\"Design-status\" width=\"746\" height=\"97\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-300x39.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-1024x132.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-768x99.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-1536x199.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Design-status-2048x265.png 2048w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Project title<\/b><span style=\"font-weight: 400;\">\u200a\u2014\u200afeature name in a way that corresponds with a design or development ticket<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Jira number\u200a<\/b><span style=\"font-weight: 400;\">\u2014\u200aa design and\/or development ticket<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Team members<\/b><span style=\"font-weight: 400;\">\u200a\u2014\u200adesigners working on the file<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Key personnel\u200a<\/b><span style=\"font-weight: 400;\">\u2014\u200ausually the primary product manager leading the feature\/ticket<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Setting up a project cover template will not only offer your team a quick overview, but will also make it easier to find the file you\u2019re looking for in the grid view of a Figma project. A simple setup can save you and your team precious time that would otherwise be spent on looking for the right file.<\/span><\/p>\n<h3><b>File organization<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Once you have set up your project cover template, it is also important to consider how to\u00a0 better manage your file organization within Figma\u2019 here\u2019s our recommendation:<\/span><\/p>\n<h4><img decoding=\"async\" class=\"alignnone  wp-image-8437\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Screenshot-2021-10-01-at-08.55.21-300x140.png\" alt=\"file-organisation\n\" width=\"628\" height=\"293\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Screenshot-2021-10-01-at-08.55.21-300x140.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Screenshot-2021-10-01-at-08.55.21-1024x478.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Screenshot-2021-10-01-at-08.55.21-768x358.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Screenshot-2021-10-01-at-08.55.21.png 1228w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/h4>\n<h4><b>Projects ( Organization)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Create a new project for each product under the company\u2019s portfolio. Product, in this case, ranges from an internal admin dashboard to front-facing web apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pinned at the top of each project dashboard will be:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-8438\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard-300x66.png\" alt=\"Pinned-at-the-top-of-each-project-dashboard\" width=\"659\" height=\"145\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard-300x66.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard-1024x226.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard-768x170.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard-1536x339.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pinned-at-the-top-of-each-project-dashboard.png 1694w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Project Cover Template<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Project Master File [single source of truth]\u200a\u2014this should sync with what exists on the production. Separating this master file from ticket files makes it easier to locate the latest designs.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This pinned structure also allows for easy access to the master file and ticket template, as both are always at the top of each project.\u00a0<\/span><\/p>\n<h4><b>Files (\u2286 Project)<\/b><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-8439\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project-300x113.png\" alt=\"Files-\u2286-Project\" width=\"579\" height=\"218\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project-300x113.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project-1024x386.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project-768x290.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project-1536x580.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Files-\u2286-Project.png 1638w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/p>\n<p><b>Create a new file for each product feature or design ticket.<\/b><span style=\"font-weight: 400;\"> Each file should start with the project cover template. As described earlier, this should only carry high-level information like the project name, team, and design status.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The file naming convention typically follows this pattern [status] Feature name [platform] e.g <\/span><i><span style=\"font-weight: 400;\">Transaction Notifications [Email]<\/span><\/i><span style=\"font-weight: 400;\"> to show that the file houses the transaction notifications feature for email and the status is ongoing.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create only one file per design feature in a way that aligns with your ticket system. Every ticket should only contain the relevant design<\/span><\/li>\n<\/ul>\n<h4><b>Pages (\u2286 File)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Within each file, clearly label every page to show: Cover, Final Design, Edge cases, Archive e.t.c.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-8440\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-300x116.png\" alt=\"Pages-\u2286-File\" width=\"631\" height=\"244\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-300x116.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-1024x397.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-768x298.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-1536x596.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/Pages-\u2286-File-2048x794.png 2048w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what each of these mean:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Cover:<\/b><span style=\"font-weight: 400;\"> where the project cover template lives<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Final Design:<\/b><span style=\"font-weight: 400;\"> the approved designs that will go into production. After exploring options and vetting designs in internal design critique sessions, this is where we suggest your final recommendations should live, along with user flows, redlines, and such. It is also highly recommended that the designs here leverage your design system components.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Edge Cases:<\/b><span style=\"font-weight: 400;\"> On some complex projects, you can add an edge cases page that contains additional states and edge cases, such as: filled vs empty forms, empty states, error states, specific languages or geographies, different user tiers, logged-in status.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Archive:<\/b><span style=\"font-weight: 400;\"> Use the archive for any designs or pages that didn\u2019t cut. The designs that do not make the cut for each exploration within a ticket file typically live here.\u00a0<\/span><\/li>\n<\/ul>\n<h4><b>Layers (\u2286 Page)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">It is advisable here to name layers as much as possible since the final UI is what gets handed off to engineering. While there\u2019s no strict naming convention for exportable assets, try to speak a common language and use consistent naming in design documentation.<\/span><\/p>\n<h3><b>What it looks like<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">This is a sample screenshot from our Admin project page in Figma:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-8441\" src=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-300x173.png\" alt=\"What-it-looks-like\" width=\"531\" height=\"306\" srcset=\"https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-300x173.png 300w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-1024x590.png 1024w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-768x443.png 768w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-1536x885.png 1536w, https:\/\/azafinance.com\/wp-content\/uploads\/2021\/09\/What-it-looks-like-2048x1180.png 2048w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">All of our process changes are open to adaptation, either because the process wasn\u2019t necessary to begin with, or it needed to be streamlined further. With the project cover template, we are still learning and implementing small, constant iterations to further improve on this process we\u2019ve started.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The pillar of good design is great communication. As Designers within a product environment, it is important to take some time to solve the UX issues you have with your team workflows. This exercise will help you create, align, and contribute your best work.<\/span><\/p>\n<p><strong>Written By:<\/strong><br \/>\nOluwatobi Akindunjoye<br \/>\nProduct Designer, Lagos<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>Over a year ago, our design team was just two people: Christian and I, and while we worked as primary design owners for specific products, we were always collaborating on feature designs across these products. Our typical design process started with problem definition [Google Docs and Confluence] and then research + ideation [Zoom, Sheets, and [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":8333,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21],"tags":[442,443,423],"class_list":["post-3638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-file-organisation","tag-product-design","tag-user-experience"],"acf":[],"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/posts\/3638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/comments?post=3638"}],"version-history":[{"count":0,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/posts\/3638\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/media\/8333"}],"wp:attachment":[{"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/media?parent=3638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/categories?post=3638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azafinance.com\/wp-json\/wp\/v2\/tags?post=3638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}