Make a copy of the design file before creating the prototype, optimise the file by removing and cleaning up unused layers, components… If you’re using hidden layers as different states of the component try creating variants instead. It’s very important that your prototype is super optimised especially for low-end devices. Our prototype had 80+ frames, believed that we had created a reasonably optimised prototype … But, during pilot usability tests on devices with low ram < 4GB, we found it very laggy, the scroll was choppy and the prototype started to crash. Optimise your prototype for better performance ![]() You will have to pay a lot of attention to this one. Note: Huge component libraries can make your prototypes slow especially on low-end devices, component sets with thousands of variants in them will contribute to significant memory usage. Updates to the design of your components can be published and pushed out to other documents where instances of your components live. This creates a shared library, that can be used across variations of the design/prototype. When you need multiple variations of the prototype and reuse components across files you can maintain shared components and styles by publishing them. They can then choose whether to update their instances to red. For example, if you change the color of a button component to red, and then publish those changes, any file that used instances of that button will get a notification. Once you make something a component, you can create an instance of it, which are essentially connected copies of that component-so if you update the design of the original component, the instances will reflect that change. Note: Make sure the Master component in the same file, This does not work if you’re dragging an instance of a component from a team library. Linking the prototype becomes super easy, you just have to link each menu item of that master component to the appropriate target and the tedious work of connecting each item with the frame multiple times is done for you magically.Īn additional advantage being, It will reuse the same assets which helps in performance optimisation of the prototype. Moving forward, any time you create an instance of the master component, all the connections will automatically connect. Once you’ve done that, link each menu item of that master component to the appropriate frame. Figma has a solution for this in terms of master components.įor example, You’re designing a navigation bar for the app, early in your process converting your navigation menu into a master component. ![]() The biggest productivity killer is having to link prototypes across frames and art-boards, this can be repetitive, boring and time-consuming. Set the export resolution to ensure optimised file size for faster loading for low-end devices.If you need to support android and ios you can use the artboard size to (360 X 640)px this will ensure the design will scale well when using long scroll design, however, in fixed-size layouts you will notice a black bar at the top and bottom of the prototype on large form factors which is still ok for prototype testing. ![]() Classic mistake designers do is realising this late in the project. When the experience needs to work for a range of devices ( especially in a country like India ), it’s important to design for the minimum form factor that needs to be supported and ensure the design scales well across all resolutions. In this article we are focussing on real world challenges we faced during the project and tips and tricks to improve overall productivity, most importantly how to optimise the prototypes for low-end devices.Īlways design for Minimum Common Denominator Provides tools to create slick animations/transitions without having to download third-party app plugins. ![]() The greatest advantage of Figma is, It is web-based and platform-independent. Figma is becoming a great tool for UX designers to quickly design, build prototypes and provide designer to developer hand-off.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |