Design Thursday #76
A weekly recap of everything you need to know about tools, events, guidelines and design in general.
Webflow
Webflow hosted its yearly conference, Webflow Conf, yesterday, and it's still happening today. They announced a bunch of new features, including:
- Next generation CMS: you can now use up to 40 Collection lists (2x increase), 10 nested lists per page (5x increase), 100 items per nested item (10x increase). This makes it possible to create even more intricate pages with the CMS. They especially mention how important data is for AI to learn about your business, so the CMS will be a big part of that. They will also make the Content Delivery APIs available for everyone so you can have read-only access from anywhere.
- Advancing AI: The Webflow MCP server was previously mainly available to interact with the CMS to manage and edit content with AI. Now it can also interact with Data APIs and Designer APIs, making it possible to design with the MCP server. The Webflow AI Assistant will also be improved to help you perform more complex tasks. There are also some AI-powered tools like code generation to build web apps like dashboards or booking tools with reusable code components. Optimization suggestions for CTAs or other copy that can be tested with A/B tests. SEO to help you improve discoverability, performance, and accessibility of your website across search engines and AI platforms.
- Building with React components: DevLink can now be used to import React components from an external codebase inside your Webflow project. It makes it possible to add custom code components on the canvas. This means you can use your preferred developer tools, configure components with props, slots, and variants, connect the components to the CMS, and manage the components via continuous integration (CI) for always up-to-date libraries. Later on, you will also be able to create code components inside Webflow itself.
- Goal reporting and insights from AI-referred traffic: You will be able to see if users visit your site coming from an AI tool like ChatGPT, Claude, Gemini, ... to make it more clear where your traffic is coming from. Goal reporting is also updated to see which pages contribute most, which traffic sources convert better, and more. All without having to build funnels or custom reports.
Everything announced at Webflow Conf
Design pages in Framer
Framer introduced Design Pages, a new way to design and iterate in Framer without having to stick to strict web constraints. This actually makes Framer a fully fledged design tool, with vector editing, P3 color support, image exporting, advanced masking, and more. You can also use Wireframer (Framer's AI generator for wireframes) to generate layouts. Best of all, Design Pages is completely free with unlimited projects and unlimited pages.
Fit Image
Another new Framer feature is Fit Image, a new sizing option. Normally, images have a fixed width and height in design tools, which also results in a fixed aspect ratio. With Fit Image, the width and height will automatically adapt to your image size, so you don't have to deal with manually resizing it.
Prompt to edit designs in Figma
Figma opened up a new private alpha that allows you to edit your designs with a prompt. This can go from creating dark mode variants to making mobile versions, or creating new UI from scratch.
Paid users can now sign up for the alpha, which is limited to 5,000 users.
Increased contrast
A smaller Figma release, but an important one for accessibility is increased contrast. It's a new setting you can turn on that will increase the contrast of your whole Figma UI.
Attach images as reference
You can now attach an image as a reference when prompting an image edit or generation. You can use this, for example, as a style or layout reference.
Unicorn Studio updates
Unicorn Studio, a tool to make it easier to bring shaders to your projects, added 4 new effects: Aurora, Fog, Stretch, and Radial blur. It also updated some effects with better rendering and options to tweak them even more. The editor also got a new easing picker where you can see the animation easing curves. Gradients also got a small update where you can now drag gradient color stop positions.
Play iPad Viewer & landscape support
Play Now supports landscape mode, so you can build prototypes in whatever screen orientation you want. On top of that, you can also use the iPad Viewer when building a prototype, so on a Mac, you can now test for both mobile and tablet.
There have also been some changes to Rive where you can now choose a State Machine or animation directly from the Animation property.
Read more about Play's updates
AI Prompt to vector on web
LottieFiles brought their AI prompt to a vector tool, which was previously only available in their Figma plugin, to the web. As the name suggests, you write a prompt, and a vector will be created.
Vibe-coding in Google AI Studio
A new Dive Club interview goes into depth with Ammaar Reshi on how he uses AI, in particular Google AI Studio, to build prototypes.
They go into 4 lessons to vibe-coding, when to rely on mockups or AI prototypes, Ammaar's step-by-step process for prompting, and the fidelity of prototypes.