Justinmind developer UI workspace walkthrough
Justinmind’s developer-friendly interface makes your workflow faster and smooths designer-developer handoff. Here is an overview of the new developer interface and how to use it.
How to access the Justinmind developer interface
Before a developer can access the Justinmind developer interface, they will need to be added as a collaborator in your Justinmind online account. This will activate the developer-friendly interface for that user.
When you add a user as a developer, you will need to enter their email from your online account. They will receive an activation email with a link. This link will take them to Justinmind’s download page where they can input their details and download Justinmind.
Since the developer-friendly interface is read-only, developers only have the option of opening prototypes to view them. On the welcome screen, developers can open a prototype file or a shared prototype, as well as any recent files.
Justinmind user interface panels: what’s in them and what do they do?
As a developer, when you open Justinmind, you will see the default developer interface in front of you. The interface is made up of various panels and it is possible to re-arrange them to your own preference by dragging and dropping.
Screens, Templates and Masters
On the left you will find Screens, Templates and Masters.
Screens is where you will find the current screens within the prototype. You can switch between them easily by clicking.
Templates is where you will find all the templates in the prototype. Each prototype by default has a template. Normally you can use multiple templates in your prototypes, however, since the developer-friendly interface is read only, this is not necessary.
Next to Templates you will find Masters. Similar in nature to Templates, Masters can be dragged into a prototype and are used for applying global changes. Templates and Masters in the developer-friendly interface are useful for understanding the information architecture of a prototype.
Below the three panels is Outline. The content of the current screen is found in Outline. When you switch the screen view in Screens, the Outline will change to the content found within the selected screen.
Properties & CSS
The Properties panel is where the developer-friendly interface demonstrates its true power. When developers select a UI element in a prototype, they will find all the information pertaining to that element in the Properties panel. This includes general information such as name and template, and below that are the CSS properties including width, size, weight, color, font family and so on.
If you select a text widget, in the Properties panel you can find the value of that text widget (i.e what is the text) and it’s X and Y position on the canvas, as well as the angle.
You’ll also find CSS information in the Properties panel.
Quickly copy CSS styles and text
It’s possible to quickly copy text and CSS styles to your clipboard when you click on a UI element on the canvas. Use the ‘Copy CSS’ link.
Exporting assets in Justinmind
When your canvas contains a graphic element, you can quickly export this in just one click. Click on the element and on the right-hand side in the Properties panel, you will see an Assets section. From here you can export the graphic element in PNG or PNG@2X, which optimized for Retina.
Export documentation and HTML
Get documentation in no time. Under File > Export to Document. Here you can export the documentation you need in .docx. It’s possible to customize your document under Customize Document.
In the Customized Document window, it’s possible for developers to choose a destination folder for saving, change the filename of their prototype among other export configuration options including adding personalized logotypes and adding descriptions.
Under File > Export to HTML you can export the prototype in HTML. This will create a folder in your desired location with a HTML text file. The HTML text file will include everything you see on your canvas, as well as any Events that are included in the prototype.
3 time-saving features of the developer-friendly interface
The three main aspects of the developer-friendly user interface are the color picker, the exact distances and the properties tab.
1. Color picker. The color picker can be found below the main navigational menu, next to the search function. This can be used to select the color on the canvas and get the exact hex code you need for coding, copied straight to your clipboard.
2. Exact distances. When you hover over an element, you will be presented with the exact distances of that element from other elements on the canvas. The size of the element can be found in the Properties panel.
3. Comments and requirements in Simulation mode. Developers can simulate designs by simply clicking the large green ‘Simulate’ button, found at the top right-hand side of the user interface. Once in the simulation, developers can view any comments by activating the comment toggle button. The hamburger menu allows developers to see all the screens in the prototype as well as any requirements.
- Your online account: the basics
- Your online account settings
- Add users to your online account and create groups
- How to import account users from a CSV file
- Online account: Prototypes page
- Publish a prototype on your online account
- Reshare or replace an already published prototype
- Get a public link for your shared prototypes
- Password protect a shared prototype
- Invite reviewers to a shared prototype
- Review a prototype
- Integrate your prototypes with usability testing tools
- How to add developers to your prototyping workflow ( July 20, 2017 )
- Integration with Sketch ( April 25, 2017 )
- Handy keyboard shortcuts for prototyping with Justinmind ( March 29, 2017 )
- How to import account users from a CSV file ( February 7, 2017 )
- Justinmind’s integration with Microsoft Team Foundation Server (TFS) ( December 16, 2016 )
- Importing Sketch UI elements as SVG vector files into Justinmind ( November 18, 2016 )
- Justinmind’s integration with Atlassian Jira ( November 4, 2016 )
- Justinmind Prototyping Tool: Menus ( August 31, 2016 )
- Dynamic Content widgets for wireframing ( August 9, 2016 )
- Navigation UI widgets for wireframing ( August 5, 2016 )
- UI Container Elements for wireframing ( July 29, 2016 )
- How to embed Google Maps in your web and mobile wireframes ( July 11, 2016 )
- Wireframe template styles and fonts ( July 7, 2016 )
- Account Management – FAQs ( May 31, 2016 )
- Design tools for your prototypes: rulers, guides and grids ( April 29, 2016 )
- Your Justinmind Online Account ( April 28, 2016 )
- Introduction to Justinmind Prototyping tool ( April 6, 2016 )
- Input UI elements for your prototypes ( March 30, 2016 )
- How to create a document template with Microsoft Word: Examples ( March 24, 2016 )
- Advanced operations: creating a document template with Microsoft Word ( March 24, 2016 )
- Real App Prototyping
- API and SDK
- 3rd Party Integrations
- Forms and data lists
- The Workspace
- Dynamic Panels
- UI Elements and Libraries
- Reuse and Apply Global Changes
- Build an Interactive Wireframe
- Simulate and Export
- Share and Get Feedback
- Conditions and Variables
- Set Value and Calculations