😘 Mastering Figma Variables, Wireframing Tips, Hamburger Menu Debate, Infinite Scrolling App, and More!
Discover the latest in design with a dash of AI, font recommendations, Config highlights, and Atlanta love 🧩📕🍔📱⌨🤖🥜🥰🍟
Hello people, in this issue, we’ll look at…
- 🧩 Using Variables in Figma,
- 📕 Wireframing Book,
- 🍔 To be hamburger,
- 📱 Your Next Infinite Scrolling app,
- ⌨ Free Font Friday,
- 🤖 AI corner,
- 🥜 Config Leftovers
- 🥰 All The Love from Atlanta,
- 🍟 and extra things to bite it…
✨ Figma Variables
Since the introduction of variables, I have been extensively experimenting with them across various projects to determine the most effective implementation strategies.
To facilitate the setup of my initial spacing system, I relied on IBM’s Carbon Design System spacing as the foundation. I highly recommend starting with it, as it offers ease of implementation and facilitates adherence to an 8-point grid system, ensuring consistency in your designs.
Like many of you, I have been avidly consuming tutorials, and I recently stumbled upon an incredibly useful one that demonstrates how to utilize variables to set colors and border-radius values.
It’s important to acknowledge that Figma Variables are not yet perfect, and there have been complaints about certain use cases. However, the team is actively working on improvements and addressing user feedback.
If you’re venturing into more advanced Design Systems or Prototyping utilizing variables, be prepared to encounter a paywall 💸 after adding more than 4 modes to your project.
Things I’m trying:
- Building Themes (Light Mode, Dark Mode, and a Wireframing Mode).
- Translations: You can add columns and translate automatically the component. It would be fantastic if someone develops a seamless integration with Airtable or Notion Databases to automate component translations.
👇 A Must-Have Plugin
One essential plugin that can significantly speed up your workflow is Styles to Variables, allowing you to swiftly convert your Styles into Variables.
For those who need to grasp the basic concepts, I recommend reading this concise summary: Figma Variables Ultimate Guide.
📏 ✏️ Wireframing for Everyone
I have a personal fondness for the books published by A Book Apart. Among them, my all-time favorite recommendation is “Just Enough Research“. However, if you’re short on time and looking for a quick summary, this article is an absolute lifesaver.
Their latest release, “Wireframing for Everyone” is a gem of a book. It equips you with frameworks, techniques, and practical advice to master the basics of user interface design. From developing design concepts to presenting wireframes and establishing effective feedback structures, this book covers it all.
🎗️ And let’s not forget:
- Wireframing is a fast and easy technique that can be used by anyone to generate ideas and facilitate effective communication in the UI design process.
- Low-fidelity design and wireframing can be used to involve cross-functional teams and encourage feedback, making the design process more inclusive.
🍔 To be hamburger, or not to be hamburger, that is the question
Let’s talk about hamburger menus, folks. 🍔 You probably know by now that I’m not a big fan and don’t usually recommend their usage. While some people around you might be familiar with them, the truth is, most users either don’t understand them or find them inconvenient when trying to locate what they’re looking for.
To illustrate my point, I’ve captured screenshots from popular apps that are likely among your recently used ones: Spotify, Uber, YouTube, and Pinterest. Take a look, and you’ll notice that none of them rely on the hamburger menu.
In my view, using a hamburger menu often reflects lazy work on the part of designers when it comes to information architecture. It’s like sweeping the 🧹 dust under the carpet — sure, you’ve cleaned, but not really. It fails to fully grasp the user’s context and what they’re trying to accomplish.
I’ve spoken to several designers, including those working on the mentioned apps, and they’ve shared some simple yet effective techniques like Card Storting and Tree Testing, which they consistently employ. They rely on constant user feedback and, of course, the power of data to determine what truly works.
Numerous studies have delved into the display affordance of mobile menus (including the hamburger variety). One fascinating study by developer James Foster discovered that a word menu with a border boasted a much higher conversion rate than a borderless menu — without even involving a hamburger!
👯♂️ New Social Media, New friendships
Let’s dive into the question: How impactful can a new social media platform be for humanity? 🌍
Over the past few months, I’ve been making weekly visits to a chiropractor to fix my neck position (and I highly recommend you do the same!). After years of phone usage, it’s likely we all share similar issues to address. 🦴
Some articles have been buzzing about the Meta app Threads, which reportedly garnered 30 million users within 24 hours. That’s definitely impressive, 😲 but considering it’s from a company with billions of existing users, it’s a rather modest result.
On another note, I had assumed that:
- The younger generation was leaning towards using social media less.
- The younger generation preferred different social networks than those used by their parents, hence the rise of platforms like Snap (🪦 the zombie startup) and TikTok.
😬 However, it seems I may have been mistaken.
The concept of Fediverse strikes me as an interesting option, where users have control over their content and the freedom to move between platforms — akin to porting their phone numbers to a different carrier. It’s a promising step towards a decentralized social network.
Yet, let’s acknowledge what big tech companies like Meta possess, which is crucial for now: the network effect. After all, what’s the point of switching to a different platform if your friends aren’t there?
By retaining control of the network effect, just like any thriving marketplace, they can ensure longevity and continue serving you ads.
And let’s not be too naive here — Google and Meta are more akin to media companies than pure tech companies. Their revenue majorly stems from ads, much like your local TV channel.
I see immense opportunities for other social networks or products to join in on the ActivityPub protocol and provide users with a different level of control over their social profiles and content. In my app DOJO+, catering to the martial arts community, we’ve developed a “social media” feature that will also integrate with this protocol. Thus, users will exclusively find martial arts content on the DOJO+ platform.
Of course, I’m well aware that I may not grasp all the opportunities presented by Meta’s new approach. If you’re interested, I’d be delighted to discuss it further. Feel free to ping me on Threads or Twitter.
Moreover, this serves as a perfect opportunity to embrace socializing more in real life and utilize design methodologies to foster meaningful connections.
On a slightly odd note, it appears you can’t delete your Threads account alone — you might end up needing to delete your Instagram account as well. 🤦🏾♂️
And if, by any chance, I accidentally hit “Follow All” and haven’t unfollowed you yet… please bear with me. I’ll get to it soon enough. 😅
📣 Free Font Friday
It’s Free Font Friday! 🎉 Courtesy of Brandon Nickerson Studio, they always deliver an awesome selection of fonts for us to explore. And let me tell you, last Friday’s release, BN Tillsdale, is pure perfection.
I’ve been experimenting with different layouts, and I must say, I’m absolutely loving it. The work they’ve put into this font is truly commendable. Great job, indeed! 👏
✨ PRESENTED BY IRONHACK ✨
👩🎓 Elevate your career to the next level
Are you ready to take the next step in your career and become a user experience and user interface designer? Look no further than Ironhack’s UX/UI Bootcamp! Our intensive program will give you the skills and knowledge you need to succeed in the industry. Our hands-on approach lets you learn the latest design tools and techniques while working on real-world projects. You’ll also have access to a network of industry professionals who will mentor you and provide valuable insight into the field.
Don’t let lack of experience hold you back. Our bootcamp is designed for individuals with diverse backgrounds and no prior design experience. By the end of the program, you’ll have a portfolio of work to showcase to potential employers. Don’t wait any longer. Join Ironhack’s UX/UI Bootcamp today and start your journey to becoming a successful designer.
🤖 AI corner
In the past few days, I had a chance to meet an AT&T developer and let me tell you, it was quite a messy conversation. He confessed to me that they’re working on a project aiming to replace people with AI. 🤖 Now, I hope you’re on the side managing AI rather than being replaced by it.
There’s no doubt that AI will continue to dominate the headlines for a long time to come. We’re witnessing its influence in various areas:
🤖 AI for wireframing
🤖 AI to make a website
🤖 AI to write UX copy
🤖 AI for user testing
The more we embrace AI, the more we contribute to training these learning models and making them increasingly powerful. It’s a trade-off, and only time will tell if it’s a cost-effective decision in the long run. Undeniably, this rapid advancement can be both awe-inspiring and a bit unsettling.
So, if you’re wondering when AI might replace your role, the answer lies in the years beyond 2025. It’s a future where the need for junior designers or junior developers may diminish. The landscape is shifting, and it’s crucial for us to adapt and evolve alongside these emerging technologies.
🥜 Config Leftovers
First and foremost, a big thank you for all the messages and feedback. I sincerely hope that the previous newsletter helped you catch up on all the exciting highlights. In case you missed it, you can find it here.
Now, I must apologize for forgetting to feature this incredible session I had the privilege of watching live at Config. It was an absolute thrill to witness these superstars in action, and I want to make sure you don’t miss out on their brilliance. 🌟
So, here’s a list of individuals you should definitely follow:
🌟 Christine Vallaure — Founder, moonlearning.io
🌟 Eugene Fedorenko — Principal Product Designer, Postmark, ActiveCampaign
🌟 Femke van Schoonhoven — Design Lead,Gusto
🌟 Helena Zhang — Director of Design, Medium
🌟 Joey Banks — Senior Product Designer, Webflow
🌟 Molly Hellmuth — Creator, UI Prep
🌟 Rusmir Arnautovic — Head of Design, Klika
And Helena Zhang, you are an absolute ❤️ Heart Vector GOAT 🐐. Your talent and contributions are truly remarkable.
📺 Figma like the pros
📺 Creating multi-channel multi-theme connected libraries in Figma
📺 Advanced prototyping with less complexity with variables
📺 How to create pixel-perfect UIs with Storybook & Figma
Make sure to set aside some time to read Dan Mall’s Config Recap. It’s a fantastic resource that shouldn’t be missed. And Dan, count me in to 🏀 ball in San Francisco next year. I’d be thrilled to join you for dinner as well.
By the way, I’ve been eager to contribute to the Friends of Figma in Atlanta, but unfortunately, I’ve had a terrible experience with the Figma team’s response. 😩 If any of you happen to know someone I can reach out to, please connect me. I’d greatly appreciate it.
🥰 All The Love for Ladies That UX
I just wanted to express my heartfelt gratitude for All The Love and support I received for my talk on ChatGPT at Ladies That UX in Atlanta. Connecting with all of you was an incredible experience. The UX community in Atlanta is truly remarkable. Thank you to the approximately 500 individuals who enrolled in the talk. Your enthusiasm means the world to me 🥰.
On another note, I’m excited to share an independent brand based in Atlanta: ATL All The Love. Take some time to check out their collection of tees and show your support for a small business founded by a strong black woman who happens to be a dear friend.
Looking ahead, I can’t wait to see you all at our next in-person event, which will be held at the FanDuel office. It’s going to be an amazing gathering.
📺 For those who missed it, you can watch and Learn how to use ChatGPT for UX Design. It’s packed with valuable insights.
✍️ Writing in UX
I often find myself recommending to people the practice of journaling their UX process. It can be as simple as dedicating ⏱️ 25 minutes in the morning or reflecting on the day’s work in the evening. The key is consistency in making it a regular habit.
Writing plays a crucial role in UX design. It allows us to understand user needs better and facilitates effective communication within digital experiences. By verbalizing our thoughts and ideas through writing, we uncover gaps and biases in our understanding, driving the design process forward. Moreover, paying attention to words and language choices can have a profound impact on user perception and shape the overall direction of a design project.
Integrating writing throughout the entire product lifecycle is essential. It establishes a project-specific vernacular, ensuring clear and efficient communication among team members.
“The more you start thinking about writing as a design process, the clearer the power of words will become.”
— Andy Welfle
I highly recommend taking the time to read these insightful articles:
They provide valuable perspectives on the power of writing and its impact on design thinking.
🍟 BITes
🌡️ I’m not sure how much you’ve been diving into Figma, but one recommendation I always emphasize is to slice your designs into libraries. It’s a smart move because it makes managing Version History easier. Keep in mind that Figma doesn’t offer true Version Control; it’s a distinct concept worth considering. 🤔
🎷 Ah, the arrival of FigJam! While it’s exciting, do be cautious when adding too many vector lines, as it may strain your memory and potentially crash. However, I must say, I’m really enjoying using Freeform from Apple on my iPad. It’s lighter, seamlessly syncs with my Apple devices, is simple to use, and is native to iOS.
🤬 Now, let’s talk about Adobe — the company people love to hate. Some articles attempt to paint Adobe as the villain pushing Figma to start charging for the Dev Mode tool. But come on, let’s be realistic. You don’t work for free, and you’ve already enjoyed the benefits of using Figma for free for quite some time. It’s only fair to pay for the tools we rely on every day.
Remember, good tools are worth investing in. It helps ensure their continuous development and improvement for the entire design community.
🏁 Enjoy This Newsletter?
Forward it to a friend, and let them know they can subscribe here.
Also, you can submit a section for us to include in a future newsletter.
Join our Slack channel and my new TikTok account with UX tips.
Talk with me on ADPList.
To learn how to become a UX/UI Designer, enroll in the next Ironhack UX/UI Bootcamp.
See you next week!
Juno
Designer, writer, educator, UX/UI advocate, and mentor for startups.
