Hi designers!
It’s Clément again! Welcome to the 7th edition of the CU Design newsletter – a curated set of learnings, inspiration, resources, and tips.
If you’re not familiar with CUxD (Cornell User Experience Design), we’re a centralized community for UI, UX, and product designers at Cornell. We learn and grow together both professionally and socially!
Learning time
This week’s topic is about developer handoff. It’s the moment your designs leave Figma and enter the hands of engineers. Handoff isn’t just about exporting screens; it also includes communicating how your designs work and sharing the structure and logic.
Here are a few common handoff areas and examples of what good communication looks like:
Share the system
Use variables, spacing tokens, consistent text styles, and components. That way, developers don’t have to waste time guessing what correct style your design uses.
A button with annotations pointing to its design tokens
Include interaction states
Figma only shows static screens. Great handoff includes showing all the different types of states of an element, such as hover, loading, disabled, or error states.
A dropdown component shown in five different states: default, hover, focus, disabled, and open
Use real data
Designs can break when fake or placeholder content gets replaced by real content. Help developers understand how long a post might be, what a name looks like, or other types of edge cases.
The left profile card has placeholder copy and the right one is overflowing with real data
Show how it scales
While you may be designing for a single screen within Figma, designs live across devices and screen sizes once they’re built. Show what happens to your designs depending on the viewport size.
Three responsive layout examples of a grid component for desktop, tablet, and mobile
Learn More
Figma’s best practices for developer handoff
A guide to annotating your design work
A design handoff checklist which makes the handoff process easier
Internship opportunities
Product Design Intern @ ServiceNow
San Diego, $50 / hrProduct Experience Intern @ Docusign
Chicago, $39 / hrInteraction Design Intern @ Nokia
New Jersey, $19.40 - $35.55 / hrUX Research Design Intern @ Uber Freight
San Francisco, $35 / hrDigital Design Intern @ L’OCCITANE
New York, $19 / hr
Advice from a fellow designer
About
James Spokes, Senior in Sociology, from San Francisco
Fav Figma shortcut
Shift-X to swap stroke and fill or 0-9 on the keyboard to change the opacity
Previous work experience
Product Manager Intern @ Mark43, now working on a startup full time
Proudest design project
Despite being a Product Manager I had the chance to work on a mission-critical first responder tool known as DEx this summer. FR-DEx is used by first responders in ambulances, fire engines, and police cars to learn more about persons, vehicles, or articles increasing awareness. The tool works in conjunction with CAD (computer-aided dispatch), and includes two-way narrative communication, assigning and self-initiation, location cautions, and unit and event search amongst others. The focus of the project was to design a simple and information-dense interface for users who often have to multi-task and make split-second decisions. View more here.
Advice
Design is not just how it looks but how it works is the first and most common piece of wisdom I can give. As for more actionable pointers for developing design taste and sense regardless of your background; be learning by doing and surrounding yourself with good design, whether physical or digital are crucial. Though processes can be important often sketching -> code editors and functional prototypes can be the best processes.
Design inspiration
Some cool designs to for your dopamine hit!
That’s all for this week!
Have any feedback or want to see something on the newsletter next week? Email us at [email protected] or reply directly to this email.
See you soon,
Clément @ CUxD