“Winners from our first global Make-a-thon offer insights on how to prototype smarter, structure products better, and push Figma Make further.”

Figma Make is pretty great for building custom diagrams for your research.

Pratik Nadagouda, Product Manager at Figma, shows how to use the upcoming Figma Make connectors to visualize PRDs and tasks with the help of 3rd-party services like Notion, Atlassian, Linear, or Asana.

Another use case for Connectors is pushing code from Figma Make to a GitHub repository, which can be used as a project backup or source for deployment to your preferred hosting platform. Future updates to the Make file can be manually pushed to the repository. Connectors will become available later in October.

“Starting today, the Figma app in ChatGPT will be able to recommend and create AI-generated FigJam diagrams based on your conversation. Users can also upload files like photos, drawings, and PDFs to guide the output. That currently includes text-based flow charts, sequence diagrams, state diagrams, and Gantt charts, with more to come. […] To use the Figma app, simply mention it in your ChatGPT prompt, i.e., ​“Figma, make a diagram from this sketch.” ChatGPT can also suggest the Figma app when it’s relevant to the conversation.”

The Cut tool allows you to precisely divide vector objects and shapes into separate objects. When editing a vector, select the Cut tool and either click and drag to slice an object or click on a point to split the vector. Don’t miss a little fun interaction detail that Rogie and Tim sneaked in.

Dylan Field shows a couple of projects he built in Figma Make with pre-release Sonnet 4.5. He notes that the new model is very good at planning and was able to precisely transform a Figma design into a functional code with a single prompt.

Christine Vallaure explains the basics of getting started with Figma Sites, setting up your first page, and customizing your own blocks.

Tasteful isometric illustrations made in Figma Draw by Shreya Rao.

Nikolas Klein, PM at Figma: ​“Now you can copy any design from a Figma Make preview to the design canvas, allowing you to edit, iterate, and take your ideas further.” To make this possible, Figma purchased the technology behind a popular html.to.design plugin from my friends at <div>RIOTS. As part of this partnership, they will keep building and maintaining their plugins and tools independently, including html.to.design.

Pretty amazing what you can make without writing any code now. Congrats to all winners!

Christine Vallaure shows how to keep type consistent across screen sizes: establish text styles once, map them to your layouts, and preview responsiveness before you ship.

A major update to Figma Sites. First of all, custom fonts are finally here! More accessibility features, like HTML tags on layers, accessibility controls, and ARIA role settings. Password protection for the portfolio you still won’t finish. A configurable cookie consent banner, and a new link shortcut with additional types like back and scroll to. Last but not least, Figma Sites is now available for all Starter and Education users.

Snapping to midpoints while using variable width strokes in Figma Draw just got easier. ​“When you hover with the width point tool, it’ll now hint at the midpoint of that segment so you can snap to the middle of two points (or even between two points themselves).”

Enter Focus View from canvas and change modes for color and responsiveness.

Short Buzz tutorial on resizing an asset for different ratios and platforms, plus setup tips so templates scale cleanly.

“Explore ideas and riff on product flows with templates in Figma Make. Create an accurate representation of an existing product experience, then replicate it as a sandbox to experiment with design directions, new feature ideas, growth campaigns, and more.”

“In this replay of our July 9th webinar, we’ll deep dive into Figma’s Dev Mode to learn how it transforms the design-to-development workflow. We’ll walk through how Dev Mode streamlines handoff, bridges design and code, boosts developer efficiency, and scales design system adoption.”

“From a brand template to an entire digital campaign, now you can easily copy your designs over from Figma Design to Figma Buzz in just a click. Simply right-click the frames you want to copy over, select the ​‘Send to Buzz’ button in the context menu, and they’ll instantly appear on the canvas of a new Buzz file.”

Miggi: ​“Figma Make is coming to Figma’s free education teams. Students and Educators can now use Figma’s prompt tool to help take designs to functional coded prototypes! Those already on the education plan will require re-verification to continue to use free education teams and access to tools like Figma Make.”