Easiest way to move a design system to Plasmic.

[aihe_team]

I’m trying to move our design system from Figma to Plasmic.

Has anyone done this before? Any suggestions or tricks about how to do this effectively?

[jason]

Try using the Figma importer! After a component is imported, you’ll likely need to make a few changes to make it responsive.

[aihe_team]

hi @jason thank you for the response! So just to clarify, each component would need to be imported individually?

We are using loader, so the components requiring logic would best be registered then imported?

[jason]

@aihe_team

So just to clarify, each component would need to be imported individually?

Correct, each component would be imported individually.

@aihe_team

We are using loader, so the components requiring logic would best be registered then imported?

It should not matter whether you are using loader or codegen. You could import the visual design of a component in Plasmic, then add code/logic to it via prop overrides.

[aihe_team]

Hi @jason

Thank you again.

Checked out the prop overrides page. I am very grateful. I haven’t had the time to read about Figma importer page nor to watch the videos.

Some follow up:

1. Am I correct in assuming that we can only override props through our code base?
2. To override props do we simply ‘call’ the component or do we have to run plasmic sync first as I saw in Asim’s Whatsapp video to sync the visual designs to the local code base then do something as follows (assuming we imported a component called ‘Button’):

<PlasmicComponent
  component={'Button'}
  componentProps={{
    root: {
      props: {
        onClick: () => alert('I got clicked!')
      }
    }
  }}
/>

[jason]

@aihe_team

1. Am I correct in assuming that we can only override props through our code base?

Yes, override props only happens in code. That said, once you have your components in Plasmic Studio, you can edit them however you want–styling, interactions, etc. The override props are for extra functionality you need that you can’t easily add in Studio (e.g. complex logic).

@aihe_team

2. To override props do we simply ‘call’ the component or do we have to run plasmic sync first as I saw in Asim’s Whatsapp video to sync the visual designs to the local code base then do something as follows (assuming we imported a component called ‘Button’):

There are 2 ways to use Plasmic: loader and codegen. See the difference here: Headless API vs. Codegen | Learn Plasmic

Your code sample is correct for loader. When using loader, there’s no need to run plasmic sync. You only need to press the Publish button in Studio.