How to use Figma as a headless WordPress
May 13, 2022 by Rich Kurtzman, Brand Communications @ Fathym
WordPress is widely regarded as one of the most popular content management systems in the world.
In fact, as of late 2021, WordPress powered 35% of the top 1 million websites in the world. And around 25% of all websites, period.
Why is it so popular?
First, it’s free to download and use. However, if you want to customize it, WordPress does charge a fee for some of their templates and plug-ins. Especially the best ones.
Beyond being free, WordPress’s ubiquity means if you’re a content creator on the internet, you’ve probably used it before.
And if you haven’t, that’s no problem because it’s extremely user-friendly. Plus, it’s versatile enough to not only work as a great as a blog, but for many different possible projects.
Downsides to WordPress
However, there are serious downsides to using WordPress.
One is security simply because it’s so popular. The logic used by hackers is, if it’s popular, it makes more sense to figure out how to hack inside. Then, once discovered, the process can be repeated.
Another downside is that WordPress sites have slow download times. That means the audience is waiting for the site to load and could become disinterested and leave. Their use of redundant code and heavy themes certainly hurt their sites’ speeds.
Finally, the necessity of plugins is a third drawback. Using many plugins at once will result in lethargic loading times. On top of that, many crucial plugins are only accessible by paying a yearly subscription fee. That means your “free” site is now much more to operate a year.
Solution: Headless WordPress with Figma and deploy with Fathym
Figma is a collaborative design tool which allows a wide variety of professionals to work together on a project. As explained on their website,
“We genuinely believe that hearing everyone’s input and representing their opinions results in more thoughtfully-designed products, so we encourage collaboration at all stages of the development process.”
A project can include a user interface, for a website, let’s say. Exactly what’s front of mind for developers. The approach Figma takes is inherently inclusive and collaborative, which are part of our shared values at Fathym. We can dig it.
So, let’s dig into how Figma, FireJet and Fathym can work together to stand up your site.
Ease of use
What’s wonderful about Figma right off the bat is how easy and intuitive it is to use. If you’ve ever used a whiteboard and drawn notes and pictures with a team; it’s just like that.
Except better. Way better.
Because it’s all online, it bridges the physical gap between teammates. It encourages teamwork, leaving groups with generally better outcomes.
“The ease of use is great,” frontend engineer Jack Penhale said of the platform. “It’s very beginner friendly.”
Due to that ease of use, anyone in the organization can get to work collaborating, sharing their insight and ideas.
Design first, develop second
The end goal of a User Interface is for it to be user-friendly, exciting and fun!
So, why not start there and work backwards? That’s what Figma has done.
Now, everyone from the designers to marketers and even developers or the CEO can get in on the fun and help show off what their vision might be. What’s so nice about the collaboration model is, considering how specialized some companies are, one may be surprised where the best ideas come from.
Maybe it’s that backend engineer who is shy and introverted. Or it’s imaginable your marketing person has a rough idea of an overall design, and then a group of folks help to refine it all into the finished product.
In the world of making things which appeal to the greatest number of people possible, teamwork makes the dream work.
On top of all that, Figma allows you to test out that new site, the design flow and even find some “pain points” along the way before deploying. That way, developers know what to look for when they’re putting up the site on the back end.
And it can save time in terms of development. Because all the decision-makers are together, they can sign off and come to an agreement on the design before sending it to the engineers to implement it all on the back end.
For instance, engineer Jack Penhale spent multiple hours on a design for a project, only to be asked to change that up. “Instead, teams can throw ideas up in Figma in 20-30 minutes and agree on something awesome,” he explained.
Starting with the design first inherently means the look, feel and functionality of the app is seen, contributed to and signed off by those decision-makers. It also means taking a more finished and refined product live for customer feedback, which is of a higher quality.
Build in your browser
Another positive of Figma is there’s no download needed.
A developer – content creator, CTO or HR person – can run Figma right in the browser, for free, and it runs sensationally smoothly, too.
Not having to download an additional program also means not having to run another program simultaneously, and it keeps everything located in one place, in the browser.
As Jack explained, he prefers it to a competitor’s creative platform because it didn’t need to be downloaded, it’s free and having everything linked to his Google account is, “Way more convenient.”
Of course, the bigger the team, that ease of jumping onto the website and starting to design immediately becomes a time-saver exponentially.
FireJet
Like one of those magic rings you get in a cereal box to be like James Bond, Firejet is Figma’s asset decoder.
It turns your beautiful design work in the UI back into code. That’s flipping the process on its head a bit, which is what makes it so special.
FireJet explains on their website, “We're a team of custom web application developers who thought our process could be streamlined. So we started building an internal tool. Thus, we came up with FireJet.”
They focus on turning that user experience, which was brilliantly designed in Figma, into what they call “human-readable code.”
“Understand easily and make changes to exported code hassle-free,” their website explains.
“Sometimes, the computer puts things into code but it’s a mess,” frontend engineer Jack Penhale explained of typical code, as opposed to “human-readable.”
He's talking pages and pages of code, undecipherable by even the most well-trained developer. At least, not quickly, and maybe not at all.
FireJet’s code – which is easily read, and therefore easily changed/fixed if need be – is converted into React JavaScript.
And that’s good news! ReactJs is one of the most popular JavaScript frameworks (libraries) out there meaning many developers already have working knowledge and experience with it.
But again, one doesn’t have to be a developer to stand a website up. Not anymore. Using FireJet creates a no-code work flow for Figma.
Just as the way Figma has worked to make design approachable by anyone, we at Fathym strive to do the same with website development.
Use your Figma frontend for your WordPress backend
Now you can still use WordPress to input all the written content of your blog, but display it with the otherworldly design that you created in Figma. Using our micro frontends, you can simply jump in and run your blog’s “head” from a route, and connect it on the back end to your WordPress using APIs.
Join Fathym
We invite you to join Fathym today for free and give our Social UI and micro frontends a try.