What is the best practice for integrating Anima, Figma, and a custom UI library efficiently

Designer Topics Figma
1

Hello everyone! We’re building a marketplace using Vue Storefront as our frontend platform, which has its own UI library and design system based on Tailwind. As we’re focused on developing an MVP quickly, we plan to leverage Vue Storefront’s UI components instead of coding everything from scratch.

We use Figma for design and want to incorporate Anima to speed up the Figma-to-code process. What are the best practices for integrating Anima, Figma, and Vue Storefront’s UI library effectively? We want to ensure a seamless transition from Figma designs to code while utilizing the pre-built UI components.

We’ve devised a method: using Anima to convert only the layout and structure from Figma, and manually adding Vue Storefront components afterward. What are your thoughts on this approach? We’d appreciate any insights or suggestions. Thank you!

2

Hey @Hunter thanks for reaching out! As far as importing open source code, for the time being, we are only importing React components, from Storybook into Figma - if this is helpful for you, we definitely suggest you give it a try! Otherwise it sounds like the method you’re trying for Vue Storefront is your best option :slight_smile:

Let us know how you go!