I’m curious about how do you guys handle the complexity and maintainability of converting a Figma design , with its design system, to a Gutenberg experience.
Imagine a Figma Design System with :
* some “text styles” (which are preset that glue together font-family, font-size, font-weight, letter-spacing, line-height, text-trasnform)
* some “color styles”
* button with 4-5 variants
Then Imagine that in Figma you created all the website pages using these design system things to stay consistent.
Now it’s time to convert to a WordPress Gutenberg system. The system can be used both on a FSE approach and Hybrid approach, so also PHP templates should have an “easy” way to consume the design system, the same as the Post/Site Editor.
So for example:
* Do you mainly use core featueres, like theme.json to expose design tokens, and core block until you can? Or go directly with alternative Gutenberg Builders (Kadence, Cwickly,…) ? Or all custom coded blocks (native or ACF) , recreating also a custom version of Image, Paragraph, Heading, Button, Group … ?
* How do you implement a system that lets you apply a “text style” when writing a piece of text? (core doesn’t have a text styles equivalent, it has only separate CSS properties that must be chosen every time, super time-consuming to refractor when text styles updates in Figma!) Do you use custom coded solution? Or plugin solution?
* How do you keep the system synced and maintainable both in Gutenberg side and PHP side? Mainly for CPT archive/single template…
* Do you disable core Gutenberg CSS and rewrite your own also for core blocks to avoid fighting against it ?
* Do you do something unique you’d like to share?
​
This question has an open spectrum, so any experience’s tale is valuable and welcomed, even if it touches unquestioned topics…
**How do you handle the complexity?**
What you didn’t know in the early days of Gutenberg adoption in custom websites that now you know is a fundamental factor to consider when planning the implementation phase?
**Thanks in advance for your time to reading this.**
​
[ad_2]