Using Facebook Tweaks

Facebooks' Tweaks framework is amazing. We used it heavily in the final stages of building Blixt, and it really helped bring the interface to life with iteration without requiring a ton of development to get there.

The magic of Tweaks is that you can drastically alter your app without requiring a developer to lift a finger - meaning that you can really sweat the details on animation timings, image manipulations, blur effects, layout spacing, opacities, and a thousand other things without needing to build and run.

See, when you're making an app, there are a bunch of little "magic numbers" that make the interface come to life. As an example, let's look at a typical animation:

//Animation 
[UIView animateWithDuration:0.32f
    delay:0.0
    usingSpringWithDamping:0.78f
    initialSpringVelocity:30.f
    options:0
    animations:^{
        self.signUpButton.alpha = 0.2f
        self.signUpButton.frame = ...
    } 
    completion:nil];

See all those numbers? Iterating to arrive at those values can take a lot of time if you're building and running for each small tweak.

Enter Tweaks: Just shake the phone, and if you're on a debug build, you'll see an interface appear to help you adjust these magic numbers.

There's a bit (but not much!) setup required; it will likely only take you a few minutes to get up and running.

Then, go through and replace your magic numbers with FBTweakValues, like so:

CGFloat duration = FBTweakValue(@"Sign Up", @"Animation", @"Duration", 0.32f);
CGFloat springDamping = ...
CGFloat springVelocity = ...
CGFloat signUpAlpha = ...
[UIView animateWithDuration:duration
    delay:0.0
    usingSpringWithDamping:springDamping
    initialSpringVelocity:springVelocity
    options:0
    animations:^{
        self.signUpButton.alpha = 0.2f
        self.signUpButton.frame = ...
    } 
    completion:nil];

Now shake away, play with the values, and you'll find yourself quickly arriving at an interface with just the right magic numbers to truly make it feel alive. Rinse and repeat.