Figma’s co-founder and CEO Dylan Field demonstrated rollouts to Code Connect, an open source solution designed to keep frontend programmers from having to recode when designs change. Figma also showcased how artificial intelligence (AI) might integrate with and empower an application outside the usual AI chatbot.
First, let’s break down how Figma is supporting frontend developers with its new Code Connect.
Code Connect launched out of beta during the first day of the 2024 Config conference on Wednesday. The open source solution, available under the MIT license, customizes the code snippets that appear in Dev Mode, so that developers see actual design system code instead of auto-generated CSS. Design system code is a set of reusable UI components, styles, and guidelines that ensure consistency across a product’s design.
“Code Connect uses files that live in your codebase to create a link between your code and your Figma component,” he said. “It’s not just any code, but it’s actually real code from your own design system.”
Code Connect requires users to map properties from the design system components to properties in Figma, the company explained in an article about Code Connect. “This allows Code Connect to generate snippets of code that map the values in Figma to the architecture of your components, and then surface those snippets inside Dev Mode,” the article stated.
Code Connect will ensure frontend developers aren’t unnecessarily re-coding, he added.
“The great thing with Code Connect is as we toggle these things, you can see that the code automatically reflects what is in the design,” he said. “You can see that the code updated so the code is always in sync with your designs wherever you view them. We believe Code Connect is really going to help teams drive adoption of their design systems to ensure that code that already exists is never being rewritten.”
In addition to connecting component definitions, Code Connect can also map properties from code to Figma, enabling dynamic and correct snippets.
He shared a clip from Spotify’s dev team, which found that Code Connect saved engineers time. Spotify was able to see that the return on investment made it a “no-brainer” to roll out the feature across other engineering disciplines.
“We believe Code Connect is really going to help teams drive adoption of their design systems to ensure that code that already exists is never being rewritten,” Field surmised.
Figma said during the keynote that Code Connect supports React for web, React Native for iOS and Android, SwiftUI for iOS and Jetpack Compose for Android.
How Figma Uses AI Within Its Software
Figma also highlighted its new redesign, which integrates artificial intelligence capabilities into the platform in a number of interesting ways, providing a look at how AI could change software moving forward.
Figma is leveraging AI to:
- Generate designs — Using AI, the platform can now generate mobile and web user interfaces, giving designers a “rough draft;” UPDATE: As of July 2, this feature was disabled due to generate an app too similar to Apple’s weather app. We will update this story again when it is back online.
- Create a “unique” image from a text prompt;
- Create wire static mocks into an interactive prototype;
- Rename layers automatically and based on context;
- Generate text content;
- Shorten, rewrite or translate selected text, with ten languages currently supported;
- Enable visual search — designers can literally draw a symbol and search for a version of it; and
- Asset search, which helps you find assets even if you don’t know their name.
Some of the features are still in beta, and will roll out with the UI three beta, Field said. He added that Figma is unsure of the underlying cost and so will absorb those costs in 2024, but there will be additional fees in 2025 for these features.
Further Training Figma’s AI
Figma also warned users that it will be using its platform to further train AI models on how design systems are built, as well as on design concepts.
“We see a world where our rudimentary design generation features evolve into a way for you to explore the options space of possibilities, a way for you to rapidly navigate the IDM [Editor’s Note: IDM stands for Interactive Design Mockup or Management] and create more unique designs,” Field said. “The way to get there is that we need to train models that actually understand UI. So we need to start training on Figma data.”
It is possible to opt out of that training, with enterprises opted out by default.
The post Figma Redesign Shows How AI Can Transform Apps, Adds Dev Support appeared first on The New Stack.
Figma integrated artificial intelligence capabilities to automate design and fill in text. The company also added new support for developers.