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

FUNCTION12

Get code just copy and paste

Do you use FUNCTION12?

Review FUNCTION12?

Reviews of FUNCTION12