🗒️ Maker Log is a series that captures the concerns of FUNCTION12 makers behind the development of features.
This episode will cover the reviews and thoughts of our CEO, Shawn Park, regarding features released in 2022 and planned for 2023. He will share his motivation, thoughts on the direction of development, and what pain points he was trying to solve with the features.
The following is a transcript of an interview with Shawn Park.
Q. Recently, FUNCTION12 pivoted its direction to be a front-end UI coding assistant tool from design to code. What are the reasons behind this pivoting?
FUNCTION12 is a service to help front-end developers be more productive. Design-to-code is part of the picture we envisioned, and it's an important core technology of FUNCTION12.
We don't want to simply provide code only, but to understand what front-end developers do and provide a service that makes it easier, faster, and more innovative.
There are many steps in the process that developers go through: wrestling with design, producing component and structural code, and testing to ensure the quality of the code. Each step is a tedious, time-consuming, invisible task for developers that largely consumes their efforts and creativity.
Understanding this issue, we wanted to help front-end developers by facilitating them to analyze the designed screens lightly and quickly and making the configuration of components more comfortable and easy, reducing the time to write development code, and avoiding stress over changing designs.
Design-to-Code was the basic necessary technology to transform design deliverables into the necessary development kit for front-end development, so we started off with design-to-code. But now our solution will be part of every step that front-end developers take: Viewing, understanding, coding, and finalizing UI designs.
We don't want to be a service that produces code for developers, but rather a service that helps developers produce code and accelerates it with ease.
Q. There may be those who don’t know what exactly is Design-to-Code. Please kindly share with me what is Design-to-Code and your thoughts about the technology.
Design-to-code is a technology that analyzes and interprets designs created in design tools such as Figma and converts them into code for the user's preferred platform and format.
The technology can be divided into different levels, ranging from a simple conversion of the design to code as it appears in the design, to a conversion that analyzes and interprets the design to create code that is close to the code written by the developer.
The keyword that needs attention here is “close to the code written by the developer”. When a developer writes code, they go through the process of writing the view code including:
- Deciding which repeatedly used parts need to be defined as components
- Setting the components’ properties
- Creating the components
- Applying components across all screens to look the same as the original UI design.
Good design-to-code technology includes:
- Turning components and design tokens in design tools into components and design tokens in code
- Synchronizing well with design tools to automatically find and convert undefined components and design tokens, and switch back and forth between component-based code and design.
Thus, if these design-to-code features are available, the connectivity between design and code can be increased, leading to an increase in the productivity of converting the design into code.
What will be the main features of FUNCTION12 after the pivoting?
The main features that we will provide include the following:
- Design to Code As mentioned above, this is a system for converting the design to code, including navigating and converting undefined components in Figma. This will make it easier to convert the design to code for the entire project based on design tokens and components and makes front-end development tasks more productive.
- Design System Documentation This is a system that will provide a design system as a document automatically upon design import for quick and easy access to view and re-use components and other UI design elements. It will detect and organize the components identified from the original design into elements to make it easier for users to identify and utilize them. In addition, the codes for these elements will be provided right away through the design-to-code feature.
- Sharing Preview and Feedback This is a feature that will allow you to synchronize the Git repository of the project you're working on, build it, and publish it to the web so that you can share it with authorized users and get feedback.
- Design Changes Tracking and Management System This is a feature that will let you see and track changes that happened in the design source. The design source will be synchronized so that you can immediately see the changes in the design whenever there is a design update. In addition, we will offer an option for you to decide on what to work on.
- Integration We will provide the options for you to integrate the code generated in FUNCTION12 with external tools such as Storybook, Widgetbook, etc. This includes exporting the code output from FUNCTION12 to Storybook and Widgetbook, integrating with Git repository to reflect your work in FUNCTION12's design systems documentation as seen in Storybook and Widgetbook, allowing you to view and compare development versions and designs at the same time.
What are your key focus areas in the advanced version of FUNCTION12? How will you maintain FUNCTION12's competitive advantage?
The advanced version of FUNCTION12 is focused on allowing developers to be assisted with the help of the system in the same workflow as when they develop the front-end part of development projects.
Developers receive a design from a designer and try to understand the UI design structure before they start writing code. Scenes, Components, and Design Tokens defined in the design are interrelated, so they explore and understand the components and decide how to code them. FUNCTION12 will make it easy for developers to understand and explore designs through the design system documentation feature.
Then the developers configure the global style using design tokens that are common throughout the system and utilize these to set the foundation for the project, set up the router, and select a specific Scene to begin work. Within this Scene, there are components that can be used in common. In such cases, they create and apply those that are needed while reviewing other Scenes. FUNCTION12 will automate this process with automatic navigation and manual editing of components using the Design to Code feature, and auto-style configuration via design tokens.
Afterward, the developers may resume development tasks while sharing and communicating the project progress with internal and external stakeholders. FUNCTION12 will reduce the resources involved in this process with the feature to share previews and feedback.
Sometimes, during or after development, design updates may occur and need to be reflected in the system. However, it is very difficult to visually see and find design changes, and it is also difficult to organize all the changes one by one. FUNCTION12 will enable the users to track and manage design updates, keeping them up to date about design changes and reducing the time consumed in reflecting the changes in the front-end UI code.
FUNCTION12 will go beyond design-to-code technology and keep researching ways and developing features by which developers’ working efficiency can be optimized through out the entire flow of front-end development.
What are your plans for the future? What features, if any, are you planning to develop further or add? What was the thought process behind these plans?
FUNCTION12 will continue to focus on supporting the workflow of front-end developers.
We want to continue to enhance our design-to-code features to make it easier for users to translate their designs into code, and to help them work more efficiently with more options, enhanced algorithms, and automation capabilities.
We want to add features around logic and animation to reduce front-end developer effort and make their work more productive, such as key SSO integrations, defining and populating state on components, and setting up screen transitions and animations.
Also, we will make it easy to configure a test mockup server so that the users can test your server integration development on a mockup server before developing it on the backend. We will perform mock authentication by selecting a session, JWT Token, API Key, etc., and provide API and data according to the specified specification. Then, we will facilitate the users to perform server integration with little effort by automatically generating the front-end code of these parts. Then we will help them proceed with development by connecting those integrations with the test mockup server through a real network.
There are more features my team is discussing internally, and we are working hard to provide better service to our users even now.
How should developers use FUNCTION12 to get the most out of it?
The best way to use FUNCTION12 is to utilize each feature in your development flow accordingly.
For example, try utilizing the design system documentation feature to understand the organization of your design. You will see the composition of the entire scene and the composition of the components, identify and use Design Tokens and Assets, and see the changes in the design so that you can work on only the parts you need right away. By separating the design into components, we believe your productivity will be increased, as you can understand how the design is organized easily.
In the case of the design-to-code feature, you can consider using this to reduce the effort required to write code, especially components. Most of the time, the components set by the designer and the components desired by the developer are different in form and nature, and in many designs, we have seen components that have not been defined or are lumped into one component set with incompatible ones. Therefore, FUNCTION12 will have auto-recommendation features to allow you to choose what to be defined as components, making it easier for you to code components.
Other than these, there are features that will be available such as sharing preview and feedback features, design change tracking and management features, and integration features. We believe these will also help you to be more productive in the respective process and flow.
