ux-ui-design

5 posts

figma

Figma 2024: We shipped it, you shaped it | Figma Blog (opens in new tab)

Figma’s 2024 product work was driven by community feedback, spanning 180 releases, UI3, AI tools, performance improvements, and new workflows for moving from concept to delivery. The company’s central conclusion is that meaningful progress comes from reducing friction while preserving designers’ existing habits. Community input shaped both major launches and small refinements across Figma, FigJam, and Figma Slides. ## UI3: Putting the Work Front and Center - Figma redesigned its interface for the first time substantially since 2019, updating typography, layout, colors, icons, labeling, and panel behavior. - Early UI3 testing revealed that floating panels disrupted users’ speed and daily workflows. - Based on feedback, panels became docked and resizable, while users could hide panels to maximize canvas space. - The eyedropper was upgraded to reuse styles and variables, switch between color formats, and create new styles or variables. ## Improving Core Design Workflows - Multi-edit simplified making changes across multiple designs. - Typography improvements added support for italic, bold, underline, underline styling, mixed paragraph spacing, and better local-font detection. - File organization improved through pinning, enhanced search filters, page dividers, and split tabs. - Drafts, content transfers, and file-moving workflows became easier for teams working across organizations. - “Suggest Auto Layout” helped users make designs more responsive. - Figma also introduced playful retro cursors inspired by DOS, Y2K, skeuomorphism, and Windows Vista. ## Performance, Collaboration, and Administration - Dynamic page loading made large design files more manageable. - Memory optimization and a revamped memory-management system improved performance in large files. - Multiplayer collaboration became smoother and more reliable. - Admin tools received new sidebar navigation and a dedicated content-management tab. - Infrastructure improvements included EU-localized file hosting, better support for large asset libraries, and stronger Enterprise security controls. ## AI Features That Reduce Friction - Visual search lets users find designs by uploading an image or selecting part of the canvas. - Asset search understands context instead of relying only on exact component names. - AI-assisted layer renaming improves file organization. - Replace Text Content generates realistic copy, while Rewrite, Translate, and Shorten help revise text. - Make an Image enables image creation and editing directly on the canvas, and Remove Background isolates subjects without requiring another tool. - FigJam’s AI mindmaps became a popular way to explore ideas and visualize connections. - Figma AI can turn a FigJam board into a Figma Slides outline and generate presenter notes. - First Draft, formerly Make Designs, was redesigned to help users move from an idea to an initial design. It was in limited beta, with planned support for custom libraries and deeper integration with existing design systems. ## Moving from Work in Progress to Shipping - Figma continued expanding tools intended to connect design work with development and presentation. - Dev Mode and Code Connect aimed to reduce developer context switching by translating design components into code. - Figma Slides supported creating high-fidelity presentations, extending Figma’s workflow beyond interface design. - The broader goal was to help teams move more smoothly from early concepts to implementation and delivery. ## Community-Led Product Development - Figma reported 10,000 Config attendees and more than 220 Friends of Figma groups worldwide. - Product decisions were shaped through beta testing, user conversations, and feedback from individual designers and organizations. - The company emphasized thoughtful AI development: AI should help express ideas and remove tedious work without replacing designers’ judgment. - Community members influenced both flagship features such as UI3 and First Draft and smaller quality-of-life improvements. Figma’s 2024 updates show a strategy focused on practical acceleration rather than novelty alone: improve the fundamentals, apply AI where it removes real friction, and build stronger bridges between design, development, and presentation. For teams, the most valuable improvements are likely the cumulative ones—better organization, faster search, stronger performance, and workflows shaped directly by how people already work.

figma

How Inneract Project empowers brown and black designers | Figma Blog (opens in new tab)

Inneract Project, founded in 2004 by Maurice Woods, introduces Black and brown students to design as a path for creative expression, community impact, and future careers. Its curriculum evolved from hands-on paper exercises to professional digital design training as students’ interests shifted toward UX/UI. Figma became especially valuable because its browser-based, free-to-start platform removed cost and access barriers while enabling collaboration and continued practice outside the classroom. ## Building a Foundation Through Hands-On Design - Early courses avoided software and hardware, emphasizing critical and creative thinking through paper-based activities. - As students requested more formal training, Inneract developed **Pathway to Design**, a curriculum for students as young as middle school. - The program initially focused on graphic design, then introduced professional software and hardware. - Expensive licenses and limited equipment often meant students had to share computers. ## Finding Figma - As the industry moved toward mobile apps and interfaces, Inneract updated its curriculum to teach UX/UI design. - Figma was free to get started, reducing financial barriers for students and the program. - Its beginner-friendly tools were also relevant to professional design workplaces. - Because Figma runs in a browser, students could access their files from libraries, schools, and other public computers. - Students practiced outside class more easily, accelerating their skills. - Collaborative Figma projects expanded opportunities to work with classmates, volunteers, and community partners. ## Student Growth and Real-World Projects - Inneract offers workshops, multi-day courses, hackathons, company partnerships, and an expanding student community. - Students have pursued design education and careers, including graphic design and design research. - Student projects address practical community needs: - Sierra designed a more usable walker concept for elderly people and created a music-focused mobile app. - Noah developed an ad campaign supporting homeless youth and created a zine about Oakland graffiti and street art. - Leigh created posters and graphics for her high school before studying graphic design. - The projects demonstrate how early design education can build confidence, creativity, and an interest in solving real-world problems. Inneract’s experience shows that accessible tools, combined with early mentorship and community-focused projects, can help underrepresented students envision and pursue careers in design.

figma

"The Decade of Design”: How 10 years transformed design’s role in tech | Figma Blog (opens in new tab)

The 2010s transformed design from a secondary concern into a central function of technology companies. The smartphone, especially the iPhone, made products more complex, generated vast amounts of behavioral data, and raised consumer expectations for polished experiences. As a result, companies began hiring designers at scale and treating design as a driver of product strategy and growth. ## The Mobile Wave ### More Complex Interactions - Smartphones introduced smaller, varied screens and touch-based gestures such as swiping, tapping, and holding. - Users interacted with devices in many contexts—while walking, commuting, or multitasking—forcing teams to design for real-world conditions. - Designers became essential to prioritizing functionality and simplifying complex technical systems. - Mobile effectively made the phone the primary computer people used throughout the day. ### The Rise of Data-Driven Design - Smartphones produced unprecedented volumes of behavioral data. - Product teams began continuously A/B testing interface details, including button colors, wording, and layouts. - These experiments measured outcomes such as sign-ups, purchases, and sharing. - “Growth design” emerged as a distinct discipline, with designers increasingly focused on optimizing user behavior and business metrics. - Smartphone ownership among U.S. adults rose from 35% in 2011 to 81% in 2019. ### Apple Raised the Standard - The iPhone changed expectations for how technology should look and feel, replacing the perception of software as merely functional and bland. - Apple’s design became a benchmark that competitors sought to imitate. - The iPhone’s broader mainstream appeal made high-quality industrial and interface design visible to ordinary consumers, not just creative professionals. - Products such as Tinder adopted mobile-first design conventions influenced by Apple’s operating system. - Even Google reportedly discarded an Android device it had been developing after reassessing its design direction. ## Design’s Expanding Role in Technology - The rapid growth of mobile products exposed the limitations of engineering-only approaches to product development. - Designers were particularly valuable for translating complicated systems into simple, intuitive interactions. - Technology companies that had previously operated with minimal design resources began hiring designers and acquiring design agencies. - Silicon Valley gradually shifted from primarily celebrating engineering expertise to recognizing design as a competitive advantage. The decade’s central lesson is that design became indispensable because technology moved into people’s pockets and daily lives. Companies that want to compete should treat designers as strategic product partners, not merely as people responsible for visual polish.

figma

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.

figma

How to throw a design-friendly hackathon | Figma Blog (opens in new tab)

Hackathons have traditionally centered on engineers, but design is now essential to building successful technology products. To attract and retain designers, organizers must deliberately recruit them, communicate the event’s creative value, make applications inclusive, and provide design-focused support. Hack@Brown’s experience shows that these efforts can raise designer participation to roughly one-fifth of attendees. ## Why Hackathons Need Designers - Early hackathons were created around programming and engineering, reinforcing the idea that they were primarily for coders. - As design became a major product differentiator, hackathons began seeking stronger collaboration between designers and engineers. - Hack@Brown, Brown University’s annual event with more than 500 participants, experimented with different approaches and reached about 20% designer participation by 2017. ## Recruit Designers Directly - Designers often do not encounter hackathon promotions through computer-science networks. - Organizers should contact: - University art departments - Campus design clubs and social groups - Local art and design schools - Hack@Brown reached out to institutions including RISD, Parsons, and Northeastern’s design club, Scout. - Organizers with personal connections to design communities have an advantage, but broader outreach is necessary to build awareness. ## Market the Creative Opportunity - Generic messaging such as “24 hours” and “loads of prizes” may not appeal to designers. - Promotional materials should demonstrate strong visual design and involve artists or visual thinkers on the organizing team. - Hack@Brown replaced conventional hacker-focused messaging with “Make, play, learn,” emphasizing creativity, collaboration, and experimentation. - The goal is to show designers that they can make meaningful contributions to hackathon teams. ## Create an Inclusive Application Process - Application systems can unintentionally favor experienced engineers or exclude candidates from nontraditional backgrounds. - Organizers can use: - A lottery system with reserved designer spaces - A separate evaluation process for design applicants - Design experts to help review applications - Hack@Brown received about 3,000 applications for 500 places and used representation targets, including at least 15% designers, 50% women, and 20–30% first-time hackathon participants. - Broader participation produced more varied and innovative projects. ## Build a Design-Friendly Event - Recruiting designers is not enough; the event must also support their needs and make them feel included. - Useful initiatives include: - Design workshops before or during the hackathon - UX/UI introductions for participants unfamiliar with design - Designer mixers to help attendees build community - Design mentors, especially those with coding experience - Design recruiters offering job and internship opportunities - Hack@Brown scheduled its event shortly after Brown and RISD career fairs so recruiters could meet many potential candidates efficiently. ## Recognize Designers - The article begins a section on rewarding designers to encourage them to return and recommend the event to others, but the provided text ends before describing the specific reward strategies. A design-friendly hackathon requires intentional outreach, inclusive selection, relevant programming, and visible support for design participants. Treating designers as equal contributors—not as an afterthought—helps create stronger teams and more innovative projects.