Figma Takes a Big Swing

Last week, Figma held their annual user conference Config in San Francisco. Since its inception in 2020, it has become a significant UX conference that covers more than just Figma’s products and community. While I’ve not yet had the privilege of attending in person, I do try to catch the livestreams or videos afterwards.

Nearly 17 months after Adobe and Figma announced the termination of their merger talks, Figma flexed their muscle—fueld by the $1 billion breakup fee, I’m sure—by announcing four new products. They are Figma Draw, Make, Sites, and Buzz.

• Draw: It’s a new mode within Figma Design that reveals additional vector drawing features. 
• Make: This is Figma’s answer to Lovable and the other prompt-to-code generators. 
• Sites: Finally, you can design and publish websites from Figma, hosted on their infrastructure.
• Buzz: Pass off assets to clients and marketing teams and they can perform lightweight and controlled edits in Buzz. 

With these four new products, Figma is really growing up and becoming more than a two-and-half-product company, and is building their own creative suite, if you will. Thus taking a big swing at Adobe.

On social media, Figma posted this image with the copy “New icons look iconic in new photo.”

A New Suite In-Town

Kudos to Figma for rolling out most of these new products the day they were announced. About two hours after Dylan Field stepped off the stage—and after quitting Figma and reopening it a few times—I got access to Draw, Sites, and Buzz. I have yet to get Make access.

What follows are some hot takes. I played with Draw extensively, Sites a bit, and not much with Buzz. And I have a lot of thoughts around Make, after watching the deep dive talk from Config. 

Figma Draw

I have used Adobe Illustrator since the mid-1990s. Its bezier drawing tools have been the industry standard for a long time and Figma has never been able to come close. So they are trying to fix it with a new product called Draw. It’s actually a mode within the main Design application. By toggling into this mode, the UI switches a little and you get access to expanded features, including a layers panel with thumbnails and a different toolbar that includes a new brush tool. Additionally, any vector stroke can be turned into a brush stroke or a new “dynamic” stroke.

A brush stroke style is what you’d expect—an organic, painterly stroke, and Figma has 15 styles built in. There are no calligraphic (i.e., angled) options, as all the strokes start with a 90-degree endcap. 

Editing vectors has been much improved. You can finally easily select points inside a shape by dragging a selection lasso around them. There is a shape builder tool to quickly create booleans, and a bend tool to, well, bend straight lines.

Oh, Snap!

I’m not an illustrator, but I used to design logos and icons a lot. So I decided to recreate a monogram from my wedding. (It’s my wedding anniversary coming up. Ahem.) It’s a very simple modified K and R with a plus sign between the letterforms.

The very first snag I hit was that by default, Figma’s pixel grid is turned on. The vectors in letterforms don’t always align perfectly to the pixel grid. So I had to turn both the grid lines and the grid snapping off.

I’m very precise with my vectors. I want lines snapping perfectly with other edges or vertices. In Adobe Illustrator, snapping point to point is automatic. Snapping point to edge or edge to edge is easily done once Smart Guides are turned on. In Figma, snapping on the corners and edges it automatically, but only around the outer bounds of the shape. When I tried to draw a rectangle to extend the crossbar of the R, I wasn’t able to snap the corner or the edge to ensure it was precise.

Not Ready to Print

When Figma showed off Draw onstage at Config, whispers of this being an Adobe Illustrator killer ricocheted through social media. (OK, I even said as much on Threads: “@figma is taking on Illustrator…”).

Also during the Draw demo, they showed off two new effects called Texture and Noise. Texture will grunge up the shape—it can look like a bad photocopy or rippled glass. And Noise will add monochromatic, dichromatic, or colored noise to a shape.

I decided to take the K+R monogram and add some effects to it, making it look like it was embossed into sandstone. Looks cool on screen. And if I zoomed in the noise pattern rendered smoothly. I exported this as a PDF and opened up the result in Illustrator.

I expected all the little dots in the noise to be vector shapes and masked within the monogram. Much to my surprise, no. The output is simply two rectangular clipping paths with low-resolution bitmaps placed in. 🤦🏻‍♂️

I think Figma Draw is great for on-screen graphics—which, let’s face it, is likely the vast majority of stuff being made. But it is not ready for any print work. There’s no support for the CMYK color space, spot colors, high-resolution effects, etc. Adobe Illustrator is safe.

Figma Sites

Figma Sites is the company’s answer to Framer and Webflow. For years, I’ve personally thought that Figma should just include publishing in their product, and apparently so did they! At the end of the deep dive talk, one of the presenters showed a screenshot of an early concept from 2018 or ’19.

So it’s a new app, like FigJam and Slides, and therefore has its own UI. It shares a lot of DNA with Figma Design, so it feels familiar, but different.

Interestingly, they’ve introduced a new skinny vertical toolbar on the left, before the layers panel. The canvas is in the center. And an inspect panel is on the right. In my opinion, I don’t think they need the vertical toolbar and can find homes for the seven items elsewhere.

When creating a new webpage, the app will automatically add the desktop and mobile breakpoints. It also supports the tablet breakpoint out of the box and you can add more. Just like Framer, you can see all the breakpoints at once. I prefer this approach to what all the WordPress page builders and Webflow do, which is toggling and only seeing one breakpoint at a time.

The workflow is this: 

1. Start with a design from Figma Design, then copy and paste it into Sites.
2. Adjust your design for the various responsive breakpoints.
3. Add interactivity. This UI is very much like the existing prototyping UI. You can link pages together and add a plethora of effects, including hover effects, scrolling parallax and transforms, etc.

Component libraries from Figma are also available, and it’s possible to design within the Sites app as well. They have also introduced the concept of Blocks. Anyone coming from a WordPress page builder should be very familiar. They are essentially prebuilt sections that you can drop into your design and edit. There are also blocks for standard embeds like YouTube and Google Maps, plus support for custom iframes.

During the keynote, they demonstrated the CMS functionality. AI can assist with creating the schema for each collection (e.g., blog posts would be a collection containing many records). Then you assign fields to layers in your design. And finally, content editors can come in and edit the content in a focused edit panel without messing with your design.

Publishing to the web is as simple as clicking the Publish button. Looks like you can assign a custom domain name and add the standard metadata like site title, favicon, and even a Google Analytics tag.

Side note: Web developers have been looking at the code quality of the output and they’re not loving what they’re seeing. In a YouTube video, CSS evangelist Kevin Powell said, “it's beyond div soup,” referring to many, many nested divs in the code. Near the end of his video he points out that while Figma has typography styles, they missed that you need to connect those styles with HTML markup. For example, you could have a style called “Headline” but is it an h1, h2, or h3? It’s unclear to me if Sites is writing React Javascript or HTML and CSS. But I’d wager it’s the former.

In the product right now, there is no code export, nor can you see the code that it’s writing. In the deep dive, they mentioned that code authoring was “coming very, very, very soon.”

While it’s not yet available in the beta—at least the one that I currently have access to—in the deep dive talk, they introduced a new concept called a “code layer.” This is a way to bring advanced interactivity into your design using AI chat that produces React code. Therefore on the canvas, Figma has married traditional design elements with code-rendered designs. You can click into these code layers at any time to review and edit the code manually or with AI chat. Conceptually, I think this is very smart, and I can’t wait to play with it.

Webflow and Framer have spent many years maturing their products and respective ecosystems. Figma Sites is the newcomer and I am sure this will give the other products a run for their money, if they fix some of the gaps.

Figma Make

Like I said earlier, I don’t yet have access to Figma Make. But I watched the deep dive twice and did my best impression of Rick Deckard saying “enhance” on the video. So here are some thoughts.

From the keynote, it looked like its own app. The product manager for Make showed off examples made by the team that included a bike trail journal, psychedelic clock, music player, 3D playground, and Minecraft clone. But it also looked like it’s embedded into Sites.

What is unclear to me is if we can take the output from Make and bring it into Sites or Design and perform more extensive design surgery.

Figma Buzz

Figma Buzz looks to be Figma’s answer to Canva and Adobe Express. Design static assets like Instagram posts in Design, then bring them into Buzz and give access to your marketing colleagues so they can update the copy and photos as necessary. You can create and share a library of asset templates for your organization. Very straightforward, and honestly, I’ve not spent a lot of time with this one. One thing to note: even though this is for marketers to create assets, just like Figma Design/Draw, there’s no support for the CMYK color space, and any elements using the new texture or noise effects will turn into raster images. 

Figma Is Becoming a Business

On social media I read a lot of comments from people lamenting that Figma is overstuffing its core product, losing its focus, and should just improve what they have. 

We don’t live in that world. Figma is a ventured-backed company, having raised nearly $750 million and is currently valued at $12.5 billion. They are not going just focus on a single product; that’s not how it works. And they are preparing to IPO.

In a quippy post on Bluesky, as I was live-posting the keynote, I also said “Figma is the new Adobe.”

Shifting the Center of Gravity

I meant a couple of things. First, Adobe and the design industry have grown up together, tied at the hip. They invented Postscript, which is the language for PDFs and, together with the Mac enabled the whole desktop publishing industry. There are a lot of Adobe haters out there because of the subscription model, bloatware, etc., but Adobe has always been a part of our profession. They bought rival Macromedia in 2005 to add digital design tools like Dreamweaver, Director, and Flash to their offering. 

Amelia Nash, writing for PRINT Magazine about her recent trip to Adobe MAX in London, (similar to Figma Config, but for Adobe and going on since 2003):

I had come into MAX feeling like an outsider, anxious that maybe my time with Adobe had passed, that maybe I was just a relic in a shiny new creative world. But I left with a reminder that Adobe still sees us, the seasoned professionals who built our careers with their tools, the ones who remember installing fonts manually and optimizing TIFFs for press. Their current marketing efforts may chase the next-gen cohort (with all its hyperactive branding and emoji-saturated optimism), but the tools are still evolving for us pros, too.

…

Adobe MAX didn’t just show me what’s new, it reminded me of what’s been true throughout my design career: Adobe is for creatives. All of us. Still.

Figma, having created buzz around Config, with programming that featured talks titled “How top designers find their path and creative spark with Kevin Twohy” and “Designing for Climate Disaster with Megan Metzger,” it’s clear they want to occupy the same place in digital designers’ hearts the way that Adobe has for graphic designers for over 40 years.

Building a Creative Suite

(I will forever call it Adobe Creative Suite, not Creative Cloud.)

By doubling the number of products they sell, they are building a creative suite and expanding their market. Same playbook as Adobe.

Do I lament that Figma is becoming like Adobe? No. I understand they’re a business. It’s a company full of talented people who are endeavoring to do the right thing and build the right tools for their audiences of designers, developers, and marketers.

Competition Is Good

The regulators were right. Adobe and Figma should not have merged. A year-and-a-half later, riding the coattails of goodwill Figma has engendered with the digital design community, the company introduced four new products to produce work with. They’ve taken a fresh look at brushes and effects, bringing in approaches from WebGL. They’re being thoughtful about how they enable designers to integrate code into our workflows. And they’re rolling out AI prompt-to-code features in a way that makes sense for us. 

To be sure, these products are all beta and have a long way to go. And I’m excited to go play.