techlist.io
KREN

User Interface

71 posts

figma3 min readCurated summary

Little Big Outtakes | Figma Blog

Figma’s “Little Big Outtakes” shares the behind-the-scenes decisions that shaped 30+ small product updates. The stories show how difficult edge cases, team feedback, and disciplined scoping often produced better outcomes than simply adding more functionality. Across search, prototyping, and previews, the teams improved features by making complexity visible, validating ideas collaboratively, and prioritizing achievable impact. ## Multi-select Search: Designing for Edge Cases - Multi-select search extended Figma’s find-and-replace feature, allowing users to select specific results with `Shift + Click` or `Cmd/Ctrl + Click`. - The team discovered a major complication: users cannot independently select a parent layer and one of its children. - Selecting multiple search results could therefore include unexpected descendants, especially in deeply nested files. - To clarify the behavior, the designers added: - A visual hierarchy in the search sidebar showing parent-child relationships. - Hover-selection previews when users hold `Command` or `Shift`. - Highlights for indirectly selected items and outlines for directly selected children. - The team concluded that edge cases were not peripheral to the feature—they fundamentally defined how multi-selection needed to work. ## Overlay Blur: Turning Ideas into a Concrete Fix - Figma’s prototyping viewer previously struggled to render background blur on overlays because overlays do not have ordinary content directly beneath them. - Engineer Brandon Lin documented his proposed approaches, potential problems, and solution before implementing the fix. - Teammates suggested passing the overlay’s position into the rendering code so it could identify the correct area to blur. - The final changes associated overlays with their respective frames and ensured that multiple overlays were drawn and layered in the correct positions. - Team feedback gave Brandon confidence that his initial reasoning was sound while helping make the implementation more precise. ## On-Canvas Previews: The Value of Scoping Down - On-canvas previews let users hover over design-panel options—such as blend modes, effects, and color blend modes—to preview changes before applying them. - The original concept considered a much broader scope, including boolean operations, component properties, and font selection. - Rather than attempting to support everything, the team audited dropdown-based editor properties and assessed each option for feasibility and performance risk. - They prioritized features that would not require major geometry changes or substantial canvas modifications. - The smaller release proved powerful enough to be useful while allowing the team to deliver and refine it more quickly. Figma’s examples suggest that strong product work often comes from embracing complexity selectively: expose confusing relationships, seek feedback early, and narrow ambitious ideas to the highest-value implementation.

Read original(opens in new tab)
User InterfaceFigmaPrototypingFigjam+2
figma3 min readCurated summary

Raising the (table) stakes on tables in FigJam | Figma Blog

FigJam introduced native tables to make roadmapping, planning, and organizing information clearer and easier to edit collaboratively. The team deliberately focused on visual presentation rather than complex data manipulation, prioritizing simplicity for both table creators and viewers. Building the feature required extensive work on multiplayer conflict resolution, responsive editing controls, and visual clarity at different zoom levels. ## Why FigJam Needed Tables - Internal teams were already creating tables with stickies and shapes for: - Feature requirements and prioritization - Project tracking - Product marketing messaging - Design critique feedback - Brainstorming and vote counting - Native tables improve performance and reduce the effort of assembling makeshift grids. - The core requirements were to make tables: - Clear - Easy to create - Editable by everyone - FigJam intentionally avoided becoming a complex spreadsheet or data-manipulation tool. ## Designing for Creators and Users - The team treated table creation and table editing as equally important experiences. - A single toolbar click creates a pre-styled table, similar to other FigJam elements. - Users can choose from a limited style palette, while the entire table remains visually consistent. - Adding rows or columns derives styling from the neighboring row or column. - Changing a table’s color automatically adjusts its text for readability. - Programmatically drawn borders help separate cells without creating excessive visual noise. ## Multiplayer Editing Challenges - Tables may contain many cells edited simultaneously by users at different zoom levels. - Unlike ordinary elements, simultaneous table edits cannot simply use “last update wins” behavior. - Changes often need to be merged so multiple users’ contributions are preserved. - Multiplayer support consumed at least half of the engineering effort. - The team spent months addressing concurrency bugs and edge cases, including collaborative typing in the same cell. - Testing included simulated second users, such as a script that repeatedly typed “FigJam.” ## Interaction Design for Collaborative Tables - Standard FigJam selection-based editing became visually overwhelming when multiple people edited different cells. - The team changed table behavior in two important ways: - Editing controls appear on hover and follow the user’s cursor. - A prominent button lets users add a complete row or column. - Table functionality adapts to zoom level: - At distant zoom levels, users can move and arrange the table. - At closer zoom levels, they can resize it and add rows or columns. - This approach keeps the interface uncluttered while exposing more controls when they are useful. The resulting feature keeps tables intentionally simple and presentation-focused while making them native to FigJam’s collaborative, visual environment. For teams that need lightweight planning, tracking, or structured brainstorming, native tables are preferable to building grids manually from shapes or sticky notes.

Read original(opens in new tab)
User InterfaceUser ExperienceFigjamReal Time Collaboration+3
figma3 min readCurated summary

Illuminating dark mode | Figma Blog

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability. ## Accessibility and User Demand - Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work. - It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible. - The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic. - Figma shipped dark mode in May 2022 after months of product, design, and engineering work. ## The Complexities of Color - The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved. - Figma wanted a solution that: - Made new features support dark mode by default. - Simplified onboarding for engineers. - Reduced regressions when experimenting with themes. - Could support additional themes in Figma and FigJam. - Some decisions were straightforward: - Light editor panels would become dark. - Text and icons would become light foreground elements. - Toolbars and menus already dark in light mode would remain dark. - Other questions required product decisions: - Which parts of Figma should support dark mode? - Should user-created canvas content, such as the canvas background, change with the theme? - Should colors rendered by the C++ editor engine, including the transparency grid, also change? ## Auditing the Product Surface - Before coding began, team members audited Figma’s UI to estimate the work required for each surface. - The project involved far more than the main editor: - Modals - Panels - Toolbars - Dropdowns and submodals - Hidden states and complex edge cases - Each surface needed its full range of views and states considered, not just its most commonly seen appearance. ## Building a Systematic Approach - At kickoff, ten product engineering teams owned major parts of Figma’s interface. - Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces. - The team recognized that a small central engineering group could not manually handle every component and state. - This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development. Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.

Read original(opens in new tab)
User InterfaceDesign SystemsAccessibilityWcag+2
figma3 min readCurated summary

How Figma put the bounce in spring animations | Figma Blog

Figma’s spring animations replace manually tuned Bézier curves with motion based on physical properties. By modeling mass, stiffness, and damping, the system produces more natural movement, including believable weight, overshoot, bounce, and deceleration. The engineering challenge was translating physics-based controls into terms designers could easily understand and adjust. ## Why Figma introduced spring animations - Bézier animations let users control how movement starts and ends, but poorly tuned curves can cause: - Sudden, unnatural changes in speed - Objects to appear to accelerate without cause - Abrupt direction changes or stops - Spring animations define the physical behavior of an object rather than its exact path. - This approach helps create: - Weighted movement - Natural overshoot - Gentle transitions - Playful interactions such as FigJam emotes and high-fives ## The physics behind the motion Spring animations rely on three primary variables: - **Mass (`m`)** - Determines how heavy an object behaves. - More mass requires more force to accelerate. - Based on Newton’s law: `F = m × a`. - **Stiffness (`k`)** - Determines how strongly a spring resists displacement. - A stiffer spring pulls an object back more aggressively. - Based on Hooke’s law: `F = -k × x`. - **Damping (`b`)** - Represents resistance caused by friction or similar forces. - More damping reduces motion and brings the object to rest faster. - Its force is proportional and opposite to velocity: `F = -b × v`. Changing these values produces different animation qualities, such as gentle, quick, bouncy, or slow movement. ## Turning the equations into code - Figma used the WebKit `SpringSolver` to implement the spring timing function. - The solver accepts mass, stiffness, and damping and calculates the object’s position over time. - Although the underlying physics is stable and well understood, directly editing the variables is not intuitive for designers. - Designers typically want controls described as: - Faster or slower - More or less bouncy - More or less overshoot - Each physical parameter can affect multiple perceived qualities, making manual tuning difficult. For example, slowing an animation could involve increasing mass, but stiffness and damping also influence the result. ## Designing usable animation controls Figma needed a specialized interface that combined the three physical variables while presenting them in terms that matched how designers think about motion. The goal was to bridge the gap between precise physics calculations and practical animation adjustments, allowing users to achieve natural results without needing to understand the underlying equations. Figma’s approach demonstrates how physics-based animation can provide more convincing motion, provided the technical parameters are translated into accessible creative controls.

Read original(opens in new tab)
User InterfaceFigmaAnimationSpring Animations+2
figma2 min readCurated summary

What’s new in Figma: April 2022 | Figma Blog

Figma’s April 2022 update focuses on making FigJam more structured, customizable, and playful for collaborative workshops, brainstorms, and retrospectives. The release adds organizational and formatting tools alongside expressive features such as Washi tape and artist-designed stickers. Together, these updates aim to help teams create clearer boards while preserving the informal energy of digital collaboration. ## Structure and Customize FigJam Files - Users can organize boards with dedicated sections. - Stickies and shapes now support more colors, including custom colors. - Sticky notes can be made proportional and visually consistent with other content. - Adjustable font sizes make it easier to establish hierarchy for titles and labels. - Improved snapping helps users arrange and align objects precisely. - Multiple objects can be locked or unlocked simultaneously. ## Add More Personality to Collaborative Work - Figma made cursor chat more expressive. - New sticker packs were added, created by Figma Community artists Jiro Bevis, Diana Marmol, Rooney, and Fanny Luor. - The stickers provide playful ways to react, encourage teammates, and personalize FigJam sessions. ## Washi Tape Returns Permanently - Washi tape, previously introduced as an April Fun Day feature, became a permanent FigJam tool. - The update includes dozens of newly designed tape patterns. - Users can upload their own patterns. - The feature is intended to recreate the creative, tactile feel of decorating physical workshop materials. These changes make FigJam more adaptable for organized facilitation without sacrificing creativity. Teams can use sections, consistent formatting, and alignment tools to improve clarity, then add custom colors, stickers, and Washi tape to make collaborative sessions more engaging.

Read original(opens in new tab)
User InterfaceFigmaFigjamCollaboration+2
figma2 min readCurated summary

What’s new in Figma: February 2022 | Figma Blog

Figma’s February 2022 updates focus on making design collaboration easier, from finding files to brainstorming in FigJam. Search now offers previews and file-type filters, while FigJam—now out of beta—adds more flexible editing and clearer collaboration tools. Overall, the release aims to keep teams aligned and help ideas move smoothly from brainstorming to implementation. ## Updated Search and Discoverability - Search results now include file previews, making it easier to identify the correct design. - Users can filter recents, team pages, and search results by Figma or FigJam file type. - These changes reduce the time spent locating current designs and resources. ## FigJam Collaboration Improvements With FigJam available to all teams, Figma added several refinements for brainstorming and diagramming: - **Centralized resource menu:** Components, templates, widgets, and other resources are now accessible from one simplified toolbar menu. - **Flexible font sizing:** Text can be resized to any size by dragging the corners of a text box, supporting clearer hierarchy and emphasis. - **Persistent stamps and highlights:** Reactions and highlights stay attached to the objects they reference when content is moved. - **Faster color and shape changes:** Updated toolbar icons make it easier to swap colors and shapes while building diagrams. - **Image borders:** Users can add borders to images to draw attention to selected visuals. - **Simpler selection borders:** Thinner borders and larger selection corners make objects easier to select and resize. Figma’s release reinforces its broader goal of bringing more people into the design process while keeping collaboration organized, discoverable, and visually clear.

Read original(opens in new tab)
User InterfaceFigmaFigjamDesign Collaboration+2
figma3 min readCurated summary

Behind the build: a Q&A with developer Tekeste Kidanu | Figma Blog

Tekeste Kidanu, known online as tk made it, builds Figma and FigJam plugins that address practical needs from the design community. His best-known project, SPELLL, provides grammar and spell checking inside design files, while his newer FigJam tools support note-taking, color customization, and voting. He credits community feedback, Figma’s approachable plugin API, and his interest in design for shaping his work. ## Background and Motivation - Tekeste is an introverted frontend developer who moved to the U.S. in 2016 to study computer science. - He became interested in improving his design skills, particularly in color theory and typography. - He contributes to the Figma Community by creating tools that help designers work more productively. ## SPELLL: Spell Checking for Figma and FigJam - SPELLL scans Figma and FigJam documents for spelling and grammar errors. - Users can correct mistakes directly, similar to using Grammarly. - The plugin aims to save designers time and prevent embarrassing typos during presentations. - Tekeste developed the idea after seeing requests on the Figma Forum, Designer News, Twitter, and other design communities. ## Learning the Figma Plugin API - Tekeste researched how the plugin should work before beginning development. - He taught himself the Figma plugin API through its documentation and questions in the Figma Plugins Slack workspace. - He was surprised by how easy it was to begin, finding that his existing JavaScript and web-development knowledge provided a strong foundation. ## Building for FigJam - When FigJam introduced plugin support, Tekeste began adapting his existing Figma tools. - The similar APIs and development processes for Figma and FigJam made migration straightforward. - His FigJam projects include: - **Notes**, a widget for storing detailed plain-text or Markdown notes without cluttering a board. - **Color Picker**, which adds custom-colored stickies and shapes. - **Voting**, which supports anonymous and non-anonymous voting sessions. ## Community-Driven Inspiration - Tekeste frequently finds ideas in feature requests and discussions on Twitter, the Figma Forum, and Friends of Figma Slack. - He notes that many requested features can be implemented through the plugin API before Figma adds them natively. - He hopes another developer will build a FigJam widget showing what music participants are listening to. ## Looking Ahead - Tekeste plans to improve his voting widget and make it the best possible tool for FigJam sessions. - He is excited about the public release of FigJam plugins and widgets and the creativity it may encourage. - He is also inspired by the growing popularity of playful, animated, and interactive interfaces, citing Apple Maps and the Honk app as examples. Figma’s open plugin and widget platform gives developers like Tekeste a practical way to turn community requests into useful design tools. His work demonstrates how existing web skills, combined with active listening to users, can produce focused improvements to collaborative workflows.

Read original(opens in new tab)
User InterfaceJavaScriptWeb DevelopmentMarkdown+2
figma2 min readCurated summary

Figma for students and educators | Figma Blog

Figma’s Education plan gives students and educators free access to Professional features and unlimited collaboration. The platform supports virtual and hybrid classrooms by combining teaching materials, activities, critiques, and community in one shared space. It also helps students build practical design skills, portfolios, and professional connections. ## Figma for Educators - Figma enables real-time and asynchronous participation, making it useful for in-person, remote, and hybrid teaching. - Educators can consolidate lectures, assignments, activities, and critiques into a single file with multiple pages. - Shared files encourage iteration and feedback, helping quieter students participate more actively. - Visual collaboration can create a more inclusive classroom environment, including for deaf and hard-of-hearing students. - Teachers can use Figma to build community, such as creating collaborative class yearbooks with comments, stickers, and student profiles. - Figma offers group demos and shared teaching resources to help educators adopt the platform. ## Figma for Students - Working collaboratively in Figma exposes students to modern, cross-functional design workflows used in professional settings. - Students can preserve research, iterations, and design process—not just final visuals—for portfolio reviews and interviews. - Figma Community files allow students to learn through duplication, remixing, and studying other designers’ work. - Student groups, hackathons, and other community programs provide opportunities to build relationships and gain experience. - Education newsletters highlight career-related topics such as hiring preparation, portfolio reviews, and internships. Figma recommends that students and educators use the free Education plan to create collaborative classrooms, document design processes, and connect with the wider design community.

Read original(opens in new tab)
User InterfaceFigmaUser ExperienceDesign Collaboration+2
figma3 min readCurated summary

Q&A with Robyn Kanner | Figma Blog

Robyn Kanner’s Config 2021 interview presents design as an active, collaborative practice rather than a fixed professional identity. Alongside her work as Creative Director for the Biden-Harris campaign, her answers emphasize persistence, teamwork, cultural awareness, and making things without being constrained by titles or tools. Her central advice is to stay present, keep creating, and define success through meaningful impact. ## Designing the Biden-Harris Campaign - Kanner led the Biden-Harris design team during the 2020 U.S. presidential election. - The team created a wide range of campaign materials, from JoeBiden.com to the campaign plane, working together in one Figma file. - She identifies helping elect Joe Biden as the greatest accomplishment of her career. - Her Config 2021 keynote provides a deeper account of the campaign and its creative process. ## A Relentless and Unrestricted Creative Practice - Kanner describes her creative process as “relentless.” - She does her best work early in the morning and late at night. - She rejects the idea of perfect design, saying there is “nothing perfect.” - Her advice to young designers is not to limit themselves to a job title—or even think of themselves primarily as designers—but simply to make things and let the rest develop naturally. - Her definition of design is immediate and action-oriented: “‘NOW.’” ## Collaboration and Team Culture - Good collaborators create space for the people around them. - Teams become genuine teams by “going through shit together.” - Kanner’s answers suggest that shared pressure, trust, and mutual support matter more than formal processes. - When asked whom she would want in a design critique, she chooses Michael Jordan, reflecting an interest in high-performance perspectives beyond design. ## Influences, Tastes, and Perspective - Her favorite UI typefaces are Decimal and Mercury, and she values type, color, and multiple color systems equally. - She admires her parents for shaping who she is. - She considers sociology underrated and code overrated within the design world. - Outside design, she highlights Jeff Buckley, BROCKHAMPTON’s “BUZZCUT,” and the video game Madden as sources of enjoyment and decompression. - She dismisses comparisons with other designers, emphasizing that everyone has their own path. ## Tools, Constraints, and Figma - Kanner dislikes being limited by tools, particularly Safari’s handling of animations. - She praises Figma as having “revolutionized creating.” - Her favorite Figma feature is Shift+H, though she jokingly says she likes all of them. - Her ambition to “put gradients on Mars” captures her playful, expansive approach to design. The interview ultimately recommends a broad and practical view of creativity: make meaningful work, support the people around you, resist restrictive labels, and focus on the present rather than chasing perfection or comparison.

Read original(opens in new tab)
User InterfaceFigmaDesign CollaborationTypography+4
figma3 min readCurated summary

Behind the feature: comments, contextually | Figma Blog

Figma’s Community comments feature was designed to turn a mostly one-way publishing platform into a space for direct creator–audience communication. The team combined general feed comments with spatial, in-editor-style comments, while carefully adapting interactions to preserve the file-viewing experience. Technical constraints mattered, but the hardest work involved resolving subtle interaction and edge-case decisions. ## Why Community Comments Were Needed - Community users could browse, duplicate, and install resources, but had no straightforward way to contact creators. - Figma wanted the Community to support deeper engagement through questions, feedback, and discussion. - The feature introduced two comment types: - **General comments**, displayed in a feed beneath the file. - **Contextual comments**, attached to specific locations within the design. ## Adapting the Existing Commenting System - The team initially expected to reuse Figma’s existing in-editor comments with minor changes. - They replaced the previous iframe-based file preview to enable communication of viewport information. - They also had to consider performance when files contained many comments. - The larger challenge was interaction design: - Community files traditionally supported one-way creator-to-audience communication. - Comments created a two-way channel between audiences and creators. - Contextual comments required spatial navigation rather than a simple linear feed. - Users needed to inspect comment locations while still being able to pan across the canvas. - The team aimed to encourage commenting without diminishing the existing view-only experience. ## Exploring the User Experience - Engineering, design, and product worked in a close feedback loop. - Designers used animated prototypes and GIFs rather than only static wireframes because commenting depended heavily on interaction behavior. - Explorations considered: - Sidebar comment feeds. - Different ways to embed comments around the viewer. - Mini-viewers and canvas interactions for locating comments. - Prototypes helped the team evaluate ideas against technical feasibility, UI edge cases, and the launch schedule. ## Launch Priorities and Design Decisions The team prioritized three goals: - Make entering the commenting experience quick and intuitive. - Give contextual comments enough surrounding space to understand their position in the file. - Deliver a technically feasible, appropriately simple solution within the project timeline. As a result, contextual comments were limited to fullscreen view, where users had enough space to understand the design context. Clicking the minimized canvas expanded it into fullscreen mode, while clicking and panning were disabled in the smaller preview to avoid compromising the primary browsing experience. The feature ultimately required more than porting existing code: it demanded a new interaction model for combining comments, spatial context, and file browsing. Figma’s approach shows the importance of iterative cross-functional prototyping when adapting a familiar feature to a fundamentally different product environment.

Read original(opens in new tab)
User InterfaceFigmaInteraction DesignIframe+2
figma2 min readCurated summary

11 activities in Figma for your classroom | Figma Blog

Figma’s collaborative, browser-based workflow makes it well suited to hands-on design education. This post presents classroom activities that help students learn Figma while practicing visual design, research, geometry, prototyping, and collaboration. The exercises range from beginner icebreakers to intermediate component and illustration projects, with duplicateable files for educators. ## Getting Started with Figma - **Student trading cards** - An introductory activity combining class introductions with basic Figma practice. - Students create social-media-style profiles using Auto Layout and components. - Working in one shared file exposes students to classmates’ processes and styles. - A gallery page can showcase the finished cards. - **Level:** Beginner - **Features:** Auto Layout, Multiplayer Editing - **Make a heart** - Students create and customize a heart using the Pen Tool, Layout Grid, and the Properties panel. - The exercise builds familiarity with foundational drawing and layout tools. - An optional challenge uses Smart Animate to make the heart pulse. - **Level:** Beginner - **Features:** Pen Tool, Properties Panel, Layout Grid ## Exploring Form, Geometry, and Research - **Figma tangrams** - Students use the seven-piece tangram puzzle to explore geometry and form. - Prompts include creating recognizable animals and experimenting with abstract shapes. - A more advanced version asks students to research and build their own reusable puzzle sets. - **Level:** Beginner - **Features:** Components, rotation, alignment - **Design research paper** - Students visualize research findings in a compelling, readable format. - The class builds a collaborative library of articles that peers can read and comment on. - Reviewing the collection encourages discussion about visual hierarchy and communication design. - **Level:** Beginner - **Features:** Layout Grids, Keyboard Shortcuts ## Practicing Components and Collaboration - **Chat windows** - Students design reusable chat components for conversations and visual feedback. - The activity emphasizes customization and creating components useful in future collaborative work. - **Level:** Intermediate - **Feature:** Auto Layout - **Collaborative illustrations with constraints** - Students work together to create a consistent system of illustrations or icons. - Shared constraints—such as a bespoke geometric grid and limited color palette—encourage cohesion and creative problem-solving. - Peer support and critique are central to the exercise. - **Level:** Intermediate Educators can adapt these activities to their students’ experience levels and duplicate the accompanying Figma community files. Together, they provide a practical progression from basic tool literacy to structured collaboration and reusable design systems.

Read original(opens in new tab)
User InterfaceFigmaCollaborative DesignAuto Layout+2
figma2 min readCurated summary

How Students Who Design set up Figma in their online classroom | Figma Blog

Students Who Design uses Figma as the central workspace for running an online product-design course. Its system combines personal onboarding, shared file organization, reusable UI templates, recorded lectures, hands-on assignments, and asynchronous instructor feedback. The approach helps students work independently while allowing instructors to monitor progress and provide guidance in a shared environment. ## Pre-Class Setup - Students create free personal Figma accounts and familiarize themselves with the editor before class begins. - Instructors invite students to the Students Who Design team as editors. - Lectures are stored in the shared workspace, with Loom recordings providing audio narration for self-paced learning. - Projects and naming conventions organize instructor materials, sponsorship work, brand assets, and student files. - Each student creates a Master Figma file using the naming format `Intro DPD: Name`, making work easy to locate and manage. ## Teaching Through Hands-On Projects - The three-week course centers on improving Messenger: - Research and design principles - A class-wide brainstorm to prioritize feature improvements - An individual high-fidelity user flow - Students watch recorded lectures and complete assignments on weekly deadlines. - Each student duplicates a master file containing a UI kit and Messenger building blocks, reducing setup time and keeping work consistent. - Students use Pages to document their process, with recommended organization including: - Numbered pages for easy scanning - Titles describing the design stage or page contents - Dedicated areas for exploration, inspiration, and revisions - Because students work in one file throughout the course, they can create and share Figma prototypes directly with instructors. ## Monitoring Progress and Providing Feedback - Figma lets instructors enter student files remotely and review progress without being physically present. - Viewing individual pages makes it easy to identify completed assignments and ongoing explorations. - Critique and feedback are treated as essential parts of the course, particularly for beginners. - The shared workspace supports asynchronous review while keeping student work, prototypes, and course materials connected. The recommended model is to establish a clear workspace structure before class, give students reusable templates, and keep all project development in one organized Figma file. This creates a flexible online classroom where students can learn at their own pace while instructors maintain visibility and provide timely design feedback.

Read original(opens in new tab)
User InterfaceFigmaPrototypingOnline Learning+2
figma3 min readCurated summary

Product design portfolio tips from a Figma recruiter | Figma Blog

A strong product design portfolio should be built around the needs of its audience: busy design leaders who may spend only seconds or minutes reviewing it. The goal is to make your abilities, experience, and approach immediately clear through focused project selection, simple navigation, and consistent presentation. Tailoring the portfolio to the role is more effective than trying to represent every project in your career. ## Understand Your Audience and Goal - Portfolios are commonly reviewed by design managers, creative directors, heads of design, or VPs of design. - These reviewers quickly look for: - The type of design you do - Your talents and interests - Relevant experience for the role - How you approach design problems - Your overall design ability - The portfolio should emphasize information relevant to the specific position rather than requiring reviewers to search through extensive content. ## Make the Landing Page Easy to Scan - Use a cohesive system for project thumbnails: - Keep logos or screenshots consistent in size. - Apply similar styling, such as matching backgrounds or drop shadows. - Label projects consistently with details like company, role, and medium. - A clear, orderly layout reduces the mental effort required to understand the portfolio and encourages reviewers to explore more projects. - Creative layouts are acceptable when differences are intentional and help communicate priorities rather than appearing arbitrary. - Put project previews directly on the landing page so visitors can reach the work in one click. - Avoid unnecessary navigation steps such as separate “About” pages, work icons, or project-selection screens before showing the portfolio. ## Choose Projects Strategically - Select projects according to your career goals: - Highlight mobile, web, or virtual-reality work when targeting those fields. - Emphasize relevant industries, such as fintech or healthcare, when changing sectors. - Do not attempt to include the full breadth of your career; hiring managers may not have time to review everything. - Older work from prestigious brands should not automatically be included if it no longer represents your current abilities. - Use the résumé to show the range of companies you have worked with. - Include older work only when it remains especially notable or relevant. - If you lack experience in the medium or sector you want to enter, create side projects to build targeted examples. - For example, a mobile designer seeking web work should develop web-focused projects. - Similar transitions apply to print designers moving into UX/UI, visual designers pursuing research, or engineers moving toward front-end ideation. ## Practical Recommendation Treat the portfolio like a design challenge: identify the audience, define the goal, and present only the clearest evidence that you are suited to the role.

Read original(opens in new tab)
User InterfaceFigmaUser ExperiencePrototyping+2
figma2 min readCurated summary

We refreshed Figma's UI: An inside look at our process | Figma Blog

Figma’s 2019 UI refresh aimed to modernize the product without disrupting users. Rather than redesigning its structure, the team focused on visual inconsistencies in typography, layout, color, and iconography, using extensive research and internal discussion to guide decisions. The process began by cataloging problems, then organizing them into broader themes. ## Why Figma Needed a Refresh - The interface had evolved piecemeal as the product expanded. - Teams created custom components when existing patterns no longer fit, producing inconsistent: - Tables, buttons, and input controls - Shades of gray, red, and blue - Visual and interaction patterns - The original UI foundation predated major features such as Multiplayer and Components. - Both users and employees increasingly noticed the inconsistencies. ## Step One: Brainstorming the Problems - Figma held a two-hour session with the entire design team. - Designers explored the product firsthand, documenting quirks, shortcomings, and successful patterns with notes and screenshots. - Findings were collected in a shared Figma file and text document. - Strong group reactions—such as an “oh shit, that’s bad” response—helped identify issues likely to have broad impact. - The team deliberately paused for several days afterward, allowing opinions to settle and new insights to emerge. ## Step Two: Organizing and Synthesizing Findings - The team revisited the brainstorm after the reflection period and debated which problems mattered most. - Designers converted detailed observations into broader post-it themes. For example: - Several notification inconsistencies became “We need a system for how we handle notifications.” - Notes were grouped by similarity, such as: - Color - Legibility - White space - Notifications - This clustering reduced noise and revealed larger systemic issues, including typography, icons, dialogs, toolbars, sharing, layers, components, and file browsing. - Figma found that grouping was useful but overly complex classification was not. - The team abandoned an additional “visual to foundational” axis because it made the framework harder to use. ## Lessons from the Process - A visual refresh often becomes necessary gradually rather than because of one decisive moment. - Broad, understandable categories are more useful than abstract or overly narrow ones. - Time between brainstorming and synthesis helps teams reassess initial reactions. - The refresh prioritized surface-level improvements so users could benefit from a more coherent interface without learning an entirely new product.

Read original(opens in new tab)
User InterfaceFigmaDesign SystemsUser Experience+2
figma3 min readCurated summary

How we built the Figma Design team | Figma Blog

Figma grew its design team from one full-time product designer to eight designers in about a year. The company argues that thoughtful hiring requires clearly defining team needs, aligning on evaluation criteria, and continually evolving those criteria as circumstances change. By making the process collaborative and structured, Figma established a stronger design culture built around critiques, ownership, and transparency. ## Building the Team - Figma initially struggled to keep pace with its engineering team because design responsibilities were spread across one full-time designer and several part-time contributors. - Because each hire significantly affects a small team’s culture and working style, the company prioritized deliberate growth rather than hiring quickly without a plan. - Within a year, the team had grown to eight designers and developed: - Collaborative design critiques - Clearer objectives - Defined areas of ownership - A more established team culture ## A Structured Hiring Process Figma adopted a three-phase framework for building its hiring criteria: - **Learn:** Study job descriptions and consult experienced design leaders to understand valuable skills and traits. - **Analyze:** Create a broad skills list, then narrow it to capabilities the company needs, the Design team should own, and every designer must possess. - **Evolve:** Revisit the criteria as team or company needs change, while developing existing employees when possible. The designers independently outlined their expectations for a new teammate, then merged their ideas in Figma to reach consensus. This helped distinguish essential requirements from desirable but negotiable skills. ## Reducing Interviewer Bias - Figma created explicit criteria for both product-design capabilities and cultural alignment with its values: **Be Bold, Be Inclusive, and Have Fun**. - The team used these criteria directly in Lever, its recruiting tool, to guide interview feedback. - Structured prompts reduced vague assessments and made it harder for interviewers to unconsciously change standards to match personal biases. - Existing team members evaluated themselves against the same criteria, revealing few surprises but ensuring they did not judge candidates on abilities they could not assess in themselves. ## Recruiting as a Team Effort - Defining the role did not eliminate the need for sourcing, networking, and extensive conversations with candidates. - Figma embedded its recruiter, Korin, into the design team by having her attend critiques and team meetings. - This gave her firsthand knowledge of the team’s work and helped her represent the role and identify suitable candidates more accurately. ## The Designers’ Backgrounds - The team included designers with varied experiences and strengths rather than identical profiles. - Lucy brought motion and visual-design expertise, along with experience spanning agencies, websites, and hardware interfaces. - Marcin contributed extensive UI experience from organizations including Google, Medium, and Code for America, as well as a strong attention to interaction and visual details. Figma’s experience suggests that small design teams should define their needs collectively, use consistent interview criteria, actively guard against bias, and involve recruiters closely in the team’s daily work.

Read original(opens in new tab)
User InterfaceFigmaUser ExperienceProduct Design+1