Milton
Milton is a Figma plugin that allows designers to export frames into responsive HTML.
Inspired by the AI2HTML plugin for Adobe Illustrator, Milton’s aim is to simplify the workflow of initial design through to website embed.
Why we built Milton
Things move quickly in a newsroom environment, breaking stories, last minute developments all mean its important designs can easily be updated. Amends to text and images are relatively straightforward but custom embeds usually require developer involvement which can slow the process.
Our article templates contain core elements like lead assets, headlines and body copy. However, there are occasions where words and images require supporting graphics to give readers a more comprehensive take on a situation, that’s the role custom-embeds fill.
Embeds need to combine text and graphics in a responsive way, one which appears appropriate for the device viewing it, e.g. A condensed vertical bar chart on mobile that expands to a horizontal version on desktop. That level of responsive design typically required a designer to work with a developer, creating breakpoints that transition from one design to another.
Wouldn’t it be great, we thought, if there was a way that designers could create and release custom embeds themselves without any developer involvement.
Some of our designers were already using Adobe Illustrator with AI2HTML to create embeds, but there are several issues with that workflow that we aimed to fix with this project.
Scale. Designers were not creating artwork in situ. This lead to graphics that felt out of proportion when seen in the context of an article page
Consistency. Designers were not able to easily lean on the rules that were being set out in our ever-expanding design system
Performance. The final output was unnecessarily heavy and added to page load
Filing. Artwork was often stored in multiple locations and could not be found and updated efficiently.
Could a Figma plugin be the solution?
What is a Figma plugin?
Plugins are third-party apps that extend the functionality of Figma. They allow you to customize your experience and create more efficient workflows.
Some of our designers and developers had already moved across to Figma, taking advantage of advanced feature sets and easier collaboration.
From a technical perspective, a Figma plugin is similar to a standard iframe on a website. The plugin iframe can communicate with the Figma document and access the functionality a normal user can. The plugin can grab frames, group them and export them into any format we need.
By using Figam frames as breakpoints it would be possible to export designs that respond to a browser window’s width while controlling the file size of the generated HTML for optimized performance.
Proof of concept to production ready
A Proof of concept (POC) was created to explore the plugin API and ensure it was possible to generate HTML that would work for our needs. With the POC validating our initial tests, it was on to build the real thing.
There are many components that form an average HTML embed so it was important to have a comprehensive test suite to ensure the generated HTML matched the Figma designs. Typography, element alignment and image compression were some of the more challenging aspects of the development process.
The export is a single block of HTML that contains everything needed to be displayed in a webpage including all images, this allows the export to be copied directly to the clipboard and pasted into a CMS.
A fresh coat of paint
While the finishing touches were being added to the code, the rudimentary UI design was updated to keep inline with Figma’s design system. By following the look and feel of the Figma UI allowed the plugin to feel more intuitive and easier to understand.
Result
After many internal iterations we finally had version one of the plugin. Designers can use the plugin to export selected frames from Figma and embed them directly on the site via our CMS, all without the involvement of a developer.
With the plugin live internally, it began being used in articles such as an Interview with the Duchess of York and The World’s most expensive rehab.
One small but important inclusion in the exported HTML is a link back to the original Figma document. While seemingly a trivial addition it has been indispensable, allowing other designers to locate the source document, make amends and re-export embeds.
This is just the first version of Milton and there are many additions planned for the future.
