These are in fact just a SQLite database which contains (amongst other things) the various pages of the wireframe and the co-ordinates and sizes of the controls on each wireframe page. There are various sandboxing and security hurdles which are beyond the scope of this post but can be found in their documentation.īalsamiq desktop stores wireframes in. The balsamiq2figma Pluginįigma allows the community to create plugins using web technologies to enhance and add new functionality to the app. Another solution was required and so we turned to the Figma Plugin API in an attempt to import Balsamiq mockups into Figma. Useberry allows you to create wireframe flows by uploading and linking individual images via the web UI but this is impractical for wireframes of any decent size or where frequent changes and iterations are expected. We were reluctant to give up on Balsamiq due to both the existing time investment in building wireframes and the buy-in and acceptance of this approach from stakeholders and the wider project team. Tools such as Useberry allow direct importing of Figma prototypes into online tests via the Figma API but there are not equivalent workflows for wireframes built using Balsamiq. Insights into user flows through the application from Useberry testing Alongside tools such as Zoom and Miro, we were fortunate to be able to utilise the dedicated user testing tools Usability Hub and Useberry to test how users might flow and navigate through the system However the lockdowns and cessation of travel in 2020 meant remote methods had to be employed. In the early stages of the project, the majority of the co-design and user testing was planned and conducted in person. Low and higher fidelity wireframes using Balsamiq (left) and Figma (right) Remote Testing - Great for Figma, trickier for Balsamiq Later design stages have used Figma to produce higher fidelity mock-ups ready for implementation by the front-end development team. These wireframes are quick to produce and easy to test and iterate on user journeys without getting caught up on details of colour schemes, fonts, imagery etc. In the early stages of the system design, we have made extensive use of Balsamiq as a tool for producing low-fidelity wireframes to mock-up the user flow and navigation through the tool. This post describes a proof of concept Figma plugin which was developed to aid the developer workflow when developing and testing wireframes and application mockups.
BALSAMIQ WIREFRAMES FOR DESKTOP SOFTWARE
BGS Digital are leading the design and software development aspects of this multi-institute project. The Micronutrient Action Policy Support (MAPS) project aims to produce a web-hosted decision support tool to allow users to estimate micronutrient deficiencies in Sub-Saharan African nations and explore pathways to improve nutrition. Importing Balsamiq wireframes into Figma, an experiment with the Figma plugin API
0 kommentar(er)
