Smashing Newsletter #287: Interface Design Edition

With useful Figma and Sketch Plugins, interface design tools, web typography helpers and generative doodles. Issue #287 • Tue, Feb. 9, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Meow, There were times when we didn’t really have profound UI design tools to craft digital experiences for the web. With Sketch, Figma and many others, along with a large selection of useful plugins for each, as designers, we can collaborate better and faster, with design components, automated tasks and design systems at our fingertips. Yet just as the tools are powerful and numerous, it’s getting more and more difficult to keep track of all the useful little helpers. They surely could boost productivity, but who has all the time in the world to track them? That’s why in this newsletter, we highlight a few useful tools all around interface design, i.e. for Figma, Sketch, but also your general design workflow. We hope you’ll find them useful. Ah, and if you’d like to dive in a little bit deeper, we have a few [online workshops on UX/UI]( coming up shortly — just sayin'! ;-) Happy designing and refining, everyone! — Vitaly ([@smashingmag]( --------------------------------------------------------------- Table of Contents 1. [Free Crash Course To The Nitty-Gritty Of Figma](#a1) 2. [Useful Figma Plugins](#a2) 3. [Useful Sketch Plugins](#a3) 4. [Upcoming Front-End & UX Workshops](#a4) 5. [What Can My Font Do?](#a5) 6. [Scaling Up Images In No Time](#a6) 7. [Generative Doodle Patterns](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #1. Free Crash Course To The Nitty-Gritty Of Figma The collaborative interface design tool Figma is rapidly gaining popularity. If you are a Figma user already or are planning to give the tool a try, Pablo Stanley’s free video course [Figma Crash]( helps you take your Figma skills to the next level. [Figma Crash]( The course consists of four chapters that dive deep into the nitty-gritty of prototyping, auto-layout, systems, and illustration. Three chapters are still in the making, the first chapter on auto-layout has already been released and shows you how to harness the power of Figma’s resizing and stacking engine to create flexible contact lists, UI cards, nav bars, price plans, masonry grids, and credit card forms. Practical tips that you can use in your projects right away. (cm) --------------------------------------------------------------- #2. Useful Figma Plugins By the way, if Figma is the design tool of your choice, you might already know about [Auto-Layout]( (elements resizing automatically) and [Auto-Flow]( (makes it easy to draw flows). But if you run in specific issues with animation, tables, or content, you might also check [Figma Animation Tooling]( [Eve Tabler]( for creating empty table or tables with data from Google Sheets, and [ContentReel]( that lets you create custom content presets and share it with other Figma users. [Variable-Width Stroke]( And if you have a sweet spot for calligraphy, there’s now a little [plugin]( that makes Figma even more versatile — by adding support for variable-width stroke. Once installed, you can draw a stroke with Figma’s pen tool, select it, and adjust the stroke thickness in the plugin window. If you want to give it a try, there’s a [demo]( to tinker with. Perfect for handlettered effects, patterns, and illustrations. (cm) --------------------------------------------------------------- From our sponsor Never Format Messy Spreadsheets Again [Never Format Messy Spreadsheets Again]( [Collaborative workspaces]( built for customer data onboarding.[Never Format Messy Spreadsheets Again] --------------------------------------------------------------- #3. Useful Sketch Plugins There is no shortage of [Sketch plugins]( but sometimes it’s the smallest things that speed up the workflow. For example, [data-from-clipboard]( allows you to copy text in your clipboard and paste it into text layers or symbols overrides, and [sketch-data-faker]( provides 130+ types of smart placeholder content for your mock-ups. And [Artboard Manager]( allows you to bring order to your artboards with a single click. [Useful Sketch Plugins]( If you need to get a bit more sophisticated, [Automate Sketch]( provides dozens of presets for arrangement, text management, slicing, symbols, layers and guides. [Sketch Runner]( provides quick shortcut access to run plugins and menu actions from a “command line”, along with a components browser with search and filtering. Finally, [Sketch Repo]( includes hundreds of icons, mock-ups, plugins and UI kits, and [Sketch App Sources]( send Sketch resources right into your inbox every other week. Happy sketching, everyone! (vf) --------------------------------------------------------------- #4. Upcoming Front-End & UX Workshops Who doesn't love tiny little details that make an interface shine? Well, we certainly do! And as it happens, we have some friendly [online front-end & UX workshops]( dedicated to making your interfaces better in complex navigation, interface design patterns, SVG animation, design systems and design workflow. [Smashing Online Workshops]( Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a [truly smashing experience]( with wonderful folks from all over the world. There are still [some early-birds left]( with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — we'd love to see you! :-) --------------------------------------------------------------- #5. What Can My Font Do? Layout features, supported languages, Unicode support — if you’re looking for a quick and efficient way to find out what your font can do, Roel Nieskens’ [Wakamai Fondue]( is for you. [Wakamai Fondue]( The tool works right in your browser: Upload a font, and you’ll get a detailed overview of font's features — from the number of characters and glyphs to more advanced layout features. Sliders let you play around with parameters like size, weight, width, and style to test the features, and, to make use of them in your project right away, you can download a stylesheet with all the CSS you need. Handy! (cm) --------------------------------------------------------------- #6. Scaling Up Images In No Time We all have been there: you might need a high quality, high-resolution image but it’s available only in a low resolution, and its quality doesn’t quite fit the bill. However, it’s not a reason to start looking for alternatives just yet — you might be able to pull off a little magic trick, by enlarging available images with the kind help of machine learning and AI. [Enlarging Images]( [Letsenhance.io]( uses a deep [learning-based photo processing]( based on neural networks called GANs, to increase image resolution without quality loss, automatically and quickly. Once an image is uploaded, you can upscale it 16×, define presets, enhance color and tone and use it for printing or full-page-image galleries. The service also provides an API for bulk processing and a fully customized image automation. And if you need a free alternative, you can use [Ojoy]( that allows for 2–4× upscaling and noise reduction. Obviously the result isn't going to be 100% accurate, but usually close enough. Magical? Well, it is at first, but works like a charm once you get used to it. (vf) --------------------------------------------------------------- From our sponsor Discover A New Standard For Web Design On Editor X [Discover A New Standard For Web Design On Editor X]( Take your website from idea to production, using a full stack solution on the world’s most advanced web creation platform. Experience a powerful combination of approachable CSS, integrated business solutions and custom code capabilities. [Build your next site on Editor X →]( --------------------------------------------------------------- #7. Generative Doodle Patterns What can you create out of basic geometric shapes? According to Sy Hong and Ye Joo Park, entire worlds! The designers got together to create [Tabbied]( a little tool that generates colorful geometric doodles from already pre-made presets. [Generative Doodle Patterns]( First, you select a preset; then you can customize colors and choose settings such as frequency of a pattern, the actual grid and colors, and finally download the design as a PNG file. Need to get more advanced? [Repper]( and [MagicPattern]( have got your back, too! (vf) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #8. New On Smashing Job Board - [UI/UX Web Designer]( at IMS Inc. (Beltsville, MD) - [Technical Lead of Website Development (d/f/m)]( at Ableton AG (Berlin) - [Creative Developer]( at Together (UK Only) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Getting The Most Out Of Git]( - [Managing CSS Z-Index In Large Projects]( - [Improving Your Team’s Communication In The Age Of Remote Work]( --------------------------------------------------------------- 10. Shout Out Of The Week: Femke van Schoonhoven In this newsletter issue, we’d love to give a kind shout-out to wonderful [Femke van Schoonhoven]( a product designer from Toronto, Canada, teaching all things design and user research [over in her YouTube channel](. [Subscribe to Femke's channel]( for lovely weekly videos about design process, tools and career tips — and don’t miss her tips on speeding up the design process and how to create a proper portfolio. Thanks for your wonderful work, Femke! (vf) --------------------------------------------------------------- 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](