#402: Useful Figma Plugins and Tools

Figma design specs, skeleton screens, handoff helpers, design systems, embedding ChatGPT into Figma and Figma templates. Issue #402 • April 25, 2023 • [View in the browser]( [Smashing Newsletter]( Bom dia Smashing Friends, It’s Figma time! Many of us design in Figma every day, but there are always those little tools, plugins and templates that can make our work just a little bit more efficient. In this newsetter, we highlight some of them. You’ll find a few neat little Figma helpers for design specs, customer journey maps, skeleton screens and design systems. Happy browsing! [SmashingConf San Francisco 2023]( Coming in a few weeks: [SmashingConf SF]( (May 23–26), all around cutting-edge front-end. As it’s already late April, we are getting ready for our very first SmashingConf this year, and get ready for our upcoming Smashing Meets all around JavaScript that’s happening today: - [New Front-End Adventures 2023]( (April 25 – May 9) The state of front-end, from CSS and JavaScript to web performance and workflow, with Vitaly Friedman. - [Smashing Meets JavaScript]( (April 25) A free community event on JavaScript performance, security and the Canvas API. Tickets are free for everyone! - [Smashing Hour with Chris Ferdinandi]( 🏴‍☠️ (April 26) A free 1h-session all around JavaScript, with Chris who also loves pirates, puppies, and Pixar movies. - [SmashingConf SF]( 🇺🇸 (May 23–26) All around front-end, web performance, CSS, JavaScript, Next.js and accessibility with over 10 confirmed speakers. - [Figma Workflow Masterclass]( (June 15–23) An online workshop with Christine Vallaure on how to optimize your Figma workflow. In the meantime, happy learning and we hope to see you soon in-person and online, everyone! Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Figma Design Specs Made Easy Creating component design specs is often a tedious task. If you don’t want to spend a lot of time on manually itemizing elements, outlining props and options, and mapping tokens, the [EightShapes Specs Figma plugin]( that Nathan Curtis created is for you. [EightShapes Specs Figma plugin]( The plugin automates Anatomy, Props, and Layout and spacing, turning a task that would usually take you two hours into just a matter of seconds. It is not only useful for preparing handoff to developers but also for auditing the quality and completeness of in-progress components and critiquing a component build approach with teammates. (cm) --------------------------------------------------------------- 2. Skeleton Screens With One Click While traditional loaders and spinners have long been the go-to solution for designers to indicate that content is loading, skeleton screens offer an even user-friendlier way to show that something is going on. Essentially a grayed-out placeholder layout of what a content-heavy page will look like once it finishes loading, a skeleton screen creates the illusion that information will be progressively displayed. [Ghost]( If you want to create a skeleton page from an existing high-fidelity mockup, Christopher Kark built a handy little Figma plugin: [Ghost](. Ghost detects all text and shape layers selected in your mockup, measures their dimensions, and replaces them with rectangles. All you need to do is select the shape, text box, or an entire screen, choose a color, and run the plugin. (cm) --------------------------------------------------------------- 3. Handoff Helpers Communication is key to building great products. To simplify asynchronous collaboration in remote teams and ensure that everyone is on the same page, Michael Riddering created [Handoff Helpers](. The free component library for Figma helps you effectively communicate your designs, even when your teammates are timezones apart. [Handoff Helpers]( “Stop limiting components to UI elements and start thinking of them as powerful workflow enhancers” is the credo of Handoff Helpers. The library includes components for organizers, status cards, table of contents, checklists, and to-do lists. To tailor the components to your brand’s style, you can easily customize their look and feel. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [New Front-End Adventures in 2023]( Dev with Vitaly Friedman. Apr 25 – May 9 - [Architecting Design Systems]( Workflow with Nathan Curtis. May 11–19 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. May 4–18 - [SmashingConf SF]( — May 23–26 - [The Power of Storytelling]( UX with Chiara Aliotta. May 30 – June 14 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 12–26 - [Figma Workflow Masterclass]( UX with Christine Vallaure. June 15–23 - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. Icons In Design Systems Icon libraries must be easy to update and to extend. In the case of design systems, it is also critical to have a smooth process for updating icons in the code — and that can bring along quite some pitfalls. Sepeda Rafael’s post “[Maintaining Icon Libraries In Design Systems]( shares practical tips that help you prevent problems with icon libraries in Figma. [Maintaining Icon Libraries In Design Systems]( In the post, Sepeda breaks down how to set up and maintain an icon library that fits your team’s needs and plays well with your design system. You’ll learn how to decide if icon fonts or SVG fonts are the best fit for your project and how to deal with icon sizes. Sepeda also takes you through the most common setup for organizing icon components and explains how to ensure everything runs smoothly. (cm) --------------------------------------------------------------- 6. ChatGPT In Figma Currently, there is hardly any getting around ChatGPT, and AI is about to change your design workflow, too. If you want to leverage the power of AI when working with Figma, [FigGPT]( has got your back. The tiny Figma plugin connects ChatGPT to Figma to take care of your copy. [FigGPT]( FigGPT summarizes, edits, and composes text in just one click. You can use it to come up with a tagline, improve the writing, change the style, turn your text into bullet points, and more. It also composes text using the contents from your design and populates your components with sample data that is much more meaningful than some “lorem ipsum” placeholder. The plugin requires an Open AI account to get started. (cm) --------------------------------------------------------------- From our sponsor What We Can All Learn From Web Performance Leaders [SpeedCurve]( Case studies from companies like Airbnb, Pinterest, BBC, Zillow, Casper, Shopify, and Leroy Merlin. [Learn how they speed up their sites]( use performance budgets, create a culture of performance, and measure the impact of site speed on their business. --------------------------------------------------------------- 7. End-To-End User Experience Map A user journey map is an effective way to better understand a user’s or customer’s experience with your product. It tells the story of what they do, feel, and think in every step of the way — from the moment they first learn about your product to accomplishing their task and planning the next steps. The team at Turtle Design shares a [Figma template]( for mapping out a user’s end-to-end experience. [App Experience Map]( The template helps you identify and prioritize opportunities for improvement, align stakeholders, and ideate a future state for your experience. It comes with a how-to-use guide, the template itself, ready to be used and edited as you wish, and an example of an experience map from one of Turtle Design’s client projects. (cm) --------------------------------------------------------------- 8. Behavioral Design System Behavioral science helps you take the guesswork out of your design decisions and backs them up with scientific findings about how people act and react. If you plan to reference behavioral science in your design work, the [Figma Behavioral Design System]( by Coglode is for you. It’s a fantastic tool to help you turn hunches into more objective, evidence-based decisions. [Figma Behavioral Design System]( At the heart of the system is a suite of over 50 “nugget badges.” Each nugget badge distills a behavioral science concept down into just a few words or, if you prefer, into an image you’ll easily recognize once you’ve become familiar with the concepts. To aid memory, the nuggets are color-coded by use, e.g., branding, product development, pricing, or conversion. Perfect for teams who want to use a common behavioral language to ease communication. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [Visual Designer]( at UCLA (Los Angeles / New York / Remote) - [Wordpress/PHP Developer]( at Razorbraille (Toronto) - [Design System Specialist]( at InVision AG (Düsseldorf, Germany) --------------------------------------------------------------- 10. Recent Smashing Articles - [Exploring The Potential Of Web Workers For Multithreading On The Web]( - [Building And Dockerizing A Node.js App With Stateless Architecture With Help From Kinsta]( - [Color Mechanics In UI Kits]( - [Smashing Podcast Episode 59 With Chiara Aliotta: What Is Design Storytelling?]( - [What Is Design Thinking?]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](