tossJun 19, 2026

If You Asked a Designer to Make Anything with AI (opens in new tab)

Toss Design Chapter’s AI Contest invited designers to build anything with AI, resulting in 122 projects over one month. The examples show that designers primarily used AI to improve existing work—making it faster, more persuasive, and higher quality—rather than creating entirely new kinds of work. The article recommends starting with a frustrating, repetitive task or a frequently repeated communication problem. ## Automating Repetitive Work - A color-extraction tool automatically identifies and adjusts colors from images for use in UI. - Color extraction had been an unresolved challenge at Toss because results varied widely by image. - Designers used AI to draft the logic, test it against many sample images, and rapidly refine it. - The resulting system is now used for product-card colors in Toss Shopping. ## Reducing Collaboration Costs with a Personal Bot - A Slack bot was trained on a designer’s knowledge, past discussions, and reference materials. - It creates draft answers to the many design and requirements questions the designer receives each day. - Team members can send the draft as-is or revise it before responding. - The bot learns from those revisions, improving its answers to similar questions over time. - The designer described the result as feeling like becoming “1.5 people,” and other Toss designers began creating their own bots. ## Persuading Through Interactive Prototypes - A designer built a functioning prototype of a stock-trading desktop interface instead of presenting only static screens. - Users could drag panels, rearrange them, and resize windows, with the interface responding accordingly. - Showing the intended interactions directly reduced the risk that design ideas would be misunderstood during development. - The working prototype helped align designers and developers and persuade the product owner. ## Pushing Quality Within Tight Deadlines - AI-generated motion graphics were created for the key visual of Toss Bank’s recruitment website. - Each job category needed its own animation despite a very short schedule. - The designer created the foundational images manually and repeatedly refined Kling prompts to achieve the desired results. - Human-designed starting and ending frames combined with AI-generated motion allowed all category animations to be completed in a single day. ## Four Ways to Start Using AI - **Efficiency:** Hand off one especially annoying repetitive task to AI. - **Replication:** Build a bot to answer questions you repeatedly handle yourself. - **Persuasion:** Turn designs that require verbal explanation into working prototypes. - **Quality:** Use AI to reach a higher level of polish within a limited timeframe. The practical recommendation is to begin with an existing task rather than searching for an entirely new AI application. Choose one area where AI can save time, communicate intent more clearly, or help raise the final quality.

motion-graphicsaiprototypingslack+3

figmaMay 30, 2018

How one Figma engineer plays to her strengths | Figma Blog (opens in new tab)

Kathryn Salant’s interests in music, programming, and cycling all reflect her belief in experimentation, iteration, and measurable progress. Her career shows how creative disciplines can reinforce one another, leading her from trumpet performance and interactive media to software engineering at Figma. Across each field, she values collaboration, meaningful expression, and the process more than perfection. ## Figma’s “3 Things” Tradition - New employees present three experiences or interests that shaped them. - Kathryn’s three things—music, programming, and cycling—illustrate the connections between her creative and technical life. - Figma presents these stories to highlight the diverse backgrounds of its employees. ## Music and Creative Expression - Kathryn began playing trumpet in fifth grade and studied at the University of Wisconsin-Madison and the London College of Music. - She became dissatisfied with classical music’s emphasis on technical precision over inspiration and meaning. - In San Francisco, she joined the avant-garde Extra Action Marching Band in 2003. - The band performed with David Byrne and experimented with unconventional material, including Beyoncé and Black Sabbath covers. - These experiences deepened her interest in creativity beyond strict tradition. ## Programming as a Creative Tool - Kathryn first encountered programming in sixth grade on Apple IIe computers, learning Logo and creating a convincing Super Mario demo. - She continued experimenting by taking apart and sometimes breaking her mother’s work computer. - While studying music, she discovered Flash 4 and became fascinated by its combination of motion graphics, interactivity, and web technology. - Flash showed her that programming could enable artists, musicians, and designers to express ideas. - She pursued software engineering so she could help other people bring creative visions to life. - Her respect for design and emphasis on communication between engineers and designers align closely with Figma’s collaborative mission. ## Cycling and Community - Kathryn became an avid cyclist after completing the seven-day AIDS/LifeCycle ride from San Francisco to Los Angeles. - In 2006, she founded Butterlap, a weekly San Francisco bike ride centered on community and inclusiveness. - She later took part in CycloCross, a muddy, social form of bicycle racing. - Her participation in the 2008 Single Speed CycloCross World Championships was as much about encouraging others as competing. - Cycling reinforced her preference for shared experiences, perseverance, and not taking competition too seriously. Together, these three interests show Kathryn’s consistent approach: improve through iteration, stay open to unconventional ideas, and create alongside other people. Her story suggests that technical work can be strongest when it preserves the curiosity, collaboration, and expressive freedom found in the arts.

motion-graphicscollaborative-designdesign-toolsprogramming+3

figmaApr 17, 2018

5 steps to nailing your portfolio presentation in design interviews | Figma Blog (opens in new tab)

A strong portfolio presentation is less about showing every project and more about communicating your strengths clearly and engagingly. New designers often lose interviewers by starting too ambitiously, overexplaining complex work, or failing to clarify their individual contribution. The article recommends presenting authentic projects with a simple structure, while avoiding attempts to imitate the interviewing company’s brand. ## Start with a Clear Introduction - Begin slowly by stating your name and primary design strength. - Focus on the area that best distinguishes you, such as: - Typography - UX/UI design - Communications design - Motion graphics - Front-end development - Acknowledge other skills without presenting yourself as an expert in everything. - Experienced designers with broad expertise can instead emphasize their range. ## Lead with Work You Care About - Choose the project you loved most rather than the one that took the longest. - Passionate, playful projects tend to feel more authentic. - These projects reveal your design sensibility and personality more effectively than large, overly complicated assignments. - Save secondary or less personally meaningful work for later. ## Explain Each Project with the Four Ws Keep project explanations concise. Provide the context, problem, process, outcome, and then allow interviewers to ask for more detail. - **What:** Briefly explain what the project is, using language accessible to everyone in the room. - **Who:** Clearly identify your role and distinguish your contribution from that of teammates. - **Why:** Describe the problem or need the project addressed, especially for work created for a client or organization. - **Where:** Explain how the design was used and what impact it had. Include metrics such as signups or other results when possible. - If the project was never implemented, explain how it might have created value. ## Be Careful with the Interviewing Company’s Brand - Using the company’s visual identity in your presentation may seem flattering, but it can easily become inappropriate. - You may not know the company’s brand guidelines and could unintentionally misrepresent its design system. - The designers who created the company’s branding may be among the people interviewing you, making inaccurate imitation especially risky. A successful portfolio presentation should be focused, personal, and easy to follow. Lead with work that reflects genuine enthusiasm, explain your role and results plainly, and let the interview panel guide deeper discussion through questions.

motion-graphicsfigmacsshtml+3

figmaMar 19, 2017

Should designers learn to code? | Figma Blog (opens in new tab)

The article argues that learning to code is not a universal requirement for designers. Alex Cornell chose filmmaking and motion graphics instead because his engineering-heavy startup already had strong coding expertise, and that specialization later helped him launch Facebook Live. While coding can improve collaboration with engineers, designers should choose skills based on their interests, team needs, and career goals. ## Coding Is a Personal Choice - In 2007, deciding whether to code was viewed as an individual career choice rather than an expected designer milestone. - Cornell worked alongside highly experienced engineers, so learning to code would have duplicated an existing team strength. - He chose filmmaking, After Effects, and Premiere because he found motion graphics more engaging and useful. - Without modern prototyping tools, he used After Effects to demonstrate animated interface ideas. ## The Value of Learning Adjacent Skills - Cornell sometimes wonders what learning to code might have enabled, but does not fundamentally regret his decision. - His design career benefited from understanding how engineers think and how to translate design concepts into technical language. - At Facebook, coding is helpful but not essential to his role. - Specializing in a complementary discipline can make a team stronger than having everyone develop the same skills. ## The Boundary Between Design and Code Is Blurring - Modern tools such as Framer and Origami combine visual design with logic and interaction. - Designers increasingly work with systems that sit between traditional design and programming. - Because roles and tools overlap, the question is no longer a simple choice between coding and not coding. - There is no universally correct answer; the best path depends on the individual. ## Writing and Communication Matter - Cornell recommends writing and communication or presentation as especially valuable alternatives to coding. - Strong design or technical execution may have little impact if the designer cannot persuade others to support the idea. - Communication can take many forms: - Speaking in meetings - Presentations and slide decks - Films or demonstrations - Clear written explanations - These skills combine practical communication with emotional intelligence, helping designers influence decisions and move projects forward. - Cornell also cautions against leaving school too early because writing, communication, and interpersonal skills are harder to acquire independently than technical skills. Designers should learn to code when they are genuinely interested in it or when it serves their goals—not because it has become an expected rite of passage. Building complementary strengths, particularly in writing and communication, can be just as valuable.

motion-graphicsprototypingui-ux-designframer+3

figmaAug 22, 2016

Introducing Figma’s Integration with Framer | Figma Blog (opens in new tab)

Figma announced a one-click integration with Framer in August 2016, responding to strong user demand for better prototyping workflows. The integration lets designers import Figma assets directly into Framer instead of exporting layers individually and uploading them manually. Together, the tools connect Figma’s rapid UI design and iteration with Framer’s expressive, code-based prototyping. ## The Need for Better Prototyping - Static mockups are insufficient for designing mobile and interactive experiences. - Designers need to: - Design within the context where a product will be used. - Demonstrate how screens respond to user input. - Add motion, transitions, and other interactive details. - Earlier workflows often required After Effects or manually building HTML, JavaScript, and CSS prototypes. - These approaches were cumbersome, involving remote servers, FTP uploads, mobile testing over 3G, and browser compatibility issues. ## Figma and Framer Integration - Figma users can import assets into Framer with one click. - The integration removes the need to export and upload layers individually. - It creates a faster path from visual UI design to interactive, code-based prototypes. - The feature was especially significant because Framer was the prototyping tool most frequently requested by Figma users. ## Complementary Strengths - Figma supports quick UI design and team iteration. - Framer enables open-ended, code-based prototypes, particularly for complex single-page interactions. - The combined workflow helps designers move ideas into code faster, test them in realistic interactions, and ship better products sooner. - The partnership also reflects Figma’s belief that code-based prototyping can be accessible to a broader generation of designers. The integration was intended to make prototyping more efficient by combining Figma’s collaborative design workflow with Framer’s flexibility and expressive coding environment.

motion-graphicsfigmaprototypingjavascript+4