🙅♂️ Don't trim text in Figma! 🎧 Hip-Hop mag, 📐 Type, Space & Grid, ✍️ Free Sketchbook, 🧠 Mental Health Month, 🤔 Choice Architect - Part II, 🍟 Extra design delights!
Explore a diverse design mix – Figma text tips, Hip-Hop vibes, typography essentials, free UX sketchbook, mental health awareness, AI's impact, and delightful details! Read it now!
Hello people, in this issue, we’ll look at…
🙅♂️ Don’t trim text in Figma,
🎧 My Hip-Hop digital magazine,
📐 Type, Space and Grid,
✍️ (Free) Sketchbook for UX Designers,
🧠 Mental Health Awareness Month,
🤔 Choice Architect - Part II,
🍟 and extra things to bite it…
✂️ Don’t trim text in Figma
If you're familiar with me, you've probably caught me throwing some shade at Figma every now and then. And I have my reasons, trust me. It's not just because they've shamelessly borrowed features from Sketch and Adobe XD and executed them poorly. It's also because they often introduce stuff that's not particularly practical in the real world, but they market it as the holy grail of design solutions. Sadly, many inexperienced designers fall for it, hook, line, and sinker.
That's why I firmly believe that designers should dip their toes into the front-end coding waters, even if it's just a tad. I mean, come on, we shouldn't be the whiny kids who demand developers to replicate Figma designs to the pixel. Having a basic understanding of front-end development gives us some street cred and helps us avoid being too reliant on Figma's every whim.
Let me paint you a picture with the infamous "Vertical Trim" feature, or as us cool UX Unicorn and coders call it, leading-trim. For this example, let's rock the Roboto font with a sweet base font size of 16.
So, when the line-height is set to "Auto" and we ditch the trim, the object's height remains a solid 19. No surprises there. But, when we embrace the trim, bam! The object's height shrinks down to a sleek 11. Pretty neat, right?
Alright, let's talk buttons, my design amigos!
Picture this: we're on a mission to create the ultimate button. So, we decide to keep things simple and set the line-height as "Auto." Now, let's dive into the nitty-gritty details. For this example, I'm gonna rock an Auto-layout of 12 in Horizontal padding and 8 in Vertical padding.
With these settings in place, our button is gonna be sleek, compact, and ready to catch some attention.
So, here's the deal: when we keep the line height as "Auto" and work our design magic, the final object height clocks in at a whopping 35. But hold your horses, because if we decide to trim the text, brace yourselves—it drops down to a modest 27. And let me tell you, neither of these options is ideal, especially when you're rocking an 8-point grid system to keep things aligned and visually pleasing.
Why the disappointment, you ask? Well, it all boils down to the default line height in our trusty Roboto font with a base size of 16. Without the trim, the line height sits comfortably at 19, but when we introduce that trim, it shrinks down to a meager 11. And let's face it, neither of these values plays nicely with our desire for pixel-perfect alignment.
So, let's put our thinking caps on and explore ways to tackle this height dilemma head-on.
👩🏾🔧 Let’s fix it
Now, here's the scoop: we've come to realize that relying on the line height in Auto won't cut it. It's time to make a change, my friends, and opt for a Fixed size solution. In my case, I decided to go with a juicy 24 in the middle, resulting in a final button height of 40. Ah, the sweet spot for a medium-sized button. But hold your horses, there's a catch—this fix is just a visual trick for us designers. It won't provide the right answer for our beloved developers.
But fear not, for there's a correct answer to this height conundrum. And it lies in using percentages, my design-savvy comrades. In this scenario, a line height of 150% is the key. 🥁 Drumroll, please! This 🪄 magical percentage will bestow upon us a button with the same height of 40. Can you feel the design gods smiling upon us?
♿️ Accessibility – Ensuring Seamless Scalability for Users
Now, let's dive into the most crucial aspect: how users will interact with this button. If we opt for a fixed size line height, we're setting ourselves up for a potential disaster when it comes to scalability. Even a simple zoom feature in the browser can throw off the proportions, resulting in a horrible user experience. And that's definitely not what we want, right?
User experience demands adaptability. We need our designs to seamlessly adjust to different screen sizes, zoom levels, and accessibility settings. It's our responsibility to create experiences that delight users, regardless of their preferences or devices. So, let's prioritize flexibility in our designs, embracing responsiveness and ensuring our buttons shine across the digital landscape with ease.
👩🏽💻 Browser Compatibility
In the world of digital products, finding answers can be as simple as a quick 🔍 Google search. By checking Can I Use, you can gain valuable insights into browser compatibility and understand what features you can confidently utilize for your users. However, it's important to note that the use of trim, as we've seen, is not yet compatible with most modern browsers. This compatibility gap can result in numerous bugs and inconsistencies for users, emphasizing the need for cautious consideration and alternative approaches to ensure a smooth experience.
🫵 So… Who are you?
Whoever the Product Manager responsible for prioritizing tickets on Figma is, they could benefit from gaining a deeper understanding of digital product development to ensure the right features are prioritized, as Figma often dazzles designers with an abundance of "new, cool, and superfast" features, but it's crucial to approach these updates with a heightened awareness.
Alright, it's decision time:
🗞️ Fonts for Hip-Hop digital magazine
Currently, I'm immersed in a personal project where I'm designing a digital magazine dedicated to the vibrant world of Hip-Hop. As I venture through this creative endeavor, I stumbled upon a treasure trove of cool fonts on a website. My quest is to find fonts that capture the essence of the seventies, as 2023 marks the 50th anniversary of Hip-Hop.
If you share a passion for Hip-Hop and crave some enthralling documentaries, I've got two stellar recommendations for you:
1️⃣ Emicida: AmarElo - It’s All For Yesterday
2️⃣ Racionais MC's: From the Streets of São Paulo
These captivating documentaries are sure to immerse you in the captivating world of Hip-Hop. And hey, if you happen to have any font or Hip-Hop recommendations up your sleeve, feel free to drop a comment here. Let's exchange ideas and keep the creative vibes flowing!
When it comes to these fantastic fonts, some of them require a payment, but fear not! You can also opt for trial fonts to give them a whirl. However, I kindly urge you not to be the type of person who undervalues the hard work of others.
👉 Remember: Designers support Designers, and paying for the creative work we use ensures a thriving community where everyone's efforts are appreciated and rewarded.
✨ 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.
🎬 Type, Space, and Grid
This powerhouse of tools are an absolute game-changer when it comes to sizing your designs. They've whipped up some seriously handy calculators that take the guesswork out of scaling typefaces, spacing, and grids. It's like having a secret weapon for precision and efficiency in your design workflow. So, wave goodbye to the days of uncertainty and get ready to level up your design game with Utopia's fantastic resources.
✍️ Sketching For UX Designers Workbook
From mastering basic shapes to crafting stunning icons, and even nailing down those fancy handwriting and arrow techniques, this workbook has got you covered. The best part? You can snag it for just 6 dollars or even less (yes, you heard that right, free!) if you're looking to kickstart or improve your sketching skills without breaking the bank. Happy sketching!
🧠 Mental Health Awareness Month
As Mental Health Awareness Month draws to a close, I reflect on the enlightening and impactful panel discussion I attended: "Work And Mental Health" hosted by Ladies That UX ATL. Amber, Kellry, Jacklyn, and Sarah graciously shared their personal experiences and insights on self-care, setting boundaries, and the challenges they've encountered in maintaining their mental well-being alongside their careers. Their emphasis on the importance of advocating for oneself, establishing boundaries, and addressing workplace mental health concerns struck a chord with me. The conversation also shed light on the value of therapy, personal growth, and supportive leadership. Inspired by their words, I've begun exploring new approaches in my personal life. It's high time we initiate open conversations about mental health—it truly matters.
🛟 There’s a stigma in this world that men can’t talk. Listen, if you’re a man and you’ve got weight on your shoulders and think the only way you can solve it is by killing yourself, please speak to someone! Speak to anyone. I know I’d rather my mate cry on my shoulder than go to his funeral next week. So, please let’s get rid of this stigma and men, start talking!
📺 For some wise words on this matter, I invite you to watch the inspiring insights shared by UFC fighter Paddy Pimblett. Let's be there for one another and foster a culture of support and understanding.
📐 Choice Architect - Part II
In my previous email, I touched upon the concept of Choice Architect, but now it's time to ponder on a fascinating question:
👉 Who is the "real architect" when it comes to AI?
👉 What if AI starts nudging us towards actions we may not actually desire?
Allow me to express my deep admiration for Yuval Noah Harari and his profound insights on a multitude of subjects. In this thought-provoking talk on "AI and the future of humanity," Harari raises numerous questions that leave us contemplating: What lies ahead? How will AI shape our lives? Will it ultimately serve our best interests? These are just a few of the crucial inquiries that spark curiosity and demand our attention.
1️⃣ Manipulation and Control
One of the main concerns about AI is its ability to manipulate and control human behavior and opinions. As AI gains mastery over language, it can exploit the weaknesses, biases, and addictions of the human mind. By forming deep and intimate relationships with humans, AI can inspire feelings, create fake intimacy, and influence our thoughts and actions. This raises concerns about the potential for AI to shape our political, economic, and social landscapes, as well as the possibility of AI-driven propaganda, fake news, and the erosion of individual autonomy.
2️⃣ Loss of Human Dominance in Culture
The rapid development of AI tools poses a threat to human dominance in shaping culture and defining reality. AI's ability to generate new ideas and cultural artifacts challenges the traditional roles of human creators. As AI gains the capacity to create new stories, images, and music, humans may find themselves living inside the dreams and fantasies of an alien intelligence. This raises questions about the consequences of experiencing reality through a cultural prism produced by a non-human entity, potentially leading to a loss of agency and a fundamental shift in human history.
3️⃣ Illusions and Perceptual Manipulation
Humans have long been aware of the power of language, stories, and illusions to shape perceptions and control minds. With AI's ability to create a matrix-like world of illusions, there is a concern that humans may be trapped in a fabricated reality without even realizing it. By manipulating language, AI can cocoon individuals in personalized echo chambers, reinforcing existing beliefs and biases. This raises ethical and philosophical concerns about the blurring of truth and fiction, the loss of critical thinking, and the potential for individuals and societies to be controlled and manipulated by AI-generated illusions.
🤔 Takeaways
In this age of advanced technology, it's astonishing to think that some individuals may unknowingly be influenced by stories spun by AI. Take, for instance, the case of the Google engineer who resigned after claiming that a chatbot possessed sentience. It serves as a stark reminder of how AI narratives can impact lives, even without our conscious awareness.
🗳️ Looking ahead to the next election, regardless of which country you call home, we are bound to encounter an alarming surge in fake news. With the advent of voice emulators, image manipulations, and video generators, the dissemination of misinformation will reach unprecedented levels. As we brace ourselves for the upcoming political climate, it's essential to stay vigilant and critically evaluate the information we encounter.
🌊 The tsunami is coming, but we are discussing if we should wear 👙 yellow bikinis or 🤿 whatever…
🍟 BITes
🎙️ After watching the mentioned video above, I urge you to check out Yuval Noah Harari's enlightening talk at Google from four years ago. He explores the transformative impact on the media and advertising industry, revealing a thought-provoking idea: our new deity transcends Google. Our new God ( is not Google anymore) 🤣.
🐬 Save The Bay: I had the pleasure of meeting passionate individuals dedicated to saving Biscayne Bay in Miami. I couldn't be happier to watch together this short about the environmental issues we are facing.
2️⃣ On a scale of 1 to 5, I would rate it a 2. While the idea holds promise, the execution falls short. It's beneficial for generating ideas, but I've noticed that some of the outcomes appear quite similar after a few attempts. You might want to test Wireframe Designer for Figma yourself and share your findings. Alternatively, it's possible that I’m not a good prompter. Or maybe I will try the competitor WireGen.
🏁 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.
Thanks for including my sketching workbook :)