December 12, 2023 Smashing Newsletter: Issue #435
This newsletter issue was sent out to 208,816 subscribers on Tuesday, December 12, 2023.
Editorial
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!
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.
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.
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)
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.
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.
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.
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, the 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?
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 mockups a matter of just a few clicks.
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.
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.