5/1/2023 0 Comments Figma statusAllows for stacking of elements, where auto layout will breakĪll similar content, like buttons, inputs, etc should be variants for state changes and alternative choices. In the example seen here, you see a 40px margin on the white frame, with a containing block holding the 2 rectangles, that containing block specifies 40px between. For example, if you need 40px between content blocks, control that on the parent level, not individually on each block. To keep spacing clean, try to only get to the spacing value you need in one rule. The best way to think about auto layout is the same way you'd think about divs in code - but, since you can only control one value per auto layout frame, consider it as only one instance of margin. Read more in Figma's Auto Layout article. It will make your work considerably easier when it comes to updating and making changes as spacing will all reflow based on what you have set. Use auto layout on components, and frames within your work. □ Best Practices Turtle Auto LayoutĪll design work should be making use of auto layout. Overall, this will avoid using outdated design work and reduce overhead later on. If you have someone maintaining and owning the library, then communicate with them clearly to make sure they are aware when work is ready to be published. If you make a change and it's finished, publish it. Do not let changes get out of hand without review. It's imperative to stay on top of publishing. So, be certain you are creating your styles in the library, or they will be essentially useless within a component. Styles unfortunately do not cut and copy over. Just be courteous with your naming to make sure appropriate nesting occurs. Styles are a lot less intrusive, you can effectively add them at any-point, with little to no design debt increase. As an example, buttons should be contained as one, and filter down logically.Naming rules will evolve over time in a project, that's okay. Each project is going to be different in naming but, as a rule, we want to break down components into a foldering structure that avoids having to ever go back within the same family. These are some examples of how to name styles and components. If you name things clearly, and apply descriptions, it becomes considerably easier for folks to find what they are looking for. See Figma's Best Practice Article for greater detail on all things components and styles within libraries.īe descriptive with your naming, applying assets to a file in Figma can be quite the search adventure. Make sure all styles and components are in the library.Ī helpful tip if you have created components directly in your working file, you can cut them and it will re-path everything for you once you paste into the library. What Goes Into A LibraryĪs soon as you leave explorations and into production work, make a library - no styles should ever live locally beyond this point. This could look differently depending on each project but, once visual design has been decided on, a library is a must.Some projects will have a heavy wireframe phase, you can expect to start making a library once a functional direction is met. Further instructions are within the □ library.Ī good practice is to create a library, and actively add to it as soon as design leaves an exploration phase upon client approval, into a production phase. If the file is a library, add the link icon. Update the blue turtle with the clients logo, change the name of the project, and add the name of the file. A file should be clear about what it contains, without having to search through it. User Flows (Could be a separate file, or a page in an associated file)Īvoid non descriptive names, name things with the assumption that the audience is greater than just yourself. Files should also be created for cleanliness purposes. Each distinct phase of a project should have its own files. In the project space, be sure to name files in relevant ways. Projects at Turtle are going to take on different shapes but, the guidance below we can use to make it easier for all designers involved. Most projects at Turtle will encompass one of the release or feature focused approaches but, it's good to be aware of how this could spawn into even greater detail depending on clients, especially for long term work. Opposed to a hybrid that suits all best, with one direction. This would be prevalent in a more native based design project where the client wants to maintain standards for each platform. You could expect to have four files or more, one for each device, a shared global library, and depending on complexity, libraries for each device type. For example, if we're designing a product for iOS, Android, and Web. An additional element to this is with multi-faceted products.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |