Can you cut a web budget in half by skipping development entirely? When the Migration Museum asked us to build their new homepage using Figma’s publishing tool, we were intrigued to see if a zero-code launch could meet agency standards.
The Migration Museum has helped share people’s stories and bring communities together through a series of vibrant exhibits and events, including successful exhibitions and campaigns we were proud to support. The Heart of the Nation exhibition, which was forced online during the Covid lockdowns, became an engaging online experience telling the stories of NHS staff. And the Football Moves People campaign during the last World Cup edited migrants out of England’s starting lineup to highlight how migration has shaped the game.
Recently finishing a five-year residency within the Lewisham Shopping Centre, the Migration Museum is planning a new permanent home in the centre of London. Looking to build support and backing for the project, they wanted to create a new front page to their website to better communicate their aims and successes.
When they asked us to use Figma’s new website publishing tool to produce this homepage, we were cautious yet intrigued by the possibilities, and eager to offer our support.
The challenge
Without the budget or time to commit to a full website redesign, the museum had initially planned to design the new front page themselves and self-publish using a DIY website builder. However, reconsidering the value a design team brings, they proposed that we take on the design – but asked if we could halve the costs by removing the development stage entirely and rely on the recently released Figma Sites tool to publish the page.
At Eight Arms, we pride ourselves on the quality of our development, as well as the reliability and security of the websites we build, so handing this over to an automated system was a worrying prospect. But with a willing client and a plan to test thoroughly, it felt like the perfect opportunity to trial what Figma Sites could offer.
Since we already use Figma for our design work, our process followed its usual rhythm: discussing the brief, listening to the client’s aims, researching comparable sites, and exploring concepts and styles. However, to avoid any surprises down the line, we also ran continuous tests to ensure that everything we envisioned was actually possible within Figma Sites.
What it can do
A page you design – and draw flat – can be replicated exactly in a browser just as it appears in your Figma preview. Images and videos pose no problems, text appears in your exact brand fonts, and you can easily set content and alt tags for accessibility. Furthermore, the ability to set elements to respond to browser dimensions means you can create a broadly responsive website.
Moving from finished designs to a published website is also just one click away (well, you publish to a Figma host, so there are still domain names to connect up). Still, the act of pressing publish couldn’t be easier. We started testing early, and I’ve lost track of how many times I ran the process. Once live, you can take that URL and view the site across any device or location just like any other website.
What it can’t do
While you can quickly get a flat design onto the world wide web, there are many things you expect a modern website to do that are simply not straightforward here.
To save you from getting a developer involved, Figma has added a clever but troublesome AI layer that allows you to add coded elements – like carousels or interactive features – simply by prompting for them. While the speed of this is brilliant, it isn’t fully integrated. An interactive carousel we designed worked brilliantly at a fixed size, but failed to adapt to responsive changes in font size.
Crucially, once an element of your design has gone through this AI wizardry, you can no longer make direct changes to it – not even a text change. We quickly learned to keep duplicates of all pre-AI elements and copies of our prompts so results could be repeated if needed. Ultimately, we chose to compromise on the carousels, dropping what would have worked best for the user and instead laying all items out flat on the page.
The most obvious omission, however, was the inability to easily create a navigation bar that collapses into a burger menu at smaller screen sizes. We did manage to set this up, but only by rigging our own workaround using a system of hiding and revealing elements.
Could a developer have done it better?
By far. A developer creates a website without restriction and compromise, bringing their own refinement to the design, deep knowledge of usability, and all with a fraction of the lines of code. But they certainly couldn’t do it as fast.
What about a CMS?
Figma Sites does offer its own content management system. It connects with your site to dynamically add and edit content within your design. If you are only making a very small or single-page site, the level of management it offers is helpful for quick text changes and image swaps.
When might it be right for you?
Figma Sites can’t yet act as a replacement for the typical briefs we receive through the door. But it is a viable option for the jobs that don’t normally reach an agency – the ones considered too small or low-budget to hire a team for. The ability to turn a flat canvas into a responsive webpage offers exciting new opportunities for quick-to-press campaign pages, online pitch decks, event promotions, or student portfolios.
What is most exciting is that, even without an understanding of web development, you can publish a design and it can be live within a minute of finalising the layout. It is fascinating to imagine what can be built when the only barrier to entry is a couple of days of design time.
