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

🐺If they can get press, so can you.

Friday, January 10, 2025

Calling all product businesses and designers. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺Are you overwhelmed when it comes to PR?

Friday, January 10, 2025

do this. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully

Our Must-Reads of 2024

Tuesday, December 31, 2024

View in your browser | Update your preferences ADPro Year in Review Well, we made it. It's the last day of 2024, so today, we're taking a walk down memory lane to bring you some of our