Why I feel production experience is still necessary even if you can move from Figma to STUDIO
I create websites in STUDIO using designs created in Figma.
With the arrival of "Figma to STUDIO," it has become easier to start production than before, as layouts created in Figma can now be brought into STUDIO with a feeling close to copy and paste.
I feel that, especially for PC-sized layouts, I no longer need to rebuild from scratch in STUDIO while looking at the Figma design, which has significantly reduced production time.
On the other hand, when actually using it, simply moving the layout from Figma to STUDIO does not mean the website is complete as is.
Tasks such as checking the structure in STUDIO, fixing parts that did not transfer correctly, and adjusting for screen sizes like smartphones are still necessary.
In this article, I will write about the parts that have changed now that designs can be moved from Figma to STUDIO, and the parts where I feel production experience is still necessary.
PC-size production has become much faster
Until now, I had to place text, images, boxes, and so on one by one in STUDIO while checking the design created in Figma.
It was necessary to reproduce the width, height, margins, and placement of elements in STUDIO while looking at the design, and it took a fair amount of time just to assemble a PC-sized page.
Now, since I can bring the layout created in Figma into STUDIO, the work of reproducing the design from scratch has been greatly reduced.
At least for PC sizes, I am now able to create the initial layout all at once.
Compared to when I made everything by hand, the start of production has become much faster.
Responsive support is still adjusted one by one
While I can now move PC-sized layouts, the method for supporting smartphones and tablets has not changed significantly from before.
After moving the PC-sized design, it is necessary to adjust it one by one to match each screen width.
For example, I change elements that are side-by-side on a PC to be stacked vertically on a smartphone, and adjust font sizes and margins.
I also have to check how images are displayed and the width of boxes for each screen size.
Simply shrinking the PC-sized layout does not mean the smartphone version is complete.
Therefore, while production time can be shortened by moving the layout from Figma to STUDIO, I feel that responsive support is not automatically completed.
Even if you move it from Figma, it is not always ready to use as is
When moving a layout from Figma to STUDIO, even if the appearance is close to the design, there are times when the structure requires correction in STUDIO.
In actual use, there are several patterns I often see.
Large values are entered for padding or margin
A common case is when very large values are entered for padding or margin to align the position of elements.
Even if it looks like the design on the PC size, the layout will break when the screen width is changed.
If it breaks when changing the screen size, it may be better to review the box structure and element placement method rather than just fixing the set values little by little.
Just because the appearance is correct immediately after moving from Figma does not mean you can proceed directly to responsive support.
It is necessary to check what kind of structure is used for placement and, if necessary, rebuild it on STUDIO.
The background image does not move, only the box above it moves
In designs where a box acting as an overlay is placed on top of an element with a background image set, it may not move well.
On Figma, the background image and the box are displayed overlapping, but when taken to STUDIO, only the box placed on top may move, and the background image may not be reflected.
In this case, it is necessary to set the background image again on the STUDIO side.
Even if it looks like the layout has been moved, some settings may be missing, so it is important to check while comparing the Figma design with the display on STUDIO.
Lines are placed as images
There are also cases where lines used in the design are placed as images on STUDIO.
It looks like a line, but when you check the element on STUDIO, it is included as an image rather than a border.
On the other hand, if you set the line as a frame border on the Figma side, you can bring it over with relatively no problems.
Even for lines that look the same, the state after moving to STUDIO changes depending on how they are created on the Figma side.
There are things like this that you won't know until you actually try moving them to STUDIO.
Distinguishing between what can and cannot be done in STUDIO
I sometimes receive consultations about STUDIO implementation from students and students who have already graduated.
Now that I have become somewhat proficient with STUDIO and can move layouts from Figma, the production process itself is easier to move forward with than before.
However, the designs or animations you want to create cannot always be achieved using only STUDIO's standard features.
There are things that can be created with STUDIO's basic features, and there are things that are difficult to handle with standard features alone.
In such cases, I sometimes use an iframe or a sandbox box and insert custom code to handle it.
What is needed here is the ability to distinguish between:
"Can this be achieved with STUDIO's standard features?"
"Is it difficult with standard features, so do I need to use custom code?"
This kind of separation is necessary.
It is not always best to use code from the start.
For things that can be created with STUDIO's standard features, it is often better to use standard features as much as possible, as it makes them easier to edit later.
On the other hand, if you try to force the reproduction of something that is difficult with standard features alone, the structure can become complex or it may not move as intended.
To judge which method to choose, you need not only knowledge of STUDIO's features but also experience in how things have been implemented in the past.
The ability to fix layouts that did not transfer correctly is also necessary
Being able to move designs from Figma to STUDIO has made the initial stage of production easier.
However, if the transferred layout does not look like the design, you need to judge where to make corrections.
If you understand the operations and structure of STUDIO, you can make corrections while checking the set margins, widths, and the arrangement of boxes.
Also, having original coding knowledge such as HTML and CSS makes it easier to think about why the layout is broken.
For example, you can make corrections while guessing the cause, such as whether it is broken because the position is aligned with a large margin, whether the width of the parent and child elements do not match, or whether the element arrangement method needs to be changed.
I feel that being able to move a layout from Figma and being able to correctly fix that layout are different skills.
The more detailed the problem, the harder it is to find an answer even if you search for it
For basic usage of STUDIO, you can often find solutions through official help or internet searches.
However, problems that arise in actual production often involve multiple overlapping conditions.
When you move a specific design from Figma, it breaks only at a certain screen width.
Only the part where the background image and box overlap does not move correctly.
Even with lines that look the same, one moves without issue while the other is placed as an image.
For such minor issues, you may not find the same case even if you search for it.
This is because you might not know the search terms themselves, or the cause might differ depending on the design or structure being used.
Therefore, whether or not you have experienced similar cases in the past affects the speed of resolution.
You will have to check the causes one by one while recalling layouts you have seen before or methods you have used to fix them in the past.
Even if tools become more convenient, experience does not become unnecessary.
Being able to move layouts from Figma to STUDIO has certainly made website production faster.
In particular, I feel that the reduction in the work of creating PC-sized layouts from scratch is a major change.
On the other hand, it does not mean that the layout moved from Figma can be made responsive as is.
You need to check the state after migration, such as whether large values are entered for padding or margin, whether the background image is correctly reflected, or whether lines are placed as images.
Furthermore, you are also required to have the ability to judge whether the expression you want to create can be realized with STUDIO's standard functions or if custom code is necessary.
Because tools have become more convenient, simple tasks have decreased.
On the other hand, past production experience is still necessary for checking the moved data, finding problems, and fixing them in an appropriate way.
Being able to move from Figma to STUDIO has significantly widened the entrance to production.
However, I feel that in order to actually complete it as a site, you need the ability to understand STUDIO's functions and judge what can and cannot be done while experiencing various cases.