Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaOct 27, 20212 min readCurated summary

Behind the build: a Q&A with developer Tru Narla | Figma Blog

The post profiles Tru Narla, a software engineer and creator of FigJam’s Soundboard widget. Her project adds playful audio interactions to FigJam boards and demonstrates how accessible the widget platform can be for developers. Despite API limitations, documentation, experimentation, community support, and livestreaming helped her turn a side-project idea into a published product. ## Soundboard for FigJam - Soundboard lets users add fun sounds to FigJam boards. - Tru initially wanted to support user-recorded audio and preset sounds, but widget limitations prevented audio recording. - The idea came from wanting to create an interactive experience focused specifically on sound. ## Building the Widget - Tru began by reading the documentation and studying demo projects. - Much of the development involved trial and error and reducing the project’s scope to fit the available APIs. - A private Slack community for widget developers helped her share code, troubleshoot bugs, and stay motivated. - She found widget development easier and more enjoyable than expected. ## Inspiration and Motivation - Tru draws ideas from Twitter and everyday experiences. - She records potential project ideas and prefers building tools she would personally use. - Publishing a finished project was a major motivation after repeatedly starting—but not completing—side projects. - Streaming the development process on Twitch provided additional accountability and encouragement. ## Future Projects and Platform Potential - Her next project is an interactive piano with clickable keys and keyboard shortcuts mapped to different notes. - She is also considering multiplayer games, though they require more planning and development time. - Tru is excited by FigJam’s growing ecosystem of plugins and widgets and the possibilities still open to developers. - She particularly likes the new code embed feature and imagines using it for tutorials, system design, and code explanations. - She would also like to see running code displayed in a sandbox within FigJam. Tru’s experience suggests that developers can begin with a small, playful idea, use the available documentation and community resources, and gradually expand their ambitions as the FigJam platform evolves.

Figma Figjam Slack API+4

figmaOct 26, 20212 min readCurated summary

What’s new in Figma: October 2021 | Figma Blog

Figma’s October 2021 updates focus on making collaboration more flexible, prototyping faster, and design work easier to scale. FigJam gained widgets, plugins, templates, code blocks, advanced shapes, and open sessions, while Figma introduced interactive components and several workflow improvements. Together, these features aim to balance structured teamwork with experimentation and spontaneous collaboration. ## Work Better Together in FigJam - **Widgets** can be added directly to FigJam files to support activities such as: - Taking team selfies with Photo Booth - Checking team sentiment with Alignment Scale - Mapping organizational structures with Org Chart - **Plugins** help users develop and synthesize ideas more efficiently: - Tour Guide turns jam boards into slideshow presentations. - Color Picker expands color options for stickies and shapes. - Unsplash provides access to image libraries. - The FigJam toolbar now provides access to: - Plugins and widgets - Templates for brainstorming, workshops, research, and other activities - Code blocks and new shapes for technical collaboration - **Open sessions** allow visitors to join FigJam files without creating an account. ## Bring Designs to Life with Interactive Components - **Interactive components** create reusable interactive elements, reducing the amount of manual prototyping required. - Designers can experiment and iterate more quickly while collaborating with their teams. - Interactions inherited from main components are hidden on instances, making complex prototypes easier to understand and edit. - Additional prototyping improvements include: - `Shift + E` to switch between Design and Prototype tabs - Canvas visibility for interactions, allowing everyone to inspect and explore them - An option to disable keyboard navigation in prototype viewers for more realistic user testing - Copying and pasting prototype interactions to reduce repetitive work ## Explore and Design at Scale - Figma emphasizes supporting design systems while still leaving room for experimentation and new ideas. - The update introduces **branching**, presented as a way to help teams manage and explore design-system work at scale.

Figma Design Systems Prototyping Figjam+4

figmaOct 25, 20212 min readCurated summary

Interactive components: Less wiring, more inspiring | Figma | Figma Blog

Figma’s October 2021 update introduces interactive components as a way to bring reusable interactions and animations directly into the design workflow. By reducing manual prototype wiring and the number of required frames, the feature helps teams create, iterate on, and share more realistic prototypes. Additional improvements make switching between design and prototyping, managing complex canvases, and reusing interactions faster. ## Interactive Components - Interactive components let designers define interactions and animations between variants in a component set. - Component instances become immediately interactive in prototyping mode. - A single frame can replace many frames for states such as: - Multiple selected checkboxes - Open accordion menus - Button hover states - Teams reported prototype frame reductions of up to 10 times. - Designers can edit component states beside where the component is used and duplicate versions to explore alternatives. - Interactive components can be distributed through shared libraries, allowing teams to reuse preconfigured interactions with one click. - Figma improved performance, load times, stability, observation mode, and auto layout support after the beta period. ## Faster Prototyping Workflows - The shortcut **Shift + E** toggles between the Design and Prototype tabs without losing context. - Interactions inherited by instances from main components are hidden on the canvas, reducing visual clutter from numerous blue prototype arrows, or “noodles.” - Prototype interactions can be copied and pasted into frames, reducing repetitive setup work. ## Broader Impact on Design Teams - Interactive components narrow the gap between visual design and interactive behavior. - Reusable interactions help designers focus on user flows instead of manually wiring repeated states. - Shared libraries make it easier for less experienced Figma users to build functional prototypes. - The feature also supports more experimental prototypes, including animated objects, music notation, and interactive games or toys. Figma’s recommendation is to use interactive components and its playground file to make prototyping a more integrated, reusable, and iterative part of the design process.

Figma Design Systems Prototyping Auto Layout+2

figmaOct 20, 20212 min readCurated summary

Open sessions: jam with anyone, anywhere | Figma Blog

FigJam’s Open sessions let people join collaborative files without creating Figma accounts, removing friction for workshops, interviews, and meetings. Hosts retain control over access: sessions close after 24 hours by default, visitors are removed afterward, and hosts can end or restart sessions at any time. The feature is designed primarily for one-off collaborations with internal or external participants. ## Removing Barriers to Participation - Account creation can delay workshops, interviews, and other collaborative activities. - Open sessions allow occasional participants—including clients, candidates, research users, and cross-functional colleagues—to join immediately. - Participants can contribute without setup or an existing Figma account. ## How Open Sessions Work - Hosts choose when and how to open a FigJam file. - Visitors are removed automatically when the session ends. - Each session expires after 24 hours by default. - Hosts can close a session early or start another session for the same file. ## Common Use Cases - **Workshops:** Invite clients or research participants to collaborate directly in FigJam. - **Interviews:** Share a file with candidates in advance so they can present their work; technical interviews can use the CoderPad widget. - **Cross-functional meetings:** Include stakeholders in planning meetings, retrospectives, brainstorming sessions, and feedback discussions. - **One-off jams:** The feature is intended for both large-group events and one-on-one sessions. ## Availability - Open sessions were available across all plans while FigJam was in beta. - Beginning February 1, 2022, the feature became available on FigJam Professional and Organization plans. Open sessions are best suited to temporary collaboration where ease of access matters more than requiring every participant to maintain an account.

Figma Figjam Plugins Widgets+2

figmaOct 18, 20212 min readCurated summary

Introducing new FigJam prices and a more open platform | Figma Blog

FigJam is expanding from a beta whiteboard into a more accessible, customizable collaboration platform. Figma announced free and paid pricing, lower-friction participation through Open sessions, and a broader ecosystem of widgets, plugins, embeds, templates, shapes, and code blocks. The goal is to help entire organizations use FigJam for meetings, workshops, visual thinking, and everyday productivity. ## More accessible pricing and participation - Starting February 1, 2022, FigJam’s Starter plan will remain free. - The free plan includes: - Unlimited personal whiteboards - Three shared whiteboards - Unlimited collaborators - Paid plans provide unlimited shared whiteboards: - FigJam Professional: $3 per editor per month - FigJam Organization: $5 per editor per month - **Open sessions** let anyone join a FigJam session for 24 hours without logging in, making one-off workshops and planning meetings easier to host. ## Widgets for collaboration and meetings Widgets allow teams to customize FigJam and support social, facilitation, and productivity workflows. - **Team connection:** Donut offers water-cooler prompts and drawing games; other widgets include Rock Paper Scissors and Connect Four. - **Meeting facilitation:** - Simple Vote collects feedback after brainstorming. - Alignment Scale checks whether participants agree. - **Productivity support:** - Table imports Google Sheets data into FigJam. - Stark for FigJam provides accessibility checklists and guidance. - Org Chart helps map departments and plan headcount. - Figma planned to expand widgets with kanban boards, timelines, inline text editing, and improved media embedding. ## Plugins for faster creation - Plugins focus on helping users express and create ideas more quickly, while widgets emphasize collaborative interaction. - More than 40 plugins were already available. - Vimeo was developing a Vimeo Record plugin for recording screen captures and voice-over explanations directly in a FigJam file. - Other examples include: - Tour Guide for animated presentations - Create Sticky from Text for converting text into sticky notes - Stamp Counter for quickly counting votes ## A broader, community-built platform - Figma opened FigJam’s widgets and plugins platform to developers after an initial community beta. - The company positioned this open ecosystem as a way to let users shape how FigJam works for different teams and use cases. - Additional platform improvements announced included embedded content such as videos and documents, new shapes and code blocks, and templates accessible from the FigJam toolbar. FigJam’s strategy is to combine broad access with extensibility: keep basic collaboration free, remove barriers for guests, and let teams adapt the workspace through community-built tools.

Figma Figjam Plugins Widgets+2

figmaOct 13, 20213 min readCurated summary

LiveGraph: real-time data fetching at Figma | Figma Blog

LiveGraph is Figma’s in-house real-time data-fetching layer built on PostgreSQL. It lets frontend developers declare live data views with GraphQL-like queries, while LiveGraph reads PostgreSQL’s replication stream to deliver updates within milliseconds. Figma built it to replace fragile, manually maintained client events and to support real-time subscriptions at large scale without relying on polling or a new database technology. ## Problems with Figma’s Earlier Real-Time Architecture - React clients initially loaded large data sets through Ruby HTTP endpoints and stored them in Redux. - Backend code manually emitted events whenever database records changed. - Frontends subscribed over WebSockets and applied those events to client state. - As data volumes grew, Figma split requests into incremental loads, making data ownership and availability harder to reason about. - Complex changes—such as permission updates affecting many resources—were difficult to represent with individual events. - Events could arrive out of order or fail to correspond reliably with database writes, causing client state to diverge from server state. ## Why Figma Chose Live Queries - Figma wanted developers to define data subscriptions declaratively rather than manually coordinate fetches and update events. - GraphQL provided a natural interface for describing the relevant portion of the object graph. - LiveGraph uses “live queries,” which keep query results synchronized, rather than GraphQL subscriptions in the narrower sense of consuming event streams. - The system is a query and data-fetching layer over existing PostgreSQL infrastructure, not a replacement persistence layer. ## In-House System Versus Existing Tools - Figma’s multiplayer service handles collaborative writes and conflict resolution within individual files, whereas LiveGraph focuses on reading application data. - Systems such as Hasura, Prisma, and PostGraphile offered GraphQL subscription features but were not designed primarily for Figma’s scale of concurrent live subscriptions. - Polling was rejected because it increases database load and requires developers to choose polling intervals for each query. - Figma’s collaborative product made real-time data central enough to justify building and operating a specialized internal system. - The company did not claim LiveGraph was universally superior; its value came from matching Figma’s specific scale and requirements. ## Replication-Stream-Based Updates - LiveGraph executes queries directly against PostgreSQL. - It tails the database replication log to detect changes instead of repeatedly polling tables. - Reading the replication stream enables update latency measured in milliseconds. - Because the system must process the complete volume of database changes, its architecture needs to distribute updates across machines and database shards. - This approach separates the complexity of detecting database changes from product code, allowing frontend engineers to work with declarative JSON data views. ## Frontend API - Product developers send GraphQL-like queries and receive results as JSON trees. - A schema defines server-side entities and relationships, while views expose queryable subsets of that graph. - The frontend can therefore request the data it needs and rely on LiveGraph to keep the result synchronized as the underlying PostgreSQL data changes. LiveGraph’s central recommendation is architectural: derive live client views from the database’s authoritative change stream rather than maintaining a parallel network of hand-written events. For organizations with similar scale and real-time requirements, this can improve consistency and simplify product development, though Figma’s in-house approach was justified by its unusually collaborative workload.

React PostgreSQL TypeScript GraphQL+4

figmaOct 11, 20212 min readCurated summary

How (and why) we built branching | Figma Blog

Figma built branching to preserve the benefits of real-time collaboration without letting unfinished or experimental work disrupt approved designs. Branches provide isolated spaces for exploration while keeping the main file a reliable source of truth. The design prioritizes simplicity, familiar multiplayer behavior, and protection against data loss. ## The Need for Branching at Scale - Figma’s real-time multiplayer model usually helps teams work in one shared file. - As organizations grow, however, design workflows become harder to manage: - Unapproved changes can reach production code. - Work may be overwritten. - Teams may struggle to distinguish work in progress from approved designs. - Branches let designers experiment, iterate, contribute to libraries, or preview work without changing the main file. - Changes can be incorporated into the main file only after review and approval. ## Balancing Freedom and Structure - Growing design teams increasingly requested stronger version-control workflows. - Traditional branching comes from software development, where files and changes are stored locally. - Figma had to adapt the concept for cloud-based files, asking: - Whether people should continue editing the main file simultaneously. - How collaboration should work within branches. - How to introduce version control without overwhelming designers with complexity. ## Designing Around Figma’s Multiplayer Model - Figma chose a purpose-built approach rather than copying existing development tools. - Simplicity and consistency became core principles: - The main file remains multiplayer. - A branch behaves like a regular Figma file. - Existing editor and viewer permissions continue to apply. - The system emphasizes data safety so users’ changes remain protected. - Figma intentionally limited complexity, including preventing branches from being created from other branches. ## The Complexity of Merging - Merging involved more than simply resolving conflicting edits. - Figma also had to handle operational problems such as: - The file changing while someone reviews a merge. - A user losing their connection midway through the process. - These cases required safeguards to ensure merges remain understandable, recoverable, and safe. Branching is therefore presented as a structured layer on top of Figma’s collaborative model: teams can explore freely in branches while maintaining a dependable, approved main file.

Figma Real Time Collaboration Cloud Computing Version Control+2

figmaSep 26, 20212 min readCurated summary

What’s new in Figma: September 2021 | Figma Blog

Figma’s September 2021 updates focus on making remote collaboration feel more natural and interactive. New audio, cursor chat, and high-fives let teams communicate and react without leaving Figma or FigJam. The release also adds workflow improvements for importing data, exporting visuals, editing text, and pasting assets more precisely. ## Audio Collaboration in Figma and FigJam - Users can start audio conversations directly inside a file. - Audio supports quick questions, spontaneous collaboration, working sessions, and presentations. - Figma planned to introduce beta live captions for audio in the desktop app. ## Cursor Chat and High-Fives - Cursor chat lets collaborators ask questions or send encouragement without interrupting a speaker. - FigJam high-fives provide a lightweight way to celebrate progress or conclude a meeting. - These features are designed to restore the informal reactions and social cues often missing from remote work. ## Spreadsheet Import and Export - Spreadsheet cells can be copied into FigJam and converted into sticky notes. - Selected sticky notes can be exported as a CSV file. - This is especially useful for user research and organizing feedback. ## Exporting FigJam Diagrams - Users can export selected objects or an entire FigJam file. - Available formats include PNG, PDF, and JPG. - Exported diagrams can be reused in presentations, emails, and other documents. ## Text and Layout Improvements - Line spacing for bulleted and numbered lists can be adjusted through the type details panel. - FigJam text boxes, sticky notes, and shapes can contain multiple text sizes within the same object. ## More Precise Pasting - **Paste here** places copied content at a chosen location using the right-click menu. - **Paste to replace** swaps a selected object with copied content using `Shift` plus `⌘ + V` or `Ctrl + V`. - **Multi-paste** places the same copied object in the same position across multiple selected frames or groups. Together, these updates make Figma and FigJam better suited to collaborative remote work while reducing friction in common design and workshop tasks.

Figma Figjam Real Time Collaboration Png+4

figmaSep 14, 20212 min readCurated summary

How Elsewhen builds digital products for their clients | Figma Blog

Elsewhen, a UK-based digital product consultancy, uses Figma as a collaborative workspace throughout the product-development process—not just for final designs. Its partnerships with Spotify and Inmarsat show how shared tools, reusable assets, and structured collaboration can reduce operational friction while supporting creativity and faster delivery. ## Improving Design Productivity at Spotify - Spotify wanted to measure and improve designer productivity without reducing creative quality. - Rather than counting screens, components, or hours spent, Spotify and Elsewhen focused on identifying workflow obstacles and opportunities for improvement. - They created the **Design Productivity Blueprint**, an open-source Figma file containing: - Workshops - Interview templates - Frameworks for analyzing design-team workflows - The goal is to help designers spend less time on routine work and more time exploring and solving problems creatively. ## Creating a Design System for Inmarsat - Inmarsat’s distributed workforce and reliance on external design agencies made collaboration difficult. - Designers and developers lacked a shared source of truth for components, files, and assets. - Designers frequently rebuilt common components from scratch, slowing product development and making onboarding harder. - Elsewhen created Inmarsat’s first Figma-based design system using an existing self-service portal project as its foundation. - The system established reusable standards for: - Typography - Buttons - Icons - Grids - Other common interface components - Centralizing these assets allowed internal teams, developers, and partner agencies to access the same resources and build products more quickly. ## Figma as a Collaborative Home Base - Elsewhen uses Figma across exploration, workshops, prototyping, and client collaboration. - Real-time access removes routine steps such as exporting, uploading, and distributing design assets. - Shared files and component libraries improve communication between consultants, clients, designers, and developers. - The broader lesson is that better collaboration systems can improve both productivity and the quality of creative work. Elsewhen’s work suggests that organizations should treat design tools as shared operational infrastructure. Establishing common workflows, reusable components, and accessible sources of truth can help teams reduce duplication, onboard faster, and deliver stronger products.

Figma Design Systems Prototyping Collaborative Design+2

figmaSep 12, 20212 min readCurated summary

Announcing Schema, Figma’s design systems conference | Figma Blog

Figma announced Schema, a virtual conference dedicated to building, scaling, and contributing to design systems. The event reflects the shift from static, siloed style guides toward collaborative tools, shared visibility, and cross-functional participation. Schema aims to help practitioners exchange practical lessons while recognizing that organizations of every size are still refining their systems. ## The Evolution of Design Systems - Early design-system workflows relied on PDF style guides and developers translating design decisions into code. - These processes were often separated across teams and tools, making collaboration and alignment difficult. - Modern systems emphasize collaboration, visibility, flexible tooling, and shared understanding. - Design systems now involve contributors beyond traditional design roles, including developers and other design-adjacent collaborators. ## Why Figma Created Schema - Design systems include more than libraries, components, and styles. - Successful systems also depend on: - Clear communication - Measurement and demonstrating impact - Community participation - Processes that encourage contribution - Figma wanted to create a space where practitioners could share how they build and manage systems at different organizational scales. ## Event Details and Audience - Schema was scheduled for October 7, 2021, at 8:30 a.m. PT. - The conference was entirely virtual. - It targeted: - Design systems and design operations leaders - Teams formalizing their first design system - Organizations managing systems at scale - Teams extending Figma workflows through APIs, plugins, and custom tooling - Live attendance was limited, with applications accepted through October 4. Talks were also planned for free release in the Figma Community. ## Conference Themes - **Build:** Practical approaches to creating design systems of different sizes. - **Scale:** Strategies for adoption, measuring return on investment, and expanding system capabilities through tools and plugins. - **Contribute:** Methods for developing internal communities and empowering teams to improve the system. Schema was positioned as an opportunity for practitioners to learn from companies both large and small. Its central recommendation is that design systems should be treated as collaborative, evolving products supported by communication, measurement, tooling, and broad participation.

Figma Design Systems Plugins Front End Development+2

figmaSep 1, 20213 min readCurated summary

Inside Figma: getting out of the (secure) shell | Figma Blog

Figma replaced its traditional bastion-host SSH model with a zero-trust shell-access system built on AWS Systems Manager Session Manager. The design combines Okta, AWS SSO, phishing-resistant WebAuthn MFA, short-lived IAM credentials, and centralized session logging. This eliminated exposed SSH ports while making access easier to manage, audit, and roll out incrementally. ## Why Figma moved beyond bastion hosts - Bastion hosts became increasingly difficult and time-consuming to secure and manage as Figma scaled. - Because bastions are critical security controls, attackers may target them to gain access to production systems and user data. - Figma’s replacement aimed to provide: - A smooth and reliable developer experience - Zero-trust networking - Strong authentication and phishing-resistant MFA - Short-lived, automatically rotating credentials - Centralized auditing and session tracing - Minimal operational maintenance - Incremental, backwards-compatible adoption ## Choosing AWS Systems Manager - Figma evaluated commercial products such as Okta Advanced Server Access. - These products lacked flexibility for existing workflows, were not always available to Figma, and could introduce external availability dependencies. - Since Figma already relied heavily on AWS, the team built a proof of concept using AWS services. - Systems Manager Session Manager provides: - Authenticated, encrypted TLS connections between users and managed instances - Interactive shells and command execution - SSH tunneling when needed - Access to EC2 and ECS without exposing SSH ports or making instances externally reachable - Centralized permission management through IAM roles ## SSO, authentication, and access control - Okta integrates with AWS SSO to provide centrally managed authentication. - Figma requires device trust and WebAuthn-based multi-factor authentication. - Authenticated users assume dedicated, minimally privileged IAM roles. - AWS access tokens are short-lived, limiting the impact of stolen credentials. - Session Manager records session transcripts in an encrypted S3 bucket for investigation and auditing. - Okta group synchronization makes access management straightforward for IT teams. - Engineers can start sessions either through the AWS Systems Manager console or through Figma’s custom command-line tool. ## Mitigating AWS SSO phishing risks - AWS SSO can be abused through device-code phishing, where attackers trick users into approving an authorization request created by the attacker. - Figma added monitoring and alerts to detect suspicious authentication activity. - Engineers are also expected to treat unexpected SSO authorization pages as suspicious. ## Setting up Session Manager - AWS provides configuration guides for both EC2 and ECS. - Figma’s approach uses Session Manager as the secure access layer while relying on IAM policies, SSO groups, and encrypted logging to control and audit sessions. - The system preserves existing workflows where necessary while removing the need for publicly accessible SSH infrastructure. Figma’s experience suggests that teams already invested in AWS can build a practical zero-trust shell-access system with native services. Session Manager, combined with strong SSO controls, least-privilege IAM, short-lived credentials, and centralized logging, offers a simpler and more secure alternative to bastion-based SSH.

Iam Zero Trust Security Ssh Okta+3

figmaAug 30, 20212 min readCurated summary

Talk it out in Figma and FigJam | Figma Blog

Figma introduced audio and cursor chat to make remote collaboration feel more like working together in person. These tools let teammates communicate directly inside Figma and FigJam without switching apps, while FigJam also adds high-fives for lightweight social interaction. The goal is to support both spontaneous conversations and structured, synchronous work without replacing asynchronous workflows. ## In-File Communication - Audio and cursor chat keep questions, feedback, and discussions within the shared file. - Users can: - Add a question or message to their cursor. - Start an audio conversation with teammates. - Share feedback in real time while viewing the same design or board. - The features are designed to be fast and low-friction, without downloads, phone calls, or calendar invitations. ## Recreating In-Person Collaboration - Figma aims to restore informal interactions lost in remote work, such as: - Asking a quick question at a colleague’s desk. - Brainstorming spontaneously. - Requesting feedback during a design review. - Teammates can encounter one another in a file and start a conversation directly from there. ## Lightweight Jam Sessions - Audio and cursor chat can replace a video meeting when video is unnecessary. - Teams can brainstorm in FigJam while using: - Templates to structure activities. - Timers to keep sessions focused. - Audio for live discussion. - These tools are intended to complement, not replace, asynchronous collaboration. ## Availability and Future Features - Cursor chat is available to everyone in Figma and FigJam. - FigJam users can send high-fives. - Audio was rolling out to Figma education and paid plans. - Live captions for the Figma desktop app were planned for open beta, enabling more accessible conversations and further product improvements. Figma’s recommendation is to use in-file communication for quick questions, spontaneous syncs, and focused workshops, while continuing to rely on asynchronous workflows when teammates need independent time to work.

Figma Figjam Real Time Collaboration Audio Chat+2

figmaAug 25, 20212 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.

Figma User Experience User Interface Design Collaboration+2

figmaAug 24, 20212 min readCurated summary

What’s new in Figma: August 2021 | Figma Blog

Figma’s August 2021 updates focus on faster workflows, more flexible customization, and easier design-system management. The company expanded its plugin ecosystem into FigJam, improved the Figma plugin API, and introduced tools for moving, swapping, and finding components. Smaller usability improvements also addressed common frustrations in both products. ## Plugins and Widgets for FigJam - FigJam gained support for: - **Plugins**, which automate tasks such as organizing sticky notes, customizing styles, and importing data. - **Widgets**, interactive canvas objects for polls, voting, games, notepads, and other collaborative activities. - Plugins are accessible to users on every plan. - Developers can create plugins with basic HTML and JavaScript, while widgets can be built with React. - Widgets were initially offered through a private beta. ## Expanded Figma Plugin API - Plugins can now write to prototypes, enabling developers to: - Automate prototype creation. - Modify interactions in bulk. - Improve prototyping workflows without manual repetition. - **Plugin parameters** let users provide input through quick actions, avoiding the need for custom plugin interfaces. - Plugin parameters were released in open beta, with examples available through Figma’s plugin samples. ## Easier Design-System Maintenance Three component-management improvements make it simpler to scale and reorganize design systems: - **Move components:** Published components and component sets can be moved between files without breaking instance links. - **Swap libraries:** Entire style and component libraries can be replaced at once instead of updated individually. - **Search components:** Pressing **Shift + I** opens a shortcut for quickly locating components. ## Usability Improvements - Transparent objects now automatically knock out shadows behind them, reducing the need for manual adjustments. - Holding **Shift** while using the pencil tool constrains lines to straight paths in both Figma and FigJam. - Additional bug fixes and improvements were documented in Figma’s release notes. Together, these updates make Figma and FigJam more extensible, collaborative, and efficient—particularly for teams managing large design systems or automating repetitive design and prototyping tasks.

Figma Design Systems Figjam React+3

figmaAug 24, 20212 min readCurated summary

FIT’s principles for fostering a collaborative classroom | Figma Blog

Professor Christie Shin of the Fashion Institute of Technology uses Figma to create a virtual classroom centered on systems thinking, frequent feedback, and open collaboration. Her approach treats design as an evolving process rather than a finished object, helping students build habits that mirror professional design teams. She organizes coursework into Figma teams, projects, files, and templates while preserving space for experimentation and individual expression. ## Celebrate Early Work - Students share unfinished ideas regularly instead of waiting for polished presentations. - They visit one another’s files and provide feedback both verbally and directly in Figma. - This reduces the fear of exposing imperfect work and reinforces design as a way of thinking. ## Guide the Process While Leaving Room to Grow - Coursework—from exercises to final presentations—is kept in Figma. - Students receive structured files with named pages and templates for each activity. - The infinite canvas leaves room for sketches, iterations, and exploratory work. - Each file becomes a “creative journey,” documenting research, summaries, wireframes, and development over time. ## Work Individually, Together - Students complete individual projects within study groups. - For a project involving an MTA app design system and video case study, students presented progress incrementally rather than waiting for final critiques. - Continuous peer feedback reflects real-world cross-functional collaboration and helps students become less attached to initial solutions. ## Embrace Influences - Students are encouraged to share work openly instead of hiding ideas to prevent others from copying them. - Shin frames influence as a normal and valuable part of design practice. - Each project requires students to collect and credit visual references from professional designers and classmates. - Discussing these influences during critiques makes the design process more transparent. The article recommends combining clear structure with open collaboration: provide students with organized tools and milestones, but give them room to experiment, share early work, learn from peers, and acknowledge the influences shaping their designs.

Figma Design Systems User Experience Design Wireframing+2