#435: Figma

Figma file organization, advanced Figma techniques, optimizing large and slow Figma files, wireframing toolkits and accessibility plug-ins. Issue #435 • Dec 12, 2023 • [View in the browser]( [Smashing Newsletter]( Mirembrema Smashing Friends, How do you organize a Figma component library? How do you optimize large and slow Figma files used across teams? How do you launch new components, and what plugins could help you achieve faster results? Well, let’s find out: in this newsletter issue, we deep dive into Figma, from file organization to design systems. Buckle up! And if you’d like to boost your Figma workflow, we have a [Figma Workflow Masterclass]( with Christine Vallaure coming next year — with all the fine details around auto-layout, variables, testing and documentation. That’s quite a gem! And, just in case you are interested in design patterns for complex systems, [our growing UX library + UX training]( is always here to help, too! [Smashing Conferences 2024]( [SmashingConfs 2024]( our schedule for 2024, and we’d be absolutely delighted to welcome you. With [friendly bundles]( for friendly teams. As we are nearing the end of the year, I sincerely hope that you will have a chance to spend some peaceful and delightful time with your loved ones, old and new friends, and perhaps even total strangers. And if you are looking for kind, passionate and smart friends, we also have a couple of [friendly SmashingConfs]( and workshops coming up this year — with early-bird tickets and friendly bundles for teams. - [SmashingConf Freiburg]( 🇩🇪 — The Web, Sep 9–11 - [SmashingConf New York]( 🇺🇸 — Front-End & UX, Oct 7–10 - [SmashingConf Antwerp]( 🇧🇪 — Design & UX, Oct 28–31 - [Smashing Online Workshops]( on UX, design and front-end. Sending a lot of positive energy, enthusiasm and love your way, everyone — to you and to wonderful people around you. — [Vitaly]( --------------------------------------------------------------- 1. More Efficient Figma Files Everybody loves to work with a lean and refined Figma library, but reality often means heavy and slow files that are annoying to work with. Particularly if they have been in use for years, there’s often quite some bulk that has added up over time. [Building smarter Figma components]( To help you make your Figma files more efficient, Jérôme Benoit, who is working on the Oxygen Design System at Doctolib, shares practical insights into how they cleaned up their design system and [built smarter Figma components](. Alice Packard also shares strategic instructions for making Figma files lighter. In a [five-step roadmap]( she takes you through the highest impact actions first to win back file memory and get you back to safety if you’re already facing Figma’s dreaded memory usage warning banner. (cm) --------------------------------------------------------------- 2. Low-Fidelity Wireframing Toolkits If you want to gather feedback on a UI or are just about to explore ideas for structure or information architecture, low-fidelity wireframes are more effective than their high-fidelity counterparts. They don’t take as much time to produce and you can focus on the priorities you might have without losing yourself in the details. And, well, there are some wonderful Figma kits available to help you with creating your next lo-fi wireframe. [Paperkit]( One of them is the [Content Brick Kit]( for Sitemap. Based on the Content Brick Method, it provides a quick and easy way to create a website structure and map out content. [WireFramer]( a quick wireframing library created by Tony Allsopp, focuses on flexibility and speed to get your ideas down quickly. To achieve that, it keeps the main components to a minimum to make them easy to find while giving you just enough customization options. The [Paper Wireframe Kit]( by Method was, as the name implies, inspired by the analog process of paper prototyping. The components have been crafted to take a backseat to give full focus and attention to the overall experience you’re trying to create. Three wonderful tools that help you get your message across and spark conversations. (cm) --------------------------------------------------------------- From our sponsor Join The Largest Online Vue.js Conference In The World For Free! [Vue.js Nation 2024]( Network with 20,000+ developers at Vue.js Nation 2024 on 24-25 January. Get the opportunity to learn from the best, including the Vue.js core team members and other industry experts. Topics will include the latest features and updates in Vue.js, best practices, tips and tricks, and much more! [Join for free—>]( --------------------------------------------------------------- 3. Launching Design System Components What do you need to consider when launching a new component for a design system? And why does it take so much time? If you’re new to design systems, Rama Krushna Behera from the design systems team at Razorpay answers these questions for you. [Behind the scenes of designing a design system component]( In his post “[Behind the scenes of designing a design system component]( Rama explains all the steps involved in creating a design system component. He covers everything from component research to creating a proof of concept, creating variants, documentation, reviews, and going live — and everything in between. A comprehensive overview of a process that seems simple from the outside but is more complex than one might think. But no worries, Rama’s tips guide you through it safely and effectively. (cm) --------------------------------------------------------------- 4. Upcoming Online Workshops and SmashingConfs As you probably know, we run [online workshops]( 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: - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Jan 8–22 - [UX Strategy Masterclass]( UX with Vitaly Friedman. Jan 23 – Feb 6 - [Interface Design Patterns (Spring 2024)]( UX with Vitaly Friedman. Mar 8 – Apr 5 - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. Figma For Beginners And Pros You’re new to Figma and don’t know where to begin? Then Christine Vallaure’s [free Figma beginners course]( is for you. In just a bit over an hour, it gets you fit for setting up your first UI designs in Figma. [Figma Beginner course]( The course starts with the basics: You’ll learn how Figma’s file structure works, how to create your first frames and add shapes, text, colors, and grids. Christine then explains what you need to know to turn your design elements into reusable components. The course is perfect for beginners or anyone switching to Figma from other design software like Sketch or Adobe XD. If you want to go more in-depth or if you already have some experience with Figma, Christine also summarized some of her [favorite advanced Figma components tips and tricks]( — from simple shortcuts to powerful plugins. Happy learning! (cm) --------------------------------------------------------------- 6. Better Project And File Organization With multiple designers working on a Figma project, structure is key to improving collaboration and keeping everyone on the same page. But how to find out what works best for your team? And, once established, how to prevent your system from getting messy, for good? [Team, project, and file organization]( The Figma team published a handy [guide]( with different approaches and best practices for better organization in Figma. You’ll learn how to structure teams, organize projects, and manage file organization. Another great read on the topic comes from Jérôme Benoit. He shares [Figma file organization tips]( that have worked for the Doctolib design team, a team of 27 designers with different backgrounds and different levels of Figma knowledge. Even if it might seem like a chore at first to remodel your files, the effort of establishing a structure is well worth it, as it ultimately enables you and your team to work more smoothly and efficiently. (cm) --------------------------------------------------------------- 7. Skeleton Screens With One Click Skeleton screens are an alternative to loaders and spinners if you want to convey that a content-heavy page is loading. Essentially a grayed-out placeholder layout of what the page will look like once fully loaded, it creates the illusion that information will be progressively displayed. Christopher Kark’s Figma plugin [Ghost]( makes creating such a skeleton screen for your high-fidelity mockup a matter of just a few clicks. [Ghost]( All you need to do is select a shape, text box, or the entire screen, select a color, and Ghost will do its magic. It detects all nodes in your selection and measures their dimensions to replace them with shapes. A user-friendly way to shorten the perceived loading time and give users an idea of what they can expect once loading has finished. (cm) --------------------------------------------------------------- 8. Accessibility Toolkits For Figma When handing off a design to developers, it is a good idea to add accessibility annotations to convey those accessibility considerations that can’t be conveyed through the visual design alone. We came across some useful accessibility toolkits that help you annotate your Figma files accordingly and build products and experiences everyone can use. [A11y Annotation Kit]( The [A11y Annotation Kit]( by the team at Indeed makes it easy to add callouts for elements, indicate focus order, or specify keyboard interactions. The components are arranged by element type and include a mix of orientations to fit most use cases. The Inclusive Design team at CVS Health also open-sourced their [Web Accessibility Annotation Kit](. It was tested for two years with 65 design teams and is made specifically for web-based experiences. Included in the kit are multiple formats of annotation components. Last but not least, if you’re looking for real-world examples of how to annotate accessibility, Karen Hawkins shares a [set of annotated comps]( that help you get a better idea of what accessibility annotations can look like. (cm) --------------------------------------------------------------- 9. Smashing Books Updates 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in February. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Building Components For Consumption, Not Complexity (Part 1)]( - [Preparing For Interaction To Next Paint, A New Web Core Vital]( - [Five-Second Testing: Taking A Closer Look At First Impressions (Case Study)]( - [How Marketing Changed OOP In JavaScript]( - [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](