How to go from Figma to code with Plasmic?

Developer Support
1

Hey Team,

What is the best flow or sequence of steps to accomplish the following (or is it even possible w plasmic):

The first step is to design in figma and/or in plasmic.
The last step is to save the css in a database.

I’ve been trying to construct a solution where I make a few clicks from figma, the styles would be sent to my server where I clean/organize the code before saving to db but this is getting quite complicated given figmas api.

Just remembered that Plasmic could have the solution all along!

2

Hi @nervous_tick, you can just paste your design from Figma and grab the code from one of the plasmic APIs - let me know if that helps

3

Hey Yang! Hmm so just to be clear, once I get the design into plasmic (or if i create the design straight from plasmic) I am able to programmatically fetch the code in my app using either headless or codegen? Is there an API you recommend for my use-case?

4

Exactly - headless API is simpler than codegen and probably better suited for your case (I wasn’t really sure what you meant by saving just the css, since that by itself isn’t meaningful), but you can try and explore either path

5

First off, really appreciate the help!

Allow me to elaborate a little bit.

A section of my app will be generated on demand/at runtime, and the styles for these dynamically created components/UI-elements will be coming from the database. This is mainly due to the fact that there can be an infinite number of various components. When initially thinking about this problem a few months ago, I remember trying plasmic to fetch these components at runtime which would work too, however, the performance was a bit lacking for my use-case. It’s been several months since I tackled this problem so my memory is a bit lacking here.

My current solution (which is quite tedious):

  1. Design in Figma using best practices
  2. Copy the styles from Figmas inspect panel
  3. Paste it into my editor and into an object where I then run a function that organizes and maps these styles to a specific format before sending it off to my db.
  4. When an end user lands on the “dynamic” page, the page/components are created with styled-components, and the style definitions inside the styled-components come from the db
    Would codegen be better in this use-case or perhaps something else altogether? If you see a better process, please oh please let me know!
6

Depends on how you intend to consume the generated code

If you want some generated HTML/CSS/JS (optional) that is minified, production-ready, and ready-to-render, use the HTML REST API

If you want React/CSS that is minified, production-ready, and ready-to-render, use the React loader API

If you want to generate human-editable React, CSS or CSS Modules (as if you’re about to store it as primary source in git), use codegen

Re: codegen performance: were you using published version or preview mode? Published versions are uploaded to Cloudfront and don’t involve Plasmic’s servers anymore, so that’s about as fast as it’s going to get from our end.

7

Once i design in plasmic, I simply want the outputted CSS. Ideally, it would be through an API call from my nextjs code so I can programmatically do things with it

8

codegen seems to be the way to go

9

regarding performance, I dont believe i used code gen, not sure. I think it was some client side generation at runtime

10

is it possible to do something like this

fetchPlasmic.then(plasmic => {
   const {stylesObject} = plasmic;
   console.log(stylesObject) // "display: flex"
//...
})