Skip to main content

· 8 min read
Philip Wee

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

PostUpvotes/SubUpvotesCommentsViewsTypeNo. Subs Posted in
Figma to Code6578342Video12
Automatic best practices in figma5611214Video2
Figma to Tailwind4631949Video7
No Code Web App Builder with export to tech stack459015Website Link2
FJ Sync (Before building)3313215Video4
FJ Sync (After building)336522Video2
Generate portfolio website1710021Video6
ezbackend3164Youtube Link6
Tweak (2nd Round) (Removed login and forms)23255195Text2
Tweak (1st Round)127938Text2
ContenX1121241Text2

Post content and descriptions

See more
PostTitleDescription
Figma to CodeI made a Figma to React+TS converter focused on human-readable code, responsiveness and pixel perfection [TOOL]https://packaged-media.redd.it/774przpba4r81/pb/m2-res_480p.mp4?m=DASHPlaylist.mpd&v=1&e=1694516400&s=8f43d9ddd9a8ca5e075af49639a9ba17f66f9387#t=0
Automatic best practices in figmaAutomatically Enforcing Best Practices in Figmahttps://www.reddit.com/r/FigmaDesign/comments/w2tkqx/automatically_enforcing_best_practices_in_figma/
Figma to TailwindI’m making a Figma to Tailwind converter focused on human readable code, responsiveness and pixel perfectionhttps://packaged-media.redd.it/r3cuf8psmf191/pb/m2-res_480p.mp4?m=DASHPlaylist.mpd&v=1&e=1694516400&s=ae2f7b10aa91a9a54cf6df589cd036e321e89671#t=0
No Code Web App Builder with export to tech stackHey everyone! I'm making a No-Code WebApp Builder with Code-Exports to your tech stack of choicewww.firejet.io
FJ Sync (Before building)I’m making a Design Tool that allows designers to directly update your code with a Figma-like UIhttps://packaged-media.redd.it/l3jjpsyp3kw91/pb/m2-res_480p.mp4?m=DASHPlaylist.mpd&v=1&e=1694516400&s=fda7b6e7b4420e0ad6380cc0c59feb5a9213cc07#t=0
FJ Sync (After building)My friend and I spent the last 4 months building a figma alternative that exports to React + Tailwindcss
https://packaged-media.redd.it/fb33pexb0ria1/pb/m2-res_480p.mp4?m=DASHPlaylist.mpd&v=1&e=1694516400&s=8de4bafd0dc637150e7539f2cdb84dbec6b37646#t=0
Generate portfolio website[TOOL] I’m making a Figma to TailwindCSS converter, and I generated my portfolio website with ithttps://packaged-media.redd.it/33u9vk9n27691/pb/m2-res_480p.mp4?m=DASHPlaylist.mpd&v=1&e=1694520000&s=d020a178140a2a26401a017a99fb4762b14755f9#t=0
ezbackendEzBackend - How to build a backend in 4 minshttps://youtube.com/watch?v=kQRRckdEFr8&feature=share
Tweak (2nd Round) (Removed login and forms)What's wrong with my app?Hey everyone, I launched my app here a while back to try get feedback, but I didnt really manage to get any feedback

Ive removed all forms and logins, so it goes straight to the app's main page

Any feedback would be appreciated! Thank you https://tweak.firejet.io/session
Tweak (1st Round)Looking for feedback on no-code editor for coded sitesHey everyone, my name is Philip. My friend and I have been working on a no code editor that can:

Edit coded websites (For now react + tailwind)

Update website copy

Make small design changes, like colors

Submit a pull request to developers based on the changes made

Its currently completely free, and we’re hoping that it will be able to save you time and effort on back and forths with your developers. If you have any feedback, it will be really valuable to us. Thanks!

https://www.firejet.io/tweak-get-started
ContenXRoast my Side ProjectHey everyone, I made a free tool (No login required) that helps convert your content to match the writing styles required for various social media platforms like LinkedIn and Twitter

For example if you already post on reddit, you can repurpose your content for other social media platforms

Any feedback, good or bad will be appreciated! Thank you

www.contenx.io

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

DevicePercentageTotal
Mobile51.3%121
Desktop48.3%114
Tablet0.4%1

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!

The promotional - sounding language in the above post is highly likely to get readers turned off and get you outright banned from several subreddits.
Here are some improvements I can think of:
  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

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!


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· 5 min read
Stephen Alvin

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.

I won't say the list above is completely true, and I may have made mistakes in my observation of the market space. Feel free to reach out to me if you feel differently!

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:

📦 Product Manager🎨 Designer⌨️ Developer
Save time and cost of developmentNew tools must be in FigmaResponsive and readable code
Make changes to product easilyFinal code must render pixel-perfect with respect to their initial designFramework agnostic

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


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· 2 min read
Stephen Alvin

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.


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· 8 min read
Philip Wee

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

FireJetLocofyTeleportHQBuilder.ioQuestAnimaDhiwiseFigma To Code
Code quality (/5) Full Data->
4
3
2
0
2
2
3
1
Pixel perfection (/6)
Full Data->
5.25
3.25
3.75
0
2.75
3.25
1.5
1.5
User Experience (/5)
Full Data->
4
3
4
2
3
1
3
5
Price per month38USD - 2 week trial3 week beta trialFree - 1 projectFree58USD - 2 week trial39USDFreeFree
FrameworksReact, Vue, HTML, Raw JSONReact, HTML, Next, Gatsby, React NativeReact, HTML, Vue, Angular, Raw JSONReact, Gatsby, Next JSReact, NextReact, Vue, HTMLReact, Flutter, Andriod, iOSFlutter, HTML, SwiftUI
StylingCSS, TailwindCSS, CSS Modules, Tailwind, Inline styles,CSS, CSS Modules, Inline styles, Styled components, Styled JSX, React JSSCSS, Tailwind, Styled JSX, Styled components, EmotionStyled componentsCSSTailwindTailwind
Integrations-GitHub, AdobeXDGitHub, Vercel, Netlify, No-code builderHeadless CMSGitHub-No-code builder-

Interactive Comparison

Toggle Fullscreen
Original
Figma Design

Best Code Output (Tailwind)

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

🥇 FireJet

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Components from Figma are preserved in codeText styles can be further segemented to reduce the number of leading-[normal] styles
Output code is in flexbox even when the figma design does not use autolayoutSometimes extra styles are not combined, such as border radii
Minimal repeated tailwind styles
Output design matches the original design the best
Single file output option if you don't wish to use components

🥈 Locofy

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Well structured code if original design follows strict guidelines from locofyOutput design does not match original well
If the original design does not use absolute layout, the final result will be absolute positioned (Unless using Locofy AI autofixer)
No Component support
Unable to convert 1/6 test cases

🥉 Dhiwise

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Good use of flexboxOutput design does not match original well
Unable to convert more complicated designs
Unable to convert 2/6 test cases
Missing certain parts of output

Best Code Output (CSS)

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

🥇 FireJet

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Components from Figma are preserved in codeText styles can be further segemented to reduce the number of leading:normal styles
Output code is in flexbox even when the figma design does not use autolayoutSometimes extra styles are not combined
Output design matches the original figma design the best

🥈 TeleportHQ

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Good use of CSS variables to minimise repeat stylesComponents are not supported
Shared CSS classes for textIf the original design does not use absolute layout, the final result will be absolute positioned
For React output, uses dangerouslySetInnerHTML when not required
Outputted design does not match the original design well

🥉 Anima

Pixel Perfection Score :

/ 6

✨Code Quality Pros💀Code Quality Cons:
Components from Figma are preserved in codeAlot of props are passed for components (Sometimes 30+) which makes the code unreadable
Good use of flexboxUnable to export Groups
Shared CSS classes for textOutputted design does not match the original design well
Unable to convert 2 / 6 test cases

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:

ScoreDescription
0Unable to convert the design due to plugin limitation
0.25Output design is so different from original that coding from scratch would be easier
0.5Significant effort required to make output design match original
0.75Little effort required to make output design match original, mostly just single elements with incorrect styles
1Pixel Perfect outputs, no noticable differences

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 -->


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· One min read
Stephen Alvin

firejet founders

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


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· 3 min read
Stephen Alvin

roadmap

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!


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023

· 5 min read
Stephen Alvin

july-updates

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.


Hey there! We're a small team of hackers building tools to make life easier for everyone. It would mean the world to us if you try them out! Thank you!
Last updated 12/9/2023