It’s probably fair to say that our designers have been charting the rise of AI in design with a degree of trepidation. Among the nervousness, a natural reaction considering the frequent predictions of AI replacing human roles, there is still lots of excitement about the new AI-enabled features entering the market. We have been eagerly employing these new tools and so far, we’ve been impressed by the ways that AI is helping us to streamline tasks, speed up our design process, and allow more space for creativity and innovation. In this article, we’re exploring the ways that the new AI features in Figma are helping us in our everyday creative workflows, and why you should be looking at these tools now.
The new ‘Rename Layers’ feature quickly relabels layers in Figma with descriptive names. Working on large multi-page websites can result in thousands of layers which are very time consuming to organise and rename. With this new tool, our design files are now easily more scannable and navigable, and prepping for handover is less time consuming. By replacing default layer names (such as “Frame 14335” or “Group 32”) with prescriptive names, the design files are easier to navigate and easier to collaborate on.
Additionally, the new layer labels can prompt deeper thinking about the component structures, revealing unnecessary items or opportunities to create reusable components that we have previously missed. In our testing we have found the naming is largely accurate, however often the AI defaults to naming a layer as a ‘container’ which is not always correct. The tweaking required to fix this is very minimal, and overall this tool has been very helpful in our workflows.
Figma AI can now generate realistic copy to bring designs to life. When creating a list or grid containing information for example product listings or news stories, AI examines previously inputted content and populates your design with relevant text. This saves us from using ‘lorem ipsum’, making our early designs more user-friendly. Of course nothing beats the real content and we always use actual copy if possible, but if its not available this feature can really streamline a previously time-consuming part of the prototype creation process.
Figma has recently introduced a new tool for image generation that’s worth exploring. It can quickly generate a detailed image from a text prompt. Similar to the copy creation, this can be a significant time saver when creating a mock up and you just need a few placeholder images. It enables us to move from idea to execution much faster, meaning we can experiment more freely and iterate more rapidly.
It’s not a replacement for custom photography or expert image editing however - with the AI often making strange or confusing choices. We asked the AI to generate 2 images, one of a cat detective solving a crime, another of a chatbot mobile app displayed in a phone. When you look closely at the images, there’s issues with both and they would potentially need some tweaking to be client ready. But the foundation is set for this to be a powerful tool and we’re confident that this will continue to improve over time.
It’s been exciting seeing the development of AI generating whole UI mock-ups from human entered prompts. It proves useful for quick brainstorming sessions or other instances when you need to spin up a quick design on the fly to prompt discussion. Figma’s new ‘First Draft’ feature allows us to instantly generate a UI, and provide specifics around styles such as colour values, typefaces, layout and more, however the solutions tend to be on the simple side or have clear issues.
We asked the AI to generate a homepage for a boutique gym marketed towards women, and received some confusing results. The main image depicted a business man working at his desk - not even close to what we wanted! It was also surprising that the website used a fully pink colour scheme, the AI explained that it did that as the website is marketed towards women, however this sounds stereotypical and a bit old fashioned! The AI output is a great starting point for a basic website, but design still seems assumption driven and needs a design eye to address the issues.
We have also been exploring ‘Figma Make’ to create UI designs based on inputted wireframes and style libraries, which have generated more pleasing results. Using Figma’s conversational AI, we used prompts to tweak the generated design, and appreciated that the AI’s actions and decisions were explained in real time. The AI also quickly generated interactions and hover states for the UI.
With our more detailed parameters the output was impressive, and certainly much closer to a usable deliverable than the gym website we asked for, however there were still a number of obvious errors that we difficult to amend even with repeated prompting. The AI made assumptions that went against our original instructions, such as redesigning the navigation bar without asking. We had a back and forth conversation to establish that we wanted it to use the navigation depicted in the wireframes, but it seemed adamant to make design updates unprompted.
We’re excited by the development of these tools and recognise the huge potential in improving our workflows. In our experimentation so far, we’ve found that integrating AI solutions has streamlined our processes and unlocked new opportunities. As the proficiency of these tools increases, the everyday role of the designer is surely going to change. Many of our more repetitive tasks will be automated or sped-up, giving us more time to focus on other areas of our roles, such as ideation or sketching. We’re always keeping an eye out for emerging technologies and their benefit to us at Furthermore, if you’re keen to talk more about AI or an upcoming project then contact us today.
Get in touch with the team to discuss your idea, project or business.
Furthermore
54-58 Tanner Place, Tanner Street,
London, SE1 3PH
.png){kind=icon}
