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

Pierce & Ward’s Secret Sources, Business Advice You Can’t Afford to Miss, and More

Friday, April 19, 2024

View in your browser | Update your preferences ADPro “Minimalism is not my strong suit.” So says Emma Roberts, the muse behind AD's May cover story. (Celebrities—they're just like us!)

World Press Photo Contest, Speedometer 3.0, Anchor Position, Sliding Frame, Meta Llama 3

Friday, April 19, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 19 2024 The World Press Photo Contest Documents War,

Car UX, DevTools Tips, CSS Patterns, iOS404, Internet Cables

Thursday, April 18, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 18 2024 Steering the future: a new vision for car UX

Big Tents, Pistachio Palettes, and Other Late-Breaking Milan Discoveries

Wednesday, April 17, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

163 / Dieter Rams inspired Framer components, America's national parks and more free resources…

Wednesday, April 17, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 1 View in browser Welcome to Issue 163! I'm comfortable talking to a human on camera, but talking at the camera, not so much. The

Logo System, BCWA Identity, War Robots, 84—24, 19th-Century Atlas

Wednesday, April 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 17 2024 Logo System: Explore 400+ logo designs logosystem

Emma Roberts's Home: AD100 Firm Pierce & Ward Share Their Secret Sources

Tuesday, April 16, 2024

Plus, the best exterior house colors View in your browser | Update your preferences Architectural Digest AD PRO Logo exterior of two residential buildings painted with blue trim with a brick patio and

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

Mario & Pareto, faces.js, Sleep vs Blog, Dark Mode, DOM Folding

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 16 2024 Mario meets Pareto mayerowitz.io Discover how to

Gap, Teenagers, Artistic Intelligence, Should Designers Code, CSS in RSCs

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 15 2024 Gap is the new Margin frontendmasters.com In 2020