Figma to Magento
Magento theming is heavier than theming on most platforms. A single product page is assembled from dozens of blocks declared in layout XML across many modules, and a new design has to be threaded through all of them.
We build Magento 2 themes from Figma files, for Magento Open Source and Adobe Commerce. The first question is never about colours. It is which front-end stack the theme will sit on, because that decides cost, speed and which extensions keep working.
Hyvä and Luma compared
Both produce a working shop. They differ in how much JavaScript the customer downloads and how much existing code can be reused.
Luma and its child themes
The stock front end: LESS stylesheets, RequireJS, Knockout and jQuery widgets. Nearly every extension supports it. Pages carry a lot of script.
Hyvä
A replacement front end written with Tailwind CSS and Alpine.js. Templates are rewritten and the old script stack is removed, so pages are much lighter.
Extension compatibility
An extension with its own front-end templates needs a Hyvä version or a compatibility module. We list your extensions and check each one first.
Checkout
The stock checkout is a Knockout application. On Hyvä it is either kept through a fallback or replaced with a separate checkout product. This is a budget line of its own.
How a design is applied to Magento
Core files are never edited. The theme overrides them from its own directory.
Theme inheritance
The new theme declares a parent in theme.xml and overrides only the files that differ. Everything else falls through to the parent.
Layout XML
Blocks are moved, removed or added with layout instructions. Moving the reviews summary under the price is one line of XML, not a template edit.
Templates
The .phtml files that output markup are overridden where the HTML itself must change. Output is escaped with the escaper Magento provides.
View models
Where a template needs data, a view model supplies it. Logic stays out of the template.
Styles
On Hyvä, Figma variables feed the Tailwind configuration. On Luma, they become LESS variables in the theme.
Editable content
CMS blocks and Page Builder content types are styled so merchandisers can build landing pages in the admin.
Stages of a theme build
Investigation first, because surprises in Magento are expensive.
Module audit
We list installed modules, note which output front-end code and check their support for the chosen base. The estimate follows this.
Baseline measurement
Home, category, product and cart pages are measured for weight and load time on the current site.
Theme build on staging
Global styles and header first, then category, product, cart, account and checkout.
Comparison
Staging pages are compared with the Figma frames at the agreed breakpoints, using your catalogue. Differences are listed for you to accept or have fixed.
Second measurement
The same pages are measured again and both sets of numbers are reported.
What a Magento design file has to cover
Product types multiply the number of frames needed.
- Simple, configurable, bundle and grouped product pages, as used
- Layered navigation with many filters applied
- Tier prices, special prices and out-of-stock labels
- Mini cart, cart page and each checkout step
- Customer account: orders, addresses, wish list
- Store and currency switchers, if there are several store views
- Error messages and success notices
- Transactional email header and footer
Performance and practicalities
Will a new theme make the shop fast?
It reduces what the browser has to download and run. Server response time depends on hosting, full page cache, Varnish and the catalogue, which are outside the theme. We measure and report both.
Can you restyle without changing the base?
Yes. A Luma child theme can take a new design. It will look new and weigh about the same.
What about upgrades?
Because the theme overrides and does not edit core, Magento upgrades apply normally. Overridden templates are reviewed against the new version at each upgrade.
Do you work on Adobe Commerce cloud hosting?
Yes, through your repository and its deployment pipeline. Accounts stay in your name.
Send the design and the module list
Share the Figma file, your Magento version and the list of installed extensions. We reply within one business day.