From Figma design to Java code with Vaadin Copilot

UI design and implementation often feel like two distant planets in separate solar systems. However, with the release of Vaadin Copilot and its powerful Figma Import feature, transforming Figma designs into code has never been easier. When tasked with creating a “User Profile Page” for a small web application, I saw the perfect opportunity to test this workflow in action. Here's how I bridged the gap between design and code using Vaadin Copilot and Figma.

Getting started with Figma as a Java developer

Let me confess, as a Java developer, opening Figma felt like stepping into an artist's studio with a paintbrush in hand but no clue what to do with it. Even the zoom feature worked in the other direction. I found good video tutorials, and I recommend that everyone watch them first before really even touching Figma.

For the actual UI design work, Vaadin Design System was the starting point I was looking for, providing ready-to-use components that matched my app's theme. In this case, I postponed the theming anyway and followed the principle of “first make it work.”

Crafting the design

I sketched the “User Profile” first on paper to see what I really wanted and needed for the components:

Avatar: For showing the profile picture.
Upload: Uploading a new profile picture.
TextField: To capture the user's name, email, and phone number.
TextArea: For a longer description of the user.
PasswordField: This is for the password update option.
Button: A "Save Changes" and “Cancel” button to tie it all together.

A sketch of the UI for the user profile.

Figma’s “Auto Layout” feature gave me a headache. Think of it as Figma's version of Vaadin's layouts. It aligns elements to keep the layout responsive.

From Figma to code: Using Figma Auto Layout

The caveat was that you should think about the layout from “the bottom up.” I.e., adding the components and then wrapping them into auto-layouts either horizontally or vertically. When writing code, you naturally write the top layouts first and then go deeper into layout hierarchy, but that didn’t turn out well in Figma.

If you're new to Auto Layout (like I was), it’s worth investing time to learn how it parallels Vaadin's layout system to make the transition between design and code smoother. In my case, HorizontalLayout and VerticalLayout were mapped this way nicely.

The magic of Figma to code with Vaadin Copilot

Once I had the design, it was time to bring it to life in my Vaadin app with Vaadin Copilot. Think of it as the translator that turns your Figma designs into Java code.

I created an empty application in vaadin.com/start with a single empty Java view using Vaadin Flow. Using IntelliJ IDEA CE with Vaadin Plugin installed. The feature I wanted was to run the application with HotSwapAgent and see all the code changes in real time.

Copy the design: In Figma, select the entire User Profile frame and hit 'Cmd+C' (or 'Ctrl+C' for my Windows friends).
Run the app in development mode: Open the application at http://localhost:8080 and activate Vaadin Copilot in the bottom right corner.
Paste into Vaadin Copilot: I opened Vaadin Copilot in my browser, pasted the design, and watched it convert my Figma work into Java code, saving it and reloading the screen.

In just seconds, Vaadin Copilot handed me a fully functional Java representation of my Figma design. No manual alignment, ready-to-use code.

Integrating the generated code

With the code generated, it was time to get back into my natural habitat. I created a new Java class for the User Profile, extending the one that I had just created. My idea here is separation of concerns: While everything is nicely Java, I can keep the written UI logic away from the imported design and maybe even re-import the design again.

I’m not usually a fan of Binder in small forms like this, and I'd rather provide simple validation on the save action. I just added the validation in the "Save Changes" button click listener instead, like so:

saveButton.addClickListener(event -> {

    // Gather input values
    String name = nameField.getValue();
    String email = emailField.getValue();
    String phone = phoneField.getValue();

    // Update the user's profile
    userService.updateProfile(name, email, phone);
    Notification.show("Profile updated successfully!");
});

Thanks to HotswapAgent, I don’t need to restart the application or server, and I can see and test my code in the browser when saving the Java file.

Would I do it again in Figma?

Absolutely! We at Vaadin have provided many different kinds of tools to help developers design and build user interfaces visually. They all have their pros and cons. My personal favorite still is just to use the simple layout designer in start.vaadin.com to get my prototypes done, but using Figma opens new possibilities, such as:

Work in real-time on designs with team members, ensuring everyone is on the same page without the need for file exchanges.
Leverage the Vaadin Design System to ensure a cohesive and polished look for your application.
Figma’s Auto Layout features to create designs that naturally align with Vaadin’s responsive layouts.
Simplify the transition from design to development with Vaadin Copilot’s code generation.

I encourage you to try Figma and Vaadin Copilot for your next project and let me know how it goes. I’d love to hear your stories and tips in the comments below or join the conversation on the Vaadin Forum!

Try Vaadin Copilot -->