figmaApr 8, 2020

Building on our open platform: Design in Figma, prototype with Framer | Figma Blog (opens in new tab)

Figma argues that design tools should remain open, allowing users to move their data across products rather than becoming locked into one platform. Its new Framer Web integration lets teams design collaboratively in Figma and import files into Framer for more advanced, expressive prototypes. The announcement reinforces Figma’s broader strategy of building an ecosystem around APIs, plugins, and integrations. ## An Open Platform for Flexible Workflows - Figma has prioritized data portability since its founding. - Its web-based platform and APIs allow developers to access and use Figma data in external tools. - Customers have used the API to build internal tooling, create plugins, and even use Figma as a content management system. - Figma also launched an API challenge to encourage a Sketch exporter, but withdrew it after community feedback that it resembled unpaid “spec work.” ## Supporting Specialized Design Tools - Figma recognizes that although some teams use it for the entire design process, others prefer specialized tools. - Partners such as Zeplin provide alternative approaches to developer handoff. - Figma’s position is that no single product should try to serve every workflow; an ecosystem of complementary tools can fill specialized needs. ## Importing Figma Designs into Framer - The new Framer Web integration allows users to import Figma files directly into Framer Web. - Teams can collaborate on design in Figma, then use Framer to build richer and more expressive prototypes. - Framer Web was in beta at the time, with access available through a waitlist and setup instructions provided in Figma’s documentation. ## Broader Integrations - Figma planned to launch additional integrations throughout the year. - Prototyping and user testing: Flinto, Principle, ProtoPie, and Maze. - Developer handoff: Avocode, Storybook, ZeroHeight, and Zeplin. - Collaboration and project workflows: Coda, Dribbble, Dropbox, Jira, Notion, Slack, and Trello. Figma’s recommendation is implicit: use Figma as a collaborative design foundation while choosing the best external tools for prototyping, testing, handoff, and project management.

web-apifigmaprototypingdesign-collaboration+3

figmaNov 5, 2018

Figma year in review: 2018 | Figma Blog (opens in new tab)

Figma’s 2018 review describes a shift from building a collaborative design tool to building an open platform and global community around it. After launching publicly in 2016 and raising $25 million in Series B funding, Figma expanded its API, attracted businesses and developers, and grew adoption among large organizations. The company concludes that partnerships, integrations, and community initiatives will remain central to its growth. ## From Product to Community - Figma marked roughly two years since its public launch in September 2016. - In 2018, its focus expanded beyond the core product to include: - The Figma Platform - API-powered integrations - Community events and resources - Adoption across departments in major organizations - Microsoft used Figma’s API to automate parts of its developer handoff process. ## The Figma Platform - Figma launched what it called the first web API for a design tool. - Its web-based architecture enabled integrations that would have been difficult with isolated desktop software. - Companies such as Uber and GitHub used the API to customize their design workflows even before the public launch. - Seven months later, businesses were being built on the platform, including paid services. ### Community-built tools - PDF exporting - Style-guide generation - Find-and-replace tools for text and layer names - JavaScript libraries for working with the Figma API ### Commercial integrations - Avocode and Zeplin connected Figma designs to developer handoff workflows. - Principle added advanced animation capabilities. - Relay for Figma pushed designs directly into codebases. - Pagedraw converted Figma designs into React. - Overflow synchronized designs for user-flow diagrams. - Haiku converted designs into production-ready components. Figma expected partnerships and additional integrations to become an even larger focus in 2019. ## Building a Global Community - Figma hosted design-system meetups in cities around the world, initially covering eight cities and later reaching 17 countries. - Events connected designers and encouraged detailed discussions about systematic design. - Figma launched DesignSystems.com to share practices and stories from teams at companies including Airbnb, GitHub, Braintree, and Segment. - The company viewed community connections and shared knowledge as an extension of its open-platform strategy. Figma’s 2018 direction was clear: continue investing in an accessible web-based tool while enabling an ecosystem of integrations, businesses, and designers around it.

web-apifigmadesign-systemsreact+3

figmaOct 22, 2018

Animate your Figma designs with our new Principle integration | Figma Blog (opens in new tab)

Figma introduced an integration with Principle that lets designers turn static Figma files into advanced, interactive prototypes without coding. Designs can be imported into Principle, animated with realistic transitions and interactions, and later synchronized with Figma while preserving those animations. The integration combines Figma’s collaborative design workflow with Principle’s simple but powerful motion-prototyping tools. ## Importing Figma Designs into Principle - Open Principle, choose **Import**, and authorize Figma as a design source. - Imported designs can be enhanced with: - Scrolling pages - Swipeable image cards - Interactive button states - Spring, ease-in, ease-out, and linear animations - These features help static designs behave more like real mobile applications. ## Principle’s Visual Prototyping Approach - Principle provides a visual interface intended to feel familiar to interface designers. - Users can create realistic prototypes without learning to code. - Its balance of simplicity and power helps designers remain focused on visual creativity rather than switching into an engineering mindset. ## Synchronizing Changes Between Figma and Principle - Designers can continue editing the original Figma file after importing it. - Principle detects Figma changes and merges them into the imported prototype. - For example, resizing a button in Figma automatically updates its size in Principle while retaining the animations already assigned to it. ## API-Based Integration - The integration was built using Figma’s web-based API. - Principle’s creator used Figma’s API documentation and API Explorer to understand and test how individual files and objects are represented. - The API Explorer lets developers enter a Figma file ID and inspect the resulting API calls, making it easier to experiment with the platform. The integration is recommended for designers who want to add sophisticated motion and interaction to Figma designs quickly. Import a Figma file into Principle, refine its animations visually, and use synchronization to keep the prototype aligned with ongoing design changes.

web-apifigmaprototypingui-ux+2

figmaMar 21, 2018

Introducing: Figma’s Platform | Figma Blog (opens in new tab)

Figma launched its Platform in 2018 to connect design files with external tools, scripts, and web applications. Its central innovation was a web API that made design data accessible across operating systems and workflows, enabling new forms of collaboration. Figma argued that this open, web-based foundation could replace outdated export-based processes with live, integrated design systems. ## A Web API for Design - Figma’s API was presented as a first for professional design tools, which had traditionally been siloed desktop applications. - Because Figma operates online, external software can access the current state of a design without depending on: - A particular operating system - Local file paths - Specific software versions - Companies could build custom tools around their own organizational needs. - Examples included: - Uber creating live displays and feeds of work in progress - GitHub automating parts of its icon-production workflow ## Core API Capabilities The initial Web API provided three main functions: - Reading design files in an open JSON format - Reading and writing comments - Rendering files or file sections as PNG, JPG, SVG, and other standard formats Using a file’s URL-based key, developers could retrieve a live representation of its design tree, including: - Shapes and text - Components - Prototype links and transitions - Constraints - Other structural information defining the design The API was designed for familiar web-development tools and programming frameworks rather than proprietary plugin languages, making integrations easier to create and maintain. ## Open-Source Demos and Integrations Figma announced demo projects illustrating possible uses of the platform, including: - A spell checker for Figma designs - A generative art tool - A way to place designs on the Ethereum blockchain It also highlighted integrations with Avocode, Haiku, Zeplin, and Pagedraw. ## Planned Platform Features Figma outlined several future additions: - **Webhooks:** Notifications for file or team events, including design updates. - **Write API:** Broader programmatic editing of Figma files beyond the existing Comment API. - **Extensions:** An in-app extension system, though Figma intended to prioritize robustness, predictability, and quality rather than release an unstable model quickly. ## Collaboration Problems in Traditional Design Workflows As design becomes relevant to engineers, researchers, marketers, executives, and other departments, desktop design tools create organizational friction: - Files must be exported and uploaded before sharing. - Shared files become outdated when the original changes. - Leaders lack an easy way to view and comment on live work. - Engineers spend time locating the correct assets. - Teams often recreate solutions that already exist elsewhere in the organization. Figma positioned its API as a way for enterprises to share, search, and monitor real-time designs across departments. ## Uber’s Internal Use Case Uber’s distributed design team worked across four cities and multiple products, including Uber Eats and Uber Freight. To improve visibility, the company planned to use Figma’s API to: - Broadcast in-progress designs on office TVs - Create a Dribbble-like internal repository - Make work easier to browse across the organization The example demonstrated how Figma’s API could turn design files into live organizational infrastructure rather than isolated project artifacts. Figma’s recommendation was to treat the Platform as a foundation for custom workflows and integrations. By exposing live design data through standard web technologies, it enabled companies to build collaboration tools suited to their own processes while reducing manual exports and duplicated work.

web-apidesign-collaborationjsonsvg+3