Figma

Resizing frames without scaling content

Hold down Command (on Mac) or Control (on Windows) to resize a frame and ignore scaling or constraints set for any child elements.

UI Design

ASCII Symbols

You can use some ASCII symbols like the interpunct (•) in your designs instead of using icons. You can find a bunch of these symbols at glyphy.io. These are useful when you want to separate two elements but want to keep them in the same line.

Screenshot of a tweet pointing out interpunct usage.

Twitter uses an interpunct between the username and date.

Icon packs

Using an icon pack saves a lot of time, and even defines the look and feel of your app to an extent. Google’s Material Design icons and Apple’s SF Icons are the default for Android and iOS respectively. Other icon packs you can look at include Feather, Phosphor and Font Awesome.

Brand Icons

Brand icons are one of those things you might need over and over, and it’s annoying to keep searching for “Facebook logo png”. A neat hack is installing the Font Awesome 5 fonts. These include the FontAwesome Brands font, and once you install it all you need to do is type in “facebook” into a textbox, and set the font to Font Awesome 5 Brands and the text will turn into the Facebook logo. You can find a list of all supported brand icons here.