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
2. Useful Figma Plugins
3. Useful Sketch Plugins
4. Upcoming Front-End & UX Workshops
5. What Can My Font Do?
6. Scaling Up Images In No Time
7. Generative Doodle Patterns
8. New On Smashing Job Board
9. Our Current Most Popular Articles

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

The Collaborative CSV Template
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 Events

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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


8. New On Smashing Job Board


9. Our Current Most Popular Articles


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

unsubscribe update preferences view in your browser


Older messages

New Live Workshops On Front-End & Design.

Thursday, February 4, 2021

Live workshops on web performance, design systems, CSS, SVG, navigation and smart interface design patterns. From front-end to design — to help your boost your skills online. Live workshops on front-

Smashing Newsletter #286: Accessibility

Tuesday, February 2, 2021

With accessibility tools, techniques and useful resources to make your websites and apps more inclusive. Issue #286 • Tue, Feb. 2, 2021 • View in the browser Smashing Newsletter Dear Friend, Everyone

Smashing Newsletter #285: JavaScript Edition

Tuesday, January 26, 2021

With clean and tidy JavaScript, vanilla JavaScript snippets, async JavaScript, architecture of large applications, Puppeteer and Playwright. Issue #285 • Tue, Jan. 26, 2021 • View in the browser

Smashing Newsletter #284: UX Edition

Tuesday, January 19, 2021

With landing pages, disabled password pasting, loading spinners and push notifications.Issue #284 • Tue, Jan. 19, 2021 • View in the browser Smashing Newsletter Dear Friend, User experience is

Smashing Newsletter #283: CSS Edition

Tuesday, January 12, 2021

With useful CSS techniques, CSS Netflix animation, CSS custom properties, better filters, CSS clamp(), hexagonal CSS grid and other code tidbits. Issue #283 • Tue, Jan. 12, 2021 • View in the browser 💨

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏