Code Literacy: The Untapped Skill Every Designer Needs

How Code Literacy Can Transform Your Prototyping Skills.

I never got the value of auto layout, I've never had speed problems when doing design work. I've never delayed work that I know of 🤷‍♂️. I was also far enough in my career to not need to learn autolayout as a value differentiator for me, so I missed that boat. Trust me, I wish it came out sooner.

BUT (huge but) I've been exploring variable prototyping with the latest figma release and now I have made the connection with auto layout and super lean prototyping. This tech is legit Figma!

Here's why I'm deep diving in mastering auto layout and variables. Even starting to learn react.

👉 Design systems just got cheaper to implement. You can now design system components w minimal documentation, you can program the tokens of you system straight into the designs. Which leads to less dev resources being allocated to standing up a design system.

👉 Reduced front end dev scope. Not only can you program in the tokens, you can program the behaviors into the components you design. Which will soon be represented as usable code syntax in figmas dev mode.

👉 Higher quality UI designs. Being able to systematize the tokens and variables allow even tighter governance of the perceptual patterns used across a design team. If everyone is using the same programmable tokens for spacing, border radius, color, etc. The lines between dev and design are extremely blurred in the future.

👉 The main sell for me: creating realistic prototypes faster. You also are able to think through every micro interaction as you set up the logic, component by component. Once you do that with local variables, you can lay everything out and have a functional prototype that can be damn near real for the people you are testing it with.

what does this mean for you as a designer? You should understand how code works. Learn react not to develop it, but to better understand code maintainability and scalability. use tutorials on Design+Code, and Chat GPT to help you understand the first principles of front end development, this will make you so much better at prototyping variables in figma.

I know I was pretty off base for hating on auto layout, but I'm willing to be wrong. Are you willing to be wrong?