Coming Soon Fn12 Code Gen and Lifetime Free Dev Mode!
Dev Mode Plus function12

Translate design into code

Upgrade Your Coding Experience and Productivity Now

available frameworks and languages
input sign

Take a tour of FUNCTION12 Workspace

Check Our Latest Walkthrough Videos

Our Coming Soon Features

By 2023 Q2

Figma-to-React, React Native, Vue

You will be able to convert your Figma design files into React.JS, React Native code or Vue.JS code in FUNCTION12 workspace.

By 2023 Q2

Auto Component Detection

Within FUNCTION12 workspace, you will be able to identify common UI components by mouse hover on the component, and apply edits in one component to other common components at once.

By 2023 Q2

Project Dashboard

FUNCTION12 workspace will feature a dashboard whereby users can see the summarized list of recent activities that have happened within the project.

By 2023 Q2

Figma Design Update Sync

Any changes in the original Figma design will be listed with one click and you can choose which to apply.

By 2023 Q2

Preview Deployment

The preview of the product on Git repository will be deployed within FUNCTION12 to share with your team members or external stakeholders.

By 2023 Q2

Project Activities and Design History Tracker

All the activities happened in projects and Figma designs will be trackable in FUNCTION12.

By 2023 Q2

UI Library for Components, Tokens, Assets

Upon Figma design import, FUNCTION12 will automatically provide the design system that organizes the UI library that consists of components, tokens, and assets included in the project.

🌎 Trusted by 10,000+ Users

Frequently Asked Questions

  • Is there a guide or a user manual? more
    • From the Homepage or Studio Main, you can find FUNCTION12 Tutorials. A full guide on each studio and UI is listed, so please check it out when working on FUNCTION12.
    • For inquiries or references regarding FUNCTION12, please check our FAQ. You can find various questions and their answers. If you can’t find the answer to your inquiries or have feedback you wish to share, please leave them on Contact us. The FUNCTION12 customer service is waiting for you!
    • For tips to better use FUNCTION12, please check out User Guide or Blog. You will be able to make the most out of FUNCTION12!
  • I wish to test out FUNCTION12. more

    You can test out FUNCTION12 without any signing up for FUNCTION12 or creating Figma designs. Just create a Figma account and click one of our sample designs. You will be able to explore a new world of development right away. If you already have your own Figma design, simply copy and paste your Figma project URL and insert it into the URL box located on the FUNCTION12 homepage. You can check out how your design is structured and what source code it can bring within a few seconds.

  • What are the supported frameworks? more

    For now, FUNCTION12 supports Flutter and HTML(and CSS). By logging into FUNCTION12, you can download the source code in both Flutter and HTML(and CSS) immediately. Vue, React will be supported in 2023, so please be excited! Additionally, only SCSS is available for now, but we are also in preparation to support different styles of codes along with various frameworks.

  • The design has been updated. Do I need to work all over again on FUNCTION12? more

    Below is the response to your inquiry. Although it is in FUNCTION12’s plan to create a workflow for development teams to work on designs even after updates, for now, the developer must import the updated design, download the code, and manually export only the updated code for now. We will be improving the performance with a feature that allows automatic detection for the edited design, let the developer know which part has been updated, and have developer choose whether to apply the update