CSS

31 posts

figmaAug 23, 20212 min readCurated summary

Bringing the power of our open platform to FigJam | Figma Blog

Figma is extending its open plugin platform to FigJam, allowing builders to create plugins and interactive widgets. Plugins automate individual workflows, while widgets support collaborative experiences such as polls, voting, and games. The APIs are designed to be approachable for developers familiar with JavaScript, HTML, or React. ## An Open Platform for FigJam - Figma’s original plugin API aimed to make customization accessible: anyone who can build a website should be able to build a plugin. - FigJam extends this philosophy while emphasizing collaboration and shared interaction. - Plugins can connect workflows, import real data, and automate repetitive design or brainstorming tasks. ## Interactive Widgets for Collaboration - Widgets can be dragged directly onto FigJam boards and used by multiple participants. - Potential uses include: - Voting and polls - Games - Interactive team activities - The widget API is declarative and functional. - Developers define interfaces with components such as `Frame`, `Rectangle`, `Text`, and `SVG`. - Event listeners can execute code in response to actions such as clicks. - Widgets can include inline property menus similar to native FigJam objects. - Synced state allows interactions, such as a counter, to remain consistent for everyone in the file. - The API is modeled after React, with components whose properties resemble CSS, reducing the learning curve for React developers. ## Plugins for Workflow Automation - Plugins are intended to reduce repetitive work and help teams focus on collaboration. - Examples include converting CSV data into sticky-note grids or creating sticky notes from text. ### Organization and Synthesis - Sort sticky notes by color. - Add tags for categorization. - Extract themes with tools such as word clouds. - Count votes using stamp counters. ### Task Automation - Add features such as spell checking and find-and-replace. - Generate large groups of objects automatically, such as 100 colored sticky notes. - Existing Figma plugins, including SPELLL, can be republished for FigJam. ### Content Libraries - Import icons, emojis, logos, and other reusable assets. - Planned integrations include Icons8, Material Design icons, Iconify, and Brandfetch. ### Customization - Plugins can help users apply custom colors, fonts, and text styles, addressing requests for more personalization in FigJam. FigJam’s open platform combines workflow automation with collaborative interactivity, giving developers a straightforward way to build tools that make brainstorming more efficient and engaging.

CSS Figjam React JavaScript+4

figmaMar 29, 20212 min readCurated summary

Behind the scenes of creating the official Figma kit for Tailwind UI | Figma Blog

Tailwind Labs created an official Figma kit to meet strong customer demand for Tailwind UI designs. Building it required translating more than 400 responsive code components into over 1,400 Figma components and 10,000 elements, with the final code serving as the pixel-perfect reference. The project showed that a production design kit needs rigorous structure, naming, responsive modeling, and reusable variants—not just visual accuracy. ## Building a Design File as a Product - Unlike exploratory product files, a commercial design kit is itself the final deliverable. - Every decision affects usability, including: - Layer names - Component structure - Page organization - Variant behavior - The team used the finished HTML and Tailwind CSS components as the standard the Figma files needed to match. ## Consistent Layer Naming - Consistent names allow Figma overrides to persist when users swap component instances or variants. - For example, a button’s text layer was always named “Text,” allowing customized text to carry over when changing button sizes. - This becomes especially valuable in complex components containing icons, headings, paragraphs, and links. ## Mirroring HTML Structure in Figma - Auto Layout, layout grids, and constraints let Figma layers approximate HTML structure and browser layout behavior. - Matching design and code architecture helps designers and developers share an understanding of what layouts can support. - It also exposes recurring implementation patterns, such as responsive padding and centered max-width containers, which developers can turn into reusable layout utilities. ## Using Variants to Simplify Components - Instead of maintaining dozens of separate components, the team combined options into configurable variants. - A single Badge component could cover type, size, theme, and optional secondary elements. - Variant properties were named consistently with code component properties, using terms such as: - Type - Size - Theme - Position - Breakpoint - State - Variants made components more discoverable and reduced duplication. - The completed kit contained 1,430 components averaging seven variants each; without variants, it would have exceeded 10,000 components. ## Scale and Quality Control - Over several months, the team built and rebuilt more than 1,400 components and 10,000 distinct elements. - The project emphasized detailed auditing and pixel-level consistency, although the provided article excerpt ends before describing that process. The main recommendation is to treat a shared Figma kit like a carefully engineered product: align it closely with the codebase, establish naming and structural conventions early, and use variants to keep a large responsive system manageable.

CSS Figma Design Systems HTML+3

figmaNov 18, 20202 min readCurated summary

Behind the feature: the making of the new Auto Layout | Figma Blog

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply. ## The Need for Automatic Resizing - Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed. - This repetitive work made responsive design systems difficult to build and maintain. - Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018. - During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real. ## Designing a Thoughtful Subset of Flexbox - The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code. - They intentionally avoided reproducing all of flexbox’s complexity. - Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use. - Core capabilities included: - Enabling vertical or horizontal layout on a frame. - Setting spacing between items. - Automatically sizing frames to hug their contents along the main axis. - Allowing fixed or content-based sizing on the counter axis. - Giving individual components independent alignment within their container. ## Prototyping and Team Alignment - The designer, Marcin, built an early prototype entirely in HTML. - The prototype helped the team experience the feature early and resolve interaction details before implementation. - It informed decisions about frame-handle decoration, dragging behavior, and visual outlines. - This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability. Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.

CSS Figma Design Systems HTML+3

figmaSep 16, 20202 min readCurated summary

Embracing the tension between code and design | Figma Blog

Figma argues that design and code should not be forced into identical workflows, but should learn from each other. Designers need freedom to explore, while developers benefit from structure, reuse, and consistency. At Config Europe 2020, Figma announced features intended to connect these strengths through more code-like design systems and more efficient handoff. ## Design Systems That Mirror Code - Teams often maintain separate component libraries for design and development, even when the components represent the same product elements. - Differences between the two systems can cause miscommunication and slow implementation. - Figma introduced **Variants**, which group related versions of a component—such as button sizes, styles, interaction states, or platform-specific versions—into one component. - Variants are intended to make Figma components more closely resemble reusable code components and simplify the asset panel. ## Interactive Prototyping with Variants - Before Interactive Components, designers often had to connect multiple frames and overlays to simulate component behavior. - **Interactive Components** allow designers to define prototype transitions directly between Variant states. - This makes component instances immediately interactive in prototype mode and reduces the work required to simulate UI behavior. ## Auto Layout Inspired by CSS - Auto Layout already allowed designs to respond automatically to content changes, such as expanding a button when its label changes. - Figma planned to make Auto Layout more closely match the web’s CSS box model and Flexbox. - Planned improvements included: - A simpler user interface - Stretching elements along both axes - Independent padding controls - Better spacing options for common patterns, such as navigation icons ## Making Large Design Systems Easier to Use - The redesigned **Instance Swap Menu** helps users navigate large component libraries with: - Thumbnails - Search - Keyboard shortcuts - These improvements reduce the need to remember exact component names or browse long lists manually. ## Improving Developer Handoff with Inspect - The new **Inspect Tab** replaces Figma’s Code panel and presents implementation-relevant information more clearly. - It displays the selected layer’s name prominently, helping designers and developers identify what is being built. - Developers can inspect values for Variants, colors, shadows, content, typography, borders, and other properties. - Values and complete key-value snippets can be copied directly into code. Figma’s overall direction is to preserve the creativity of visual design while adding the structure and reusability associated with software engineering. Features such as Variants, Interactive Components, improved Auto Layout, and the Inspect Tab aim to make design systems easier to maintain and translate into production.

CSS Figma Design Systems Prototyping+4

figmaJul 22, 20202 min readCurated summary

Behind the feature: shedding light on shadow spread | Figma Blog

Figma’s shadow spread feature appeared simple but required solving difficult geometry and rendering problems. Shadow spread must expand or contract a shape uniformly in every direction, which cannot be achieved reliably by merely scaling complex geometry. The feature ultimately illustrates how seemingly small product requests demand careful algorithmic and product tradeoffs. ## What Shadow Spread Does - Figma added support for adjusting shadow spread on: - Rectangles - Ellipses - Frame backgrounds - Component backgrounds - The feature mirrors CSS `box-shadow` behavior. - Users had requested the capability for more than two years. ## Why Shadow Rendering Is Complicated - A standard drop shadow is created by: - Copying an object’s geometry - Filling it with a single color - Applying a blur - Rendering it beneath the original object - Simply scaling the geometry works for basic rectangles but fails for complex shapes. - For shapes with holes, such as the Figma logo, spread must expand or contract every boundary independently rather than scale the entire object. - Correct behavior requires preserving the shape’s internal structure while offsetting its edges uniformly. ## Algorithmic and Rendering Constraints - Several algorithms could produce the desired geometry, but they did not fit cleanly into Figma’s existing rendering architecture. - Using strokes as a shortcut was also unsuitable because: - Stroke handling treats certain vertex angles differently from shadow spread. - The prototype renderer lacked stroke-generation code. - Implementing the feature robustly risked adding complicated geometry logic to two separate rendering codebases. ## Lessons from the Implementation - The project began as a small Maker Week experiment but grew into a weeks-long engineering effort. - The work involved exploring geometry algorithms, studying relevant W3C specifications, and making product-prioritization decisions. - The feature demonstrates that visual effects which appear basic in a user interface can require substantial low-level rendering infrastructure. Figma’s approach was to balance visual correctness, implementation complexity, and compatibility with its existing renderers rather than pursue an idealized solution at any cost.

CSS Computational Geometry Computer Graphics Box Shadow+2

figmaSep 5, 20192 min readCurated summary

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog

Figma’s first Plugin Show & Tell highlighted the creativity and practical value emerging from its newly opened plugin ecosystem. The livestream featured five developers demonstrating tools for design-system quality checks, spell checking, icon management, documentation, typography, and even voice control. Figma encouraged developers to explore its Plugin API, build tools for their own workflows, and participate in future community events. ## Community Plugin Showcase - The event was created to: - Promote community-built plugins. - Encourage developers to experiment with the Figma Plugin API. - Give users an early look at upcoming tools and features. - The recorded livestream included live demos from five plugin developers. ## Design Quality and Productivity Tools - **Toybox Roller**, presented by Jono Kolnik, helps identify and correct design errors and inconsistencies against an organization’s design system. - **Tekeste Kidanu’s Spell Check plugin** brings spelling assistance into Figma. - Tekeste also demonstrated integrating **Cleanmock** directly into Figma. ## Icons, Documentation, and Object Management - **Iconify**, presented by Vjacheslav Trushkin, provides access to hundreds of icon sets for use in both design work and production workflows. - Jackie Chui demonstrated several utilities: - Improvements to **Find & Replace**. - A plugin for adding documentation links to components. - **Paste to Fill**, which converts pasted content into image fills. - A forthcoming tool for managing margins and object sizing within frames using configurable presets. ## Typography and Voice Control - Andrew Goodwin showed a plugin for selecting and applying typography rules. - He also demonstrated a voice interface for controlling Figma. - The project aimed to map the entire Figma Plugin API to voice commands, allowing users to operate many Figma features verbally. ## Resources for Plugin Developers Figma directed developers to several resources: - Setup guides explaining plugin architecture, canvas communication, browser APIs, and development workflows. - Official Plugin API documentation. - Figma Plugin DS, a dependency-free HTML, CSS, and JavaScript design system modeled after Figma’s interface. - Open-source plugin examples on GitHub. - FigPlug for TypeScript, React/JSX, asset bundling, and manifest generation. - A community Slack workspace for questions and collaboration. The event demonstrates that Figma plugins can automate repetitive work, connect external data and services, and tailor Figma to specialized team workflows. Developers interested in extending Figma should start with the API documentation and open-source examples, or build a private plugin for internal needs.

CSS React TypeScript JavaScript+4

figmaApr 24, 20192 min readCurated summary

Getting to the bottom of line height in Figma | Figma Blog

Figma explains why it is changing text layout so that extra line height is distributed above and below letters and measured more modernly. The decision grew out of a historical review of typography, from metal type to digital fonts, where old physical constraints and platform inconsistencies shaped today’s behavior. The update is optional, and existing files remain unchanged unless users choose to update them. ## Figma’s New Approach - Figma will distribute extra line height above and below text rather than handling it through older conventions. - Line height will be measured in a more modern way. - The change is optional: - Existing files will not change automatically. - Users can update older text at their own pace. - Figma developed the approach through research and testing because its users employ text in many different contexts. ## The Early Centuries of Typesetting - Metal type separated typography into two roles: - Type designers created letterforms. - Typesetters arranged physical blocks into readable pages. - Font size referred to the height of the metal block, not necessarily the visible letters. - Two fonts with the same nominal size could have different letter heights and baseline positions. - Typesetters could place lines directly together, a practice called setting type solid. - To improve readability, they inserted thin strips of lead between lines. - This spacing was called “leading,” pronounced “ledding.” - For example, 16-point type with 4 points of leading produced a 20-point line height. - Choosing the right amount of leading depended on the font, font size, and line length. - The physical system imposed constraints: - Leading could be added but not removed. - Fonts generally arrived as fixed, unchangeable blocks. - Baselines and internal font proportions varied between typefaces. ## Digital Typography Introduces New Problems - Computers replaced physical type blocks with collections of numerical data stored in font files. - Fonts had to support different platforms and formats, including Windows, Macintosh, and OS/2. - Rendering differences, bugs, and platform-specific behavior made typography less consistent. - Digital typography also created new freedoms: - Text could extend beyond traditional font boxes. - Elements could overlap. - Typesetters could add, reduce, or completely remove leading. - Unlike metal type, digital fonts could define arbitrary default line heights, often making them taller than the nominal font size for improved readability. Figma’s changes attempt to preserve useful typographic principles while adapting them to the flexibility—and historical complications—of digital text layout.

CSS Figma Typography Web Design+2

figmaApr 1, 20193 min readCurated summary

Pairing is the key to evangelizing your design system | Figma Blog

A successful design system depends on relationships and culture, not just tools, documentation, or component libraries. Robin Rendle argues that pairing directly with designers is the most effective way to build trust, discover system problems, and encourage adoption. Working together turns the system team from a source of criticism into a practical partner that helps teams move faster. ## Treat the Design System as a Cultural Project - Early efforts focused on creating a UI kit and component library, assuming better tools would solve inconsistency. - The author learned that design systems reflect relationships between designers, engineers, product managers, and customers. - Gusto complemented its technical work with: - A Slack channel for questions and feedback - Design system office hours - An introductory UI kit for new employees - These initiatives helped, but pairing proved more effective because it involved working directly with people. ## Pairing Is User Research - Side-by-side collaboration reveals: - Which components and patterns are confusing - Where documentation is incomplete - What feels awkward or works well - Which user needs the design system is failing to address - Pairing replaces assumptions with direct observation of how people actually use the system. - Sessions also help the team evaluate whether: - Designers and engineers know the component library exists - They understand current HTML, CSS, and accessibility practices - Components are being explained in terms of organizational benefits - Useful designs should become official reusable patterns - Unlike office hours, pairing reaches people before they necessarily recognize that they need help. ## Pairing Turns Critique into Collaboration - Design system guidance should feel like accelerating someone’s work, not restricting creativity. - New systems are often complex, poorly documented, and full of hidden constraints: - Limited color choices - Existing components that designers may not know about - Accessibility requirements - Technical limitations embedded in the codebase - Simply imposing these rules can make the design system team seem controlling, causing people to ignore documentation or work around the system. - Pairing creates a more productive conversation where the design system team shares institutional knowledge while learning what product teams need. - Both sides benefit: product teams work faster and learn reusable patterns, while the system team gains insight into real-world requirements. ## Pairing Builds Design System Advocates - Designers and engineers who receive direct, helpful guidance are more likely to understand and support the system. - Personal collaboration builds trust and makes adoption feel like an advantage rather than an obligation. - Each pairing session can turn participants into advocates who carry the system’s practices and rationale back to their teams. Design system teams should prioritize pairing as an ongoing form of user research, education, and relationship-building. The strongest systems are not merely documented and enforced; they are developed collaboratively with the people expected to use them.

CSS Figma Design Systems Accessibility+4

figmaAug 15, 20183 min readCurated summary

Learn how a Microsoft designer built an Icon Library in his spare time | Figma Blog

Jackie Chui, a Microsoft designer, built a browser-based library containing more than 4,000 company icons in just three weeks. The tool unified icons across design applications, made them searchable through designer tags and engineering class names, and supported reverse searches using pasted icons. Its success came from focusing on practical user needs, leveraging familiar web technologies, and distributing a simple first version quickly. ## Researching Users and Existing Tools - Jackie interviewed Microsoft designers and observed their workflows to identify problems with existing icon management. - He evaluated IconJar, which offered organization and copy/paste functionality but lacked: - Shared, crowdsourced tagging - Browser and cloud access - Windows compatibility - These limitations led him to build a custom internal solution after hours. ## Designing and Building the Library - Jackie first created the interface in Sketch, borrowing ideas from IconJar and applying Microsoft’s Fabric design language. - With existing HTML, CSS, and JavaScript experience, he used Meteor.js to build both the frontend and backend. - A Meteor React tutorial helped him adapt a simple to-do-list database into an icon database. - Working on a concrete problem allowed him to learn development concepts while building the product. ## Extracting and Organizing Icons - Microsoft’s icons were stored in a font file, requiring users to copy and paste special Unicode icon characters into their designs. - Jackie extracted the icon files and retrieved each icon’s Unicode character. - He found Microsoft documentation containing the corresponding engineering class names. - The names were collected in Excel, converted to JSON, and imported into the application. - The resulting library let designers search for icons and copy their characters from one central location. ## Distribution and Adoption - Jackie hosted the application on Microsoft Azure. - He initially emailed the link to his team, after which word-of-mouth spread it throughout the design studio. - Users helped identify bugs and suggest features for version two. - The library quickly became part of many designers’ regular workflows. ## Future Plans - Jackie planned to convert all 4,000-plus icons into Figma components with a single click. - This would let Microsoft teams organize and search icons directly in Figma rather than through a separate browser tool. - He also hoped to release the converter more broadly so anyone could turn an icon font file into Figma components. The project demonstrates that an effective internal tool can start with focused user research, modest technical foundations, and a rapid first release. A browser-based, searchable library is a practical way to eliminate design-tool silos and create a shared source of truth for icons.

CSS Figma React JavaScript+4

figmaApr 25, 20182 min readCurated summary

Introducing: Figma to React | Figma Blog

Figma introduced an open-source Figma-to-React converter that uses the Figma API to turn designs into React components. The project aims to keep visual design in Figma while preserving application functionality in separate code, allowing designers to update interfaces without overwriting custom logic. It also seeks to make functional code reusable across multiple designs, much like reusable React components. ## Motivation and Goals - The converter builds on growing interest in automatically transforming Figma documents into React code. - Figma identified two main objectives: - Keep component design primarily in Figma so design updates can be synchronized to a website or app. - Separate generated visual code from custom functional code, preventing design updates from overwriting application behavior. - Existing functional code should be attachable to new designs, enabling reuse across different UI layouts. - Figma open-sourced the implementation in its `figma-api-demo` GitHub repository. ## From Figma to CSS - The first technical challenge is accurately reproducing the appearance of Figma designs in React components. - The example used is a sortable list interface with multiple list items, icons, and a dark visual style. - The converter must translate Figma’s visual properties into CSS and React structure. - The article notes that there are multiple possible strategies for reproducing a design, setting up a discussion of the implementation choices that follow.

CSS React JavaScript Design To Code+2

figmaApr 17, 20182 min readCurated summary

5 steps to nailing your portfolio presentation in design interviews | Figma Blog

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.

CSS Figma HTML Typography+3

figmaFeb 7, 20182 min readCurated summary

Web design without a web designer? Xfive turns to Figma. | Figma Blog

Xfive, a web development company without in-house designers, used Figma to redesign its outdated website. Content producer Lubos Kmetko created the redesign and used Figma’s browser-based collaboration, prototyping, commenting, and developer handoff features to involve stakeholders across the company. The experience showed that Figma could make website design accessible to non-designers while reducing communication and implementation friction. ## Website problems and redesign goals - Xfive’s homepage and key sections had fallen behind as the company grew. - The site suffered from: - Outdated Customers and Work sections - Confusing navigation - Too many competing calls to action - Numerous landing pages that were difficult to maintain - Because Xfive typically implements client-provided designs, it did not usually employ dedicated designers. - Lubos Kmetko, a content producer familiar with Figma, took responsibility for the redesign. ## Prototyping and stakeholder collaboration - Lubos redesigned the homepage, Customers section, and Work section. - He streamlined navigation and reduced the number of CTAs and landing pages. - Stakeholders from marketing, sales, production, editorial, development, and operations reviewed the mockups. - Figma’s cloud-based workflow allowed anyone with a browser to: - Open the designs through a shared link - Leave comments - Discuss ideas and interactions - Review changes in real time - Feedback and revisions remained synchronized in one location instead of being scattered across files and messages. ## Improving designer-developer handoff - Approved designs were shared directly through Figma rather than sent as files through email or Box. - Developers could inspect designs in the browser using Code Mode. - Figma provided specifications such as dimensions, colors, and padding, along with export options for CSS, iOS, and Android code. - This reduced version-control problems, guesswork, and dependency on tools such as Avocode or Zeplin. - Developers reported that access to precise design details helped them code faster and more accurately. ## Future use of Figma at Xfive - Xfive viewed the redesign as a starting point for adopting Figma in client projects. - Lubos envisioned replacing emailed PDFs and JPEGs with functional, shareable prototypes. - The company planned to use Figma across the process, from early design discussions and implementation details to developer handoff. Figma enabled Xfive to complete a substantial redesign without a traditional designer and created a more centralized, collaborative workflow. For teams working across disciplines or locations, browser-based prototypes, comments, and inspectable design specifications can significantly simplify both design review and development.

CSS Figma User Experience Prototyping+4

figmaJan 17, 20183 min readCurated summary

How to convince your team to switch to Figma | Figma Blog

Buffer’s move to Figma was presented as a cultural change, not merely a software upgrade. Figma helped break down design silos by making files accessible, collaborative, and usable across platforms. James Morris’s approach was to build support through experimentation and demonstrations rather than simply arguing for the switch. ## Buffer’s Transparency and Collaboration Challenges - Buffer valued transparency, but its existing design tools isolated designers from other departments. - Designs were difficult to locate in Dropbox and often required paid software or newer versions to open. - Developers and product managers worried about accidentally overwriting files. - Figma’s cloud-based files could be opened through shared URLs, with free view-only access for collaborators. - Linux users could access designs without buying a Mac or specialized desktop software. - Viewers could comment and inspect design data for implementation. ## Step 1: Create an Open Exploration Period - Morris introduced a company-wide period for testing different design and collaboration tools. - Teams were encouraged to experiment and identify which tools best addressed their workflow problems. - He gathered feedback and explained how Figma could solve Buffer’s communication issues. - Rather than relying only on a persuasive presentation, he trusted hands-on use to demonstrate Figma’s value. ## Step 2: Show, Don’t Tell ### Collaborative Whiteboarding with Product Managers - Morris used remote whiteboarding sessions to let product managers experience Figma directly. - He and a Canadian PM brainstormed together in real time, using shapes and diagrams much like a collaborative Google Doc. - This allowed them to develop ideas together without waiting for a formal specification. - Figma’s ease of use became apparent through practical collaboration. ### Winning Over Engineers - Morris gave engineers direct links to Figma files and let them explore independently. - Engineers could inspect CSS, Swift, and Android XML values through the free view-only experience. - Stable URLs created a single source of truth, replacing exported images and confusing Dropbox locations. - Figma’s browser-based architecture and use of WebAssembly also appealed to engineers interested in advanced web technology. ### Addressing Designers’ Concerns - Designers could be more difficult to persuade because some feared open, transparent workflows. - Others doubted that a browser-based application could match the speed and performance of desktop software. - The article begins describing the use of incentives—“candy”—to help designers try Figma, but the provided text ends before that section is completed. The practical recommendation is to make tool adoption an open, low-pressure experiment. Give each team a concrete way to experience the benefits—real-time whiteboarding for product managers, inspectable files for engineers, and performance demonstrations for designers—so the change becomes evident through use.

CSS Figma Android Webassembly+3

figmaDec 6, 20172 min readCurated summary

More time, more money: How Figma accelerates agency workflow | Figma Blog

Figma helped Unfold, a 10-person Florida design agency, reduce versioning, collaboration, and handoff problems by keeping work in a shared cloud platform. Its browser-based workflow lets clients, designers, and developers access the same up-to-date files regardless of operating system. Founder Eddie Lobanovskiy estimates the agency saves at least 30% of its communication time and can take on more client work. ## Replacing File Conflicts with Cloud Collaboration - Before Figma, Unfold struggled with overwritten files, conflicting versions, and a patchwork of plugins. - Figma’s cloud-based files provide a single source of truth accessible through a URL. - Teams can share designs, collect feedback, and collaborate without requiring everyone to use the same computer or software. - Unfold used Figma’s Sketch importer to move existing projects into the platform. ## Keeping the Entire Design Process in One Place - Clients can join live brainstorming sessions through Figma’s multiplayer functionality. - Designers and clients can work simultaneously in the same document, accelerating idea generation. - Mood boards are created directly in Figma by dragging images from the web into project files. - High-fidelity designs remain available at the same URL, eliminating repeated exports and uploads. - Pinned comments keep feedback attached to the relevant design frame rather than scattered across email or messaging tools. ## Simplifying Developer Handoff - Previously, Unfold had to accommodate developers using non-Mac computers and sometimes convert files to PSD through Illustrator, which damaged layer structures. - Figma’s code mode lets developers inspect designs, export assets, and retrieve CSS, Android, and iOS specifications. - Developer access remains synchronized with the latest design automatically. - Developers can use view-only access, so clients do not necessarily need paid editor accounts. - Cross-platform access removes the need to persuade clients or developers to purchase specific software or hardware. ## Taking on More Work - Figma made Unfold’s workflow faster and more fluid by reducing administrative and coordination overhead. - The agency found projects more pleasant to manage and felt capable of serving more clients. - The main business benefit was not only saved time, but also fewer process disruptions and smoother collaboration. Figma’s shared, cross-platform workspace gave Unfold a practical way to centralize design, feedback, prototyping, and developer handoff—helping the agency communicate less, move faster, and increase its capacity.

CSS Figma Prototyping Android+4

figmaJul 24, 20172 min readCurated summary

Figma 2.0: Now with Prototyping and Developer Handoff | Figma Blog

Figma 2.0 expands Figma from a collaborative design tool into a platform for entire product teams. Its two major additions—prototyping and developer handoff—reduce the need to export designs, synchronize files, or rely on separate tools. The release reflects Figma’s broader goal of helping teams build software together around a shared, cloud-based source of truth. ## From Designer Collaboration to Team Collaboration - Figma 1.0 focused on cloud-based design, multiplayer editing, and shared component libraries. - User feedback showed that designers also needed to collaborate with marketers, executives, and engineers. - Figma 2.0 therefore aims to empower entire teams, not just designers working together. ## Integrated Prototyping - Prototyping lets designers present work, gather feedback, secure approval, and test interfaces without leaving Figma. - Figma initially avoided building prototyping features because specialized tools already served that market. - Users wanted to design and present from the same document, maintaining one continuously updated source of truth. - The feature emphasizes slideshows and interactive hotspots rather than advanced motion graphics. - Prototypes update in real time as the underlying design changes, eliminating exporting and syncing. - Designers can: - Add or modify screens while others watch. - Connect frames through nodes in Prototype mode. - Turn objects or components into clickable hotspots. - Reuse hotspot behavior across component instances. - Order frames directly on the canvas for simple presentations. - Control presentations from a phone. - Figma describes prototypes as “living documents” rather than static artifacts, while remaining open to integrations with dedicated prototyping tools. ## Developer Handoff - Designers can share files with developers using view-only access. - Developers receive a Code mode in the properties panel. - Selecting an object reveals spacing measurements and redlines relative to nearby objects. - Developers can access CSS, iOS, and Android specifications. - Information is presented in both: - A scannable table of design attributes. - Generated markup or code. - View-only access means developers do not need paid editor seats, making collaboration more accessible. ## Building a Broader Platform - Figma positions version 2.0 as an all-in-one workflow for design, presentation, and implementation. - The company acknowledges that teams have different tools and processes. - Future plans include deeper integrations and partnerships across the wider design and development ecosystem. Figma 2.0’s practical recommendation is to keep design, prototyping, and developer collaboration in one shared cloud document whenever possible, while continuing to integrate with specialized tools for workflows Figma does not fully cover.

CSS Figma Prototyping Android+3