SwiftUI Preview’s useful features that can improve your productivity 20x times

KD Knowledge Diet
2 min readJul 17, 2022

If you have an m1 mac, use SwiftUI Preview. It will increase your productivity tremendously. SwiftUI’s Preview is just as productive as Flutter’s hot reload. But if you use intel mac, give up. You will hear the airplane take off. Today we will take a look at some useful features of SwiftUI preview.

Prepare UI

Sample View
Sample View

I prepared a sample view with a cat image.

[1] Show multiple devices

Show Multiple Devices
Set multiple preview devices

With .previewDevice modifier, you can show multiple devices in your Preview Screen. This is especially useful when you need to create responsive layout. You can also render IPad, Mac, Watch, any platform you choose.

[2] Dynamic Fonts Test

Dynamic Fonts

Iphone users can set their own font size in each device. You can test dynamic fonts with your preview.

If you want to test more than one font size, then loop all available sizes.

Loop through all dynamic font sizes

[3] Dark & Light Mode

Dark Light Mode

You can also see your preview in the dark or light mode. This is really useful.

[4] sizeThatFits

size that fits

If you want to create an individual view component instead of entire screen, use .sizeThatFits. Your view is displayed without iPhone behind.

Conclusion

SwiftUI Preview Tips

  • Test multiple device screens
  • Test Dynamic Font Sizes
  • Test Light & Dark Mode
  • Use sizeThatFits when you need to create an individual component

--

--

KD Knowledge Diet

Software Engineer, Mobile Developer living in Seoul. I hate people using difficult words. Why not using simple words? Keep It Simple Stupid!