Over the years, we've hacked together several products, and to check if anyone cares, we released them for free on reddit.

In this post we'll be sharing the statistics from each released product, and a summary of all our learnings.

Interesting Statistics​

1. 51.3% of our traffic was mobile *
2. Performance for different media types:

• Video (41 upvotes/sub)
• Website (45 upvotes/sub)**
• Youtube Link (3 upvotes/sub)
• Text (1 upvote/sub)

* 51.3% is for all website visits, I suspect reddit users are even more likely to be mobile users
** While the website got more upvotes per sub, we only posted a website link once so results may not be accurate

Statistics​

Post content and descriptions​

Best practices​

Use videos when getting feedback​

Comparing the posts that included videos versus those that didnt, those with videos on average had more than 30 upvotes/sub each, whereas those without videos got less than 5 upvotes/sub

What we consider when making our videos:

1. Text large enough to view on mobile
2. Short ( < 2min )
3. Include subtitles

Make sure your post is mobile friendly​

Our ContenX analytics show the following results

Both your introduction video and product should work on mobile - otherwise, you're losing half your audience

Remove logins and only get feedback for free products​

Self advertising is a huge turnoff for redditors.

I believe that reddit as a platform should be used to test if people want your product, and not selling. If you want to get people's feedback, make it as accessible to everyone as possible.

Don't link to youtube, post direct video on reddit​

The time it takes for youtube to load, (especially on mobile), followed by any ads that your users may watch will cause significant churn in your funnel.

Don't use promotional language​

Imagine reading the following post on reddit:

Introducing ezpets: Bridging Pet Owners with Wholesale Accessory and Food Sellers!

Hey Redditors! 🐾 We're thrilled to unveil ezpets - a two-sided marketplace designed to connect passionate pet owners directly with top-notch wholesale sellers for pet accessories and food. Why pay retail when you can access quality products at wholesale prices? Dive in, discover, and let your furry friends enjoy the best without breaking the bank. Your feedback is invaluable to us. Check us out!

1. Shorten 'Introducing ezpets' to 'ezpets'
2. Remove the emoji
3. Remove words like 'thrilled' and 'unveil'
4. Remove exclamation marks
5. Rephrase the 'Why pay retail when you can...' with a more factual statement instead of trying to be attention grabbing

The easiest way to understand the mindset of redditors is to use reddit yourself - and try to imagine how you would feel coming across your own post in the wild

Make something people want​

Quite frankly, if you've made something people want, it will always be upvoted regardless of how poor your phrasing is.

For example figma to code tools - everyone loves them and there's been at least 5 seperate launches of figma to code tools on product hunt and all 5 of them were product of the day

Celebrate personal wins as part of the community​

If you've put in alot of effort into your product, don't be afraid to show it.

For example, if you've spent 4 months building something, you can make a post like

"I've spent the past 4 months building XXX"

If you're building something technical, don't be afraid to share the technical infrastructure, and if you've had some traction, share that too - posts with more details and sharing of knowledge tend to be upvoted more

Our biggest mistakes​

Posting the wrong link​

Our ContenX post did particularly poorly because... we posted the wrong link like the fools we are. (www.contentx.io instead of www.contenx.io)

We only found out 2 days later, when we got our first comment saying:

"Why does your link say please purchase the domain"?

Posting the wrong video​

For some reason our posts on building my portfolio website with our figma-to-code tool did reasonably well, but all the attached videos were accidentally cropped to be 2 seconds long.

If the videos were not cropped, they would probably be able to do alot better

Track click through​

You need to know exactly how each post is performing and be able to compare them - by using a different tracking link for each platform you post on, you can see how your posts performs

Conclusion

Alot of people find their first users on reddit - see this video. When posting on reddit you must really ensure that your phrasing is not overly dramatic and salesy, and make sure you provide value to the community - otherwise you'll be downvoted and most likely banned.

All the best!

Why ideate?​

Over the 2 years that we've been working on the Figma plugin, we've heard a lot of feedback and suggestions about how we could better integrate FireJet into their workflow. Now that we are at satisfactory level in terms of addressing our main feedback (i.e. code quality), we are ready to explore other our users' suggestions on full-on Figma-to-code integration.

Customer Needs​

We've been reaching out and talking to developers and designers for two weeks now. And we have some made some learnings:

1. For simple websites, teams may use a no-code tool, but for complex web apps, coding from scratch is necessary. This is an absolute requirement.
2. Designers prefer to use Figma for their design work regardless of the type of project they are working on.
3. Designers often experience friction between design and code when the final product created by the developer does not closely resemble their original design.
4. Developers often have limited flexibility to make UI changes for the designer as they are typically occupied with implementing core features.
5. Developers generally dislike meetings.
6. Smaller companies strongly insist on using Figma for design purposes.
7. As companies grow larger (after series B funding), they start utilizing their own design systems.
8. Changes to design systems are typically initiated at the beginning of projects during monthly client meetings or user interviews.
9. Changes to design systems often involve updating existing components rather than creating new ones from scratch.

User Profile​

In the design-to-code space, there are 3 parties affected. From our learnings, here are their needs:

Product Manager / CPO / etc​

PMs spend a lot of their budget on hiring frontend developers to convert designs into code. They will look for tools to accelerate this process for their developers, especially if it can accelerate their product development time and/or reduce their development cost. They also talk frequently to their clients and customers, who often request changes to the product during the development process. These changes have a need to be done immediately. As such here are their needs:

Designers​

Designers are the creative brain of the project. They need the flexibility of Figma to turn their inspiration into reality over the constraints of no-code builders. Also as mentioned earlier, the final product rarely looks like their initial design. This is a pain point. As such, here are their needs:

Developers​

The brawn of the project, developers are always busy. Their primary task for design-to-code is the manual process of converting Figma designs into frontend code. They have specific requirements on the code generated based off the exisiting technology (i.e. frameworks, language, coding practices) they use.

As such, here is a breakdown of their needs:

Possible Solutions​

Ideal Workflow​

The ideal workflow for users is: Figma ⇋ Code

People intuitively expect the code to be in sync with their designs. But Figma is a designer-first tool that was never built for code conversion. As such, we have to come up with creative ways to get past this barrier. We've come up with several workflows:

Workflow 1 - Figma as the source of truth​

Your Figma is completely synced with an auto-generated design system. Any changes made to Figma components are updated in your code. There is a Figma plugin interface to handle responsivenes, component props, behaviours, and design system documentation.

Main Value Proposition: Saves the developer time in maintaining the design system

Steps:​

1. Designer creates design system in Figma (like you would in any other Figma project)
2. Designer adds in responsivenes, component props, behaviours, and documentation via an interface
3. A documentation page is automatically generated for the design system at a URL (e.g. abc-design-system.com)
4. Developer imports components from design system into code (e.g. yarn add @abc-design-system)

Workflow 2 - Design system as the source of truth​

Your design system stays as it is. You are able to import your design system components into your Figma project. When the code is generated, the algorithm uses the code from the original design system. There is also a Figma plugin interface to decide the variant and properties you want to set before you import.

Main Value Proposition: Almost zero design-code leakage means less back and forth between designer and developer

Steps:​

1. Designer imports design system into Figma plugin
2. Designer drags and drops the exisiting components into Figma as they see fit
3. Developer generates code to use as they see fit

Workflow 3 - Design ⇋ Code Platform with Import from Figma​

A design and code platform where design and code are in sync. You can edit designs to change the code. You can edit code to change the design. You can also import designs from Figma. It's literally a Figma with a code editor. This actually already exisits as our second product that is in beta: FireJet Sync. We just need to fix the bugs.

Main Value Proposition: Zero design-code leakage (if you keep your designs on the platform) means no more back and forth between designer and developer

Workflow 4 - Figma ⇋ Code conversion API​

Conversion API for converting Figma designs into code and vice versa. Teams can built their own custom implementation of solving their specific design-to-code problems using the conversion API.

Main Value Proposition: Full-flexibility on solution implementation

Designing a website or app is one thing, but turning that design into a functional website or app is another. That's where FireJet comes in. FireJet is a Figma plugin that allows designers to easily turn their designs into code with just a few clicks.

I just started using the FireJet plugin for Figma and I'm blown away by how well it works

- Lasven

How FireJet Works​

FireJet works by taking the design created in Figma and exporting it into a code format that can be used in various web development frameworks. This means that designers can focus on creating beautiful designs in Figma, and then easily turn those designs into functional websites or apps.

Features of FireJet​

FireJet has a number of features that make it a powerful tool for designers and developers alike. Some of the key features include:

• Support HTML output, as well as popular web development frameworks like React and Vue.js
• Export styles as CSS, Tailwind or as a JSON
• Importing existing styles from Tailwind CSS configuration files
• Automatic fixing of designs to optimize for code conversion

Benefits of FireJet​

One of the biggest benefits of FireJet is that it saves time and simplifies the design-to-code process. Instead of spending hours manually translating a design into code, designers can use FireJet to automate the process and focus on other aspects of the project.

Additionally, FireJet can help ensure that the code generated from the design is clean, efficient, and optimized for performance. This can save developers time and effort down the line, as they won't have to spend as much time optimizing the code themselves.

Conclusion​

Overall, FireJet is a powerful tool for designers and developers who want to simplify the design-to-code process. With its intuitive interface, customizable code templates, and support for popular web development frameworks, FireJet makes it easy to turn Figma designs into functional websites and apps. If you're a designer looking to streamline your workflow, or a developer looking to save time on coding, FireJet is definitely worth checking out.

Overview​

This article compares the most popular Figma to Code plugins in the market, and aims provides a comparison between each of them to help you decide which is the best for you depending on your requirements.

Note that this article was written by FireJet, and while we tried to remain as unbiased as possible, our opinions on code quality may differ from yours.

To get an unbiased overview of output code quality and output pixel perfection, use the interactive comparison to compare different outputs for yourself.

Interactive Comparison -->
Testing Methodology -->
Full Comparison Table -->
Raw Data -->

Full Comparison Table​

Go to full breakdown

Interactive Comparison​

Toggle Fullscreen

Test CaseTest 1 (Calendar)Test 2 (Code Card)Test 3 (PUBG)Test 4 (Dropdown)Test 5 (Frog)Test 6 (Landing Page)

Original
Figma Design

FireJetDhiWiseAnimaFigma to CodeLocofyQuestBuilder.ioTeleport HQ

Error while using plugin:



See 'Output Image' for full image of error message

FireJetDhiWiseAnimaFigma to CodeLocofyQuestBuilder.ioTeleport HQ

Error while using plugin:



See 'Output Image' for full image of error message

Best Code Output (Tailwind)​

🥇 1st place: FireJet
🥈 2nd place: Locofy
🥉 3rd place: Dhiwise

🥇 FireJet​

Pixel Perfection Score :

🥈 Locofy​

Pixel Perfection Score :

🥉 Dhiwise​

Pixel Perfection Score :

Best Code Output (CSS)​

🥇 1st place: FireJet
🥈 2nd place: TeleportHQ
🥉 3rd place: Anima

🥇 FireJet​

Pixel Perfection Score :

🥈 TeleportHQ​

Pixel Perfection Score :

🥉 Anima​

Pixel Perfection Score :

Best Features​

🥇 1st place: Locofy
🥈 2nd place: Anima

🥇 Locofy​

Locofy has the best features for further enhancing code outputs

Features:

• Design Optimiser
• Sync with GitHub
• Direct deploy to github, netlify, vercel
• UI library tagging (MUI, etc)
• Use live storybook components

🥈 Anima​

Anima has the second best features for further enhancing code outputs

Features:

• Direct deploy to netlify, vercel, aws, firebase
• UI library tagging (MUI, etc)
• Use live storybook components

Best Free Plugins​

🥇 1st place: TeleportHQ (CSS) / Locofy (Tailwind)
🥈 2nd place: Dhiwise

🥇 TeleportHQ (CSS) / Locofy (Tailwind)​

See Best Code Output (CSS) and Best Code Output (Tailwind) for explanation

🥈 Dhiwise​

See Best Code Output (CSS) and Best Code Output (Tailwind) for explanation

Testing Methodology​

Test Cases​

We tested 6 different figma designs and converted them to code using the various plugins. The tested designs are examples of real world designs used in actual applications

The designs selected also had complex styles applied to them in Figma, which makes converting these particular test cases particularly challenging for Figma-to-Code tools

You may get better results when converting simple designs/designs that are fully autolayout which is a requirement for several of the plugins tested.

However, we picked these designs in particular because real world designs tend to be harder to convert than toy examples.

Raw Test Case Data -->

Usability Scoring​

Usability Scoring is a subjective comparison between how easy each Figma to Code plugin is to use. See the full rationale for the scoring here

Code Quality Scoring​

Code quality scoring was done through a subjective comparison between different output codes given the same figma design.

Eventually we hope to let users rank which is their favourite code output to reduce the bias for the code scoring.

You can compare code quality yourself with the interactive comparison ->

Pixel Perfection Scoring​

Pixel Perfection scoring was done by converting designs using each figma to code plugin, and rendering the output code to see how well it matched the original design.

Scores were awarded as follows:

The results from each test case was scored and summed to give a final result out of 6

You can compare pixel perfection yourself with the interactive comparison -->

We're a team of custom web application developers who thought our frontend development process could be streamlined. Here's our story.

Hey everyone! With the midpoint of 2022 just passing, we decided we should let our users know what's in store for them for the remainder of the year. To figure out what we should add next, we talked to many developers, and we greatly appreciate all the feedback you guys have given us thus far!

Hello everyone! It's been a hectic few months building feature after feature, and fixing bug after bug. Although we do post regular updates on new features and bug fixes on our changelog (which pops up for you on every new update), we thought we'd share the major ones on this blog post to summarize everything at one go. We'll try to update you guys with summaries every few months.