Colors & glyphs. GPT-4V. Design Lint v2.
Sponsor
Build with the power of code — without writing any
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.
App Updates
Little Big Updates W5: Colors & glyphs
New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or “scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.
Improvements to plugin and widget approvals
New in-product workflows for requesting and approving plugins and widgets within Figma on the Organization and Enterprise plans.
iPhone 15 device frames and frame presets
New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.
Access or opt out of AI features
You can now opt out of beta AI features, so your data will not be sent to Figma’s third-party AI vendor. “Figma’s agreement with OpenAI provides that data is not to be used for model training. Data inputted into AI features is sent to OpenAI for processing and generating AI output. Data is temporarily retained in OpenAI’s environment to provide the services, however it is not used for model training.”
What’s New
Dan Mall’s 10 principles for a worthy design career
Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.
New features to elevate your design and development in Webflow
Webflow hosted Webflow Conf 2023 last week, where they announced new product features for building “unmistakably professional websites”. More powerful native integration with Spline, new localization capabilities, modern and scalable design systems, Webflow Apps, and dedicated workflows for commenting, editing, and publishing. Even a new look and a brand new logo!
The next version of the Figma plugin (coming in the next few months) will automatically import your components and their associated variables into Webflow.
Figma Launches Zoom App
Last week at Zoomtopia 2023, Figma announced its Figma for Zoom app, enabling teams to collaborate on Figma design files or use a FigJam whiteboard via Zoom. Users will no longer need to share their screens or switch tabs, instead gaining increased interactions and face-to-face collaboration. Zoom users will be able to install the new Figma for Zoom app from the Zoom marketplace on October 16, 2023.
Using Figma
Implementing UI with Figma + GPT-4V
Alright, so in the last issue, I wrote that “plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.” It didn’t take long for a better example! Ben shows a new feature in Sidekick AI (using GPT‑4) for dropping a link to a frame in a Figma file to improve the code generation and even fix visual bugs. This looks freaking amazing.
Word highlighting with Auto Layout
A smart way to utilize line-wrapping in Auto Layout to achieve word highlighting effect.
How do you update components using variables?
Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.
Getting your head around Figma Variables, Figma Styles and Tokens Studio
“Demystify the synergy between Figma Variables, Figma Styles, and Tokens Studio — a trio of ways composed to develop your design token workflow.”
Office hours: Developer and designer collaboration in Dev Mode
“Join this learning session where we will share tips and address questions around how to onboard your engineers to Dev Mode. We’ll cover how to adjust your workflows to get the most of our new features, setting up your files and design system, and onboarding your developers.”
Plugins
Design Lint v2
A big update to one of the most helpful plugins. Design Lint can now automatically fix missing fill, text, stroke, and effect styles using styles found in your designs. It will make type suggestions (!) if a text layer is close to an existing type style. Import your styles by running Design Lint in a design system file, then the plugin will use these styles to make suggestions (stored only on your computer). You also can now create and apply styles in bulk directly from the plugin.
Cool Thing
GPT-4V as a product design partner
I’m still waiting for access to GPT‑4 Vision, but examples like this make me so excited about possible use cases! Imagine using LLM for a heuristic evaluation or pairing design and sketching sessions.