Summary
Learn how to convert designs into codes with FUNCTION12.
What's FUNCTION12?
FUNCTION12 converts design into source codes automatically for developers and designers. So, the development team is not responsible for the basic code for UI. With the repetition of hand-coding for UI, more focus can be invested in business logic, data, API connect, features, and creativity.
Take advantage of FUNCTION12 to convert designs of Figma, Sketch, Adobe XD to source codes for UI.
Designers can check their designs rendered by automation and deliver them to the developers. Designers can decrease the time spent on making edits to their designs and communication with the developer.
You can learn all the information to start FUNCTION12 from this document.
FUNCTION12 Workspace
FUNCTION12 automatically analyzes the design's image, text, and groups. Select an element and export all the necessary sources from widgets, buttons, text box, list, and select-box to the desired source code or CSS to apply to your production right away.
To speed up your work.
With FUNCTION12, you can maximize the work efficiency by up to 10 times in the process of converting the UI from the designer into source codes.
FUNCTION12 design analysis engine will do its best to understand the designer's intention.
To cut the misunderstandings and conflicts.
FUNCTION12 will help both developers and designers to communicate better and collaborate to produce better.
All the features that developers love:
- Easy design sync with Figma link
- Loading hundreds of pages all at once
- Shortest design loading time
- Developer-friendly environment including Dock UI and dual monitor support
- No download needed, work directly from the web browser
- Globally-renowned design rendering system (Automatic design noise control)
- Automatic margin, padding, object layout detection
- Vectorizing, clip/overflow, background, layout type/settings, margin, padding, and entity size can all be edited with a single click
- Gizmo and real time preview of multiple screens provided for fast, easy workflow
- Codes with the support of different resolutions
- Full project export in a single click
- ...and many more exclusive features!
The guide is in the order below.
- 1.Basic workflow
- 2.Login and create the first project
- 3.Importing design file (Figma)
- 4.Features in the studio
- 5.Code export
Last modified 2mo ago