Figma to Volto workflows... anyone?

If you're already doing Figma to Volto I'd love to hear about it. Might save me reinventing the wheel.

What do you mean exactly with "Figma to Volto" workflows? At kitconcept, Sketch and Figma are used by our designers. Then our devs take the values from Sketch Cloud or Figma to implement the designs. Using Cloud solutions saves us having to send around design files and we have a "single source of truth", the "inspectors" help our developers to copy/paste the CSS styles. Figma does a way better job than Sketch in that regard.

There are people that try to do the full cycle with both Figma and Sketch. This allows generating React components out of your design tools. Even though this is a nice dream I personally don't buy this. I toyed around with some of those tools a while ago and I don't think this will ever make it into a productive workflow. I might be mistaken or too pessimistic here though.

As Victor wrote the other day, we are currently working on setting up a Design workflow for Plone 6 (Volto). The idea is that multiple designers can collaborate on Figma, and Plone core devs can pick up those designs.

If you are interested in the topic you should join us to implement the new Quanta UI. :slight_smile:

What I mean is Component generation from designs, I call it Approach 2 or CoGen below:

There are two approaches that I can describe:

Approach 1 - Extract values from the design (ExtractVal)
The approach you describe (single source of truth and taking values from the designs) is what I've seen in the wild.
Here's a video which discusses the approach.
Designing for code with Figma
I'd say that that video describes the best, most polished version of the ExtractVal approach.

Approach 2 - Component generation from the design (CoGen)
The idea of a full cycle requires that the designer understands some of the constraints of the code/implementation. Figma has features like auto-layout that can help to implement behaviours similar to the css box model, grids and flexbox.
There are efforts to use Figma's API to generate react components, even to generate output for storybook. I'm curious how far that can be taken.
You can look at React Figma, Overlay for Figma.

There is also PageDraw Project (now open source) which provides a Sketch/Figma-like UI for manipulating components.

I understand your pessimism about CoGen though.

Problems with CoGen
The CoGen way (Approach 2) has some important things to think about. Here are 2 that are apparent from my cursory research:

  1. What to do about imported components that are external to your system (ie. inherited from other sources). How do you represent them in your design file and have them interact with your layouts and have them "connect" properly with the resulting code?
  2. How to enforce WYSIWYM (what you see is what you mean) style layout in Figma. It requires a bit more discipline and knowledge (perhaps documented best practices). It's easy to layout something that looks like a button (in a WYSIWYG way) but can never be converted to a functional component.

Immediate thoughts about Approach 2 (CoGen)
If I were investigating the CoGen approach further here's what I would do.

  1. Look into the Figma API
  2. I would definitely want to see how the documentation capabilities, in conjunction with the API, might be used to share rich information about imports etc...

image
Screenshot showing the documentation capabilities in Figma

The Plone projects looking to do in the future would benefit from such a CoGen system. That said, I'm not on the right project at the moment to justify the investment of inventing/creating such a system.

Figma provides the tools for a complete design to prototype to code workflow. It has already been done with varying success.

I am but...
I apologise for being a bad open source citizen (bringing all of this up without the time or resources to contribute to making it happen). Perhaps my notes will nudge someone else in the implementation direction.