Smashing Newsletter: Issue #287

Editorial

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)

Free Crash Course To The Nitty-Gritty Of Figma
Useful Figma Plugins
Useful Sketch Plugins
Upcoming Front-End & UX Workshops
What Can My Font Do?
Scaling Up Images In No Time
Generative Doodle Patterns

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.

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.

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)

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.

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.

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.

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.

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)

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.

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)

February 9, 2021 Smashing Newsletter: Issue #287

Previous Issues