#Balsamiq wireframes plugin manual
#Balsamiq wireframes plugin software

#Balsamiq wireframes plugin manual

Whilst this means that the linking of frames cannot be completely automated, the ability to check for the existence of a connection allowed for a 'wizard' mode to be created to make the manual creation of the links as quick and simple as possble. The API does however allow read-only access to the existing links of a given node. Unfortunately the Figma plugin (currently) does not support programatically creating links between nodes for navigation in 'prototype' mode. !(./././assets/images/-balsamiq_to_figma/balsamiq2figma.png) These are filled in a semi-transparent pinkish fill to match the default Balsamiq output. The plugin creates rectangles overlaid on the mockup frame in the positions and sizes of the interactive Balsamiq elements using data from the.

The plugin generates a figma frame for each mockup page, using the png screen output as its backgroundģ. The balsamiq2figma plugin performs the following steps:ġ. The result will be a visually identical output maintaining the simple click-based interactivity from the original mockup. If these images are imported as 'frames' within Figma, new click areas to link frames can programatically be created within Figma using the size and co-ordinates data from the Balsamiq database. However Balsamiq has the functionality to export static png images of each page of the wireframe. Recreating the UI elements used in Balsamiq and their distinctive 'sketchy' style within Figma would be a huge undertaking. Luckily we can open and query this database in web technologies using (). These are in fact just a () 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 ().īalsamiq desktop stores wireframes in *.bmpr* files. Another solution was required and so we turned to the Figma Plugin API in an attempt to import Balsamiq mockups into Figma.įigma allows the community to create () using web technologies to enhance and add new functionality to the app. 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 () testing* !(./././assets/images/-balsamiq_to_figma/useberry.png) Alongside tools such as () and (), we were fortunate to be able to utilise the dedicated user testing tools () and () 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 () and user testing was planned and conducted in person. # Remote Testing - Great for Figma, trickier for Balsamiq *Low and higher fidelity wireframes using Balsamiq (left) and Figma (right)* !(./././assets/images/-balsamiq_to_figma/wireframes.png) Later design stages have used () 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 () 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 plugin software

BGS Digital are leading the design and software development aspects of this multi-institute project. The () 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. Diff line -0,0 +1,76 'Importing Balsamiq wireframes into Figma, an experiment with the Figma plugin API'