“SVG Pattern Builder allows you to create, customize, and download unique animated SVG patterns for your web and design projects. Great for Figma, Framer, Webflow and video projects.” Made by Meng To from Design Code with a lot of help from Claude AI.
A 2‑hour course by Meng To on building a real website from a Figma template using Codux. “You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.”
Meng To shows a website made entirely in Figma and exported to React with Locofy.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.
New plugin from Meng To: “AI Text Generator is a super handy Figma plug-in made for designers who want to rewrite their text in a couple of clicks. It uses OpenAI GPT‑4 to give you smart, creative text suggestions—think names, titles, or even Lorem Ipsum dummy text—right where you need them. It automatically detects the selected text’s length and generates the perfect amount of words for your alternatives. You can also add custom prompts, which is useful for more control, generate any type of text, in different languages and amount of words.”
This Figma template that Meng To prepared for his new free Framer course is nuts. It’s a beautiful work and an excellent resource for playing with Framer’s Figma plugin.
A new design system from Meng To with hundreds of customizable Figma and Framer components and templates. Looks incredible, and the kit is meticulously organized with variables, variants, and adaptive layouts. See also his recent livestream with a discussion around key challenges while building the design system, the experience of using Figma variables and components, and tips for transitioning from Figma to Framer.
The new plugin by Meng To uses AI to upscale up to 8X the original resolution. Perfect for a variety of images including avatars, background images, Midjourney renders, and marketing images. (Interesting that the author heavily relied on ChatGPT 4 to build it.)
Meng To published a set of gorgeous handcrafted 8K wallpapers generated from 3D.
A high-quality free tutorial from Design+Code: “Design a Web app design inspired by Discord and Slack in the Figma design tool.”
I didn't know this @figmadesign trick for the longest time. You can return to instance after edit AND after selecting back the component. pic.twitter.com/BVYLVs7pyt
— Meng To (@MengTo) August 12, 2020
When you don’t use an Auto Layout, a Drop Shadow with blur set to zero may be a nice alternative.
How to create separators with Auto Layout in @figmadesign pic.twitter.com/H48N1KbZO3
— Meng To (@MengTo) May 29, 2020
Good advice on when to use a fill opacity vs. layer opacity.
Instead of using layer opacity, use fill opacity and selection colors to quickly change the theme of your UI in @figmadesign pic.twitter.com/r18uwImtdo
— Meng To (@MengTo) May 26, 2020