1
9 Comments

Figma direct to code?

Can figma output be directly used in app development? e.g. flutter, react etc

I'm thinking of getting some design help on the UI and then putting the actual designs into production.

Appreciate any advice of better workflows.

    1. 1

      great resource, thanks. i'll give it a try.

  1. 1

    there are a few tools that do this, right?

  2. 1

    The official Figma API code examples will generate you some React code representing all the visual elements in your Figma file.
    The generated React example (not React Native) setup recursively goes through each Figma node and gives you some generated components in the React project it generates. After parsing and various steps, it ultimately generates some absolute positioned divs containing your pictures, vectors, etc. This type of absolute position setup is not really the best approach even if you want to do basic things such as responsive design, or centering something on 2 different size devices.
    For React Native you could do a lot of heavy modification for the React output example and actually change the generated divs to be React Native components that are appropriate (Text, Image, etc) although this would most likely be more work than just using the API raw data in your code.
    If you chose to use the raw API data, you would basically write your own code to generate and / or populate your React Native components. There are plenty of edge cases and Figma features that you would have to write from scratch if you wanted to properly support all the vast Figma functionality.
    Instead of this, a better approach might be to use "tokens" from within Figma. This is a movement that is gaining popularity and basically it involves the Figma designer creating a unique Figma component that might represent, for example, the primary color. The designer can change this token color in their Figma project and it will update across their whole Figma design for any colors designated to use the primary color. Then your Figma API call grabs only the tokens and you can then create a re-usable component or style component to use that token (color, shadow, icon, vector, button style, etc) in your app. But you still need to create the app as well as the API call and token components.
    Many design choices cannot be represented as tokens so this approach cannot turn a Figma design into code, but it might save time or provide organizational strucutre to how the design is implemented in building the code out.
    This is a topic of interest to me as well, please anyone reading add to or elaborate on anything I left out or didn't know about, yet! Cheers!

    1. 1

      Thank you very much for the very detailed info.

    2. 1

      Hey guys, we just started building that on Aptugo. We're expecting to have that feature done by September, then I wold love to share with you guys and get your feedback

      1. 1

        Just followed you, and Aptugo

  3. 1

    Check out design to code companies such as Visly, Anima, Avocado, and Supernova.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments