FUNCTION12

Name: FUNCTION12
Rating: 4.0 (2 reviews)

Get code just copy and paste

4.0•2 reviews•

1.6K followers

Get code just copy and paste

4.0•2 reviews•

1.6K followers

Automation tools

•

Figma Plugins

•

UI frameworks

Design-to-code automation solution that converts Figma designs into front-end view code

Free Options

Launch tags:Productivity•Software Engineering•Developer Tools

Launch Team

AdaptYour company brain. AI that thinks + acts across your stack.

Promoted

Congrats on the launch @shawn_park_f12 ! Seems so cool. How is this different from other Figma-to-code tools or plugins?

Report

3yr ago

FUNCTION12

Maker

@markus_sigel Hey Markus, thank you so much! What’s special about FUNCTION12 is that we interpret and translate the design file to the most development-optimized layout and code. So, when importing and loading your designs to FUNCTION12, the engine is going through its own analysis. Therefore, you don’t have to designate any layout or components as it is done automatically. But, of course, you can make edits which will be applied to the page and code preview!

Report

3yr ago

FUNCTION12

Maker

@markus_sigel Thank you so much for your interest :)

Report

3yr ago

@growth_lead_function12 reat! Do you have example templates that users can test?

Report

3yr ago

FUNCTION12

Maker

@growth_lead_function12 @markus_sigel Yup, we have sample designs on our website and you can see the full analysis with framework code, preview, and making edits that get updated in real-time. Please check it out and let us know what you think! 😄

Report

3yr ago

Interesting. How is function12 better than avocode or similar existing figma/adobe extensions? Best of luck on the launch!

Report

3yr ago

FUNCTION12

Maker

@kevin_cleo Thank you so much!

Report

3yr ago

FUNCTION12

Maker

@kevin_cleo Hey Kevin, thank you so much! What sets FUNCTION12 apart from other tools is how our engine analyzes and translates the design into development-optimized codes, not copying and pasting it into pixels. Therefore, the codes are provided in rem and absolute-free. Moreover, because our tool analyzes the design, you don't have to tag or define any objects but is completely automated. But you can also edit the automated results as well. Lastly, the loading and exporting speed is very fast compared to other tools, since time is of the essence! Please check out FUNCTION12 and if you have any questions, let me know anytime!

Report

3yr ago

FUNCTION12

Maker

@kevin_cleo Hi Kevin, @shawn_park_f12 explained well on our key differentiator points. If you have more questions, please feel free to share them to us.

Report

3yr ago

Crowdcast

Looks great! Question: If I update the design in Figma, does it auto-update the canvas/code in Function12?

Report

3yr ago

FUNCTION12

Maker

@saidurh Hey Sai! Great question! For now, you have to import again when there's an update on Figma, but we're working on the feature to be able to check what's been updated and whether the developer wants to sync the update to FUNCTION12😄

Report

3yr ago

FUNCTION12

Maker

@saidurh Thanks!!

Report

3yr ago

Would you recommend FUNCTION12 to a friend who is looking for a tool that can help automate their design work?

Report

3yr ago

FUNCTION12

Maker

@ramandeep_ramarayane Hey Ramandeep! FUNCTION12 is to automate the process of turning designs into codes, so I don't think recommending our tool to 'automate design work' would be appropriate, but checking the design's structure, layout, object, and an overall sketch of how it would be coded can be advised! Is your friend a designer?

Report

3yr ago

FUNCTION12

Maker

@ramandeep_ramarayane Thank you for your interest!

Report

3yr ago

Congrats nice work!! Do you think it's important to be proficient in both design and coding when using a design-to-code automation tool?

Report

3yr ago

FUNCTION12

Maker

@ramesh_kumar20 Hey Ramesh! It's definitely a plus if you have knowledge of designs and especially coding since you can edit the automatically analyzed results from the FUNCTION12 engine. But it's definitely not a must! The algorithm can actually help you by producing development-optimized codes, so if you're new to frontend coding, it might be a nice helper for you 😄

Report

3yr ago

FUNCTION12

Maker

@ramesh_kumar20 Thanks buddy!!

Report

3yr ago

FUNCTION12

Maker

Hey hunters and makers! I’m Shawn from the FUNCTION12 team and beyond happy and excited to introduce our design-to-code automation tool to the Product Hunt community that will help your design get translated into codes in a second. Why we started🙌 Luke, our CTO, and I started working together way back ago and since then, we always had this thought back in our head: "By cutting the time spent on repetitive hand-coding, it would save us so much time to focus on other priorities." That's why we started FUNCTION12. Not only to save our time but also the hours took away from numerous developers around the world. One of the examples that show our dedication to cutting time spent in UI coding is how exported codes in FUNCTION12 are in rem and absolute-free. Although will be dealt with below, such features and dedications have led us in the initial front-end coding test to decrease the time spent on building a mobile screen from 6 hours to 16 minutes with our solution. Now, it’s time for you to enjoy this innovation! What’s special about FUNCTION12🧑‍💻 FUNCTION12’s engine translates the designs to production-level codes by not just copying and pasting the designs, but by understanding and translating the designs to code. Our engine analyzes and finds the intention of the designs and produces previews and codes that are optimized for development. This is why we use the expression, ‘translated design to code’ as we provide codes, which are rem-based and absolute-free. Our tool is solely developed with the aspiration of automating the hand-coding repetition for developers based on our experience. However, our goal is not only to automate the boring part of your work but also to lead to better products with our help. So if you are a front-end developer who feels eager to work smarter as Luke and I did, FUNCTION12 is for you. What we’ve built so far👌 🔗 Insert Figma URL and the project is immediately started with various previews and codes instantly provided. ⚙️ Development-optimized layouts translated and produced from FUNCTION12’s own design engine and algorithm. 🔎 ’Canvas’ to view pages loaded from Figma project all at once ⚙️ Customizable dock UI for personalized IDE to work efficiently by creating your own workspace 🧑‍💻 Code framework preview in the selected framework with real-time updates for any edits made 🧑‍💻 Visual container layout inspector to view columns, rows, absolutes, and non-grouped objects at once. 🧑‍💻 Automatically analyzed and changed hierarchies based on the FUNCTION12 engine’s development optimization. 🧑‍💻 A visual debugger, Gizmo, provides CSS style visualization by displaying the object and the group’s margin, padding, absolute, and grid. 🧑‍💻 Define and edit objects without coding, but with simple clicks from the top menu to change any results from FUNCTION12’s engine. 🔎 Real-time previews for screens, codes, and container elements before exporting. 📥 Fastest full project download in the selected framework. What’s coming next👇 🤝Data binding 🖧Algorithm improvement 👨‍👩‍👧‍👧Team collaboration 🤖Figma to React, React Native 📚UI component library Once again, we are very excited to be able to share FUNCTION12 with the hunters and makers here! Please feel free to share any feedback or questions you have for me or our team! Also, we are offering a major discount in gratitude for the Product Hunt launch where the monthly subscription plan is $1 and the yearly is $10 only this month! (You’ll be surprised when you check the original price 👀)

Report

3yr ago

@shawn_park_f12 🔥🔥🔥🔥🔥🔥🔥

Report

3yr ago

FUNCTION12

Maker

@gunnydodo Next time we will make sure you give us more fires 🤣

Report

3yr ago

@shawn_park_f12 Awesome idea! Congrats on the launch!! 😄👍

Report

3yr ago

FUNCTION12

Maker

@martin_lee9 Thank you so much Martin! 😁

Report

3yr ago

FUNCTION12

Maker

@gunnydodo Thank you so much!!

Report

3yr ago

Such a great concept and product! It seems to be a wonderful way to simplify implementing great UI and ultimately creating awesome websites. Great job, team @shawn_park_f12 @junie @martin2_lee @san_kang @growth_lead_function12 @chloe_lim_6v6 @kelly_lee5 @luke_park. Best of luck with the launch. Looking forward to seeing this platform evolve into something even bigger and better!

Report

3yr ago

FUNCTION12

Maker

@junie @martin2_lee @san_kang @growth_lead_function12 @chloe_lim_6v6 @kelly_lee5 @luke_park @livia_burbulea Thank you so much Livia! Our team has been, and will continuously work our best to provide the best design-to-code tool. Please let us know if you have any questions or feedback! Thank you again!

Report

3yr ago

FUNCTION12

Maker

@livia_burbulea Thank you so much!

Report

3yr ago

FUNCTION12

Maker

@livia_burbulea We will strive to meet your expectation! We have planned a series of updates to come in months to come. You may follow us to get the latest updates.

Report

3yr ago

@junie @martin2_lee @san_kang @growth_lead_function12 @chloe_lim_6v6 @kelly_lee5 @luke_park @shawn_park_f12 I will let you know, thanks a lot! :)

Report

3yr ago

@growth_lead_function12 my pleasure! :)

Report

3yr ago

1 2 3

•••

4.0

Based on 2 reviews

Review FUNCTION12?

FUNCTION12 is praised for its ability to streamline the design-to-code process, making it a valuable tool for front-end engineers. Users appreciate its simplicity and effectiveness in converting Figma designs into code that can be easily copied and pasted. However, some users have encountered issues with the payment gateway, which has hindered their ability to upgrade. Overall, FUNCTION12 is seen as a practical solution for developers looking to enhance their workflow efficiency.

Summarized with AI

Reviews

Most Informative

FUNCTION12

Get code just copy and paste

Get code just copy and paste

What needs improvement

What needs improvement