Framer

5 posts

figma2 min readCurated summary

The case for lightweight prototyping | Figma Blog

Lightweight prototypes do not need to be polished to be valuable. Figma argues that early, informal prototypes accelerate feedback, clarify communication, expose technical constraints, and reduce wasted effort. The best prototype is often the one shared early enough to influence the final product. ## Why Lightweight Prototypes Matter - Prototypes support more than formal usability testing: - They communicate a product vision. - They help collaborators and stakeholders respond to work in progress. - They encourage early course correction before changes become expensive. - High fidelity is not always necessary; an informal prototype can be more useful than a polished one if it prompts meaningful feedback. ## Testing Copy and Content - A prototype reveals whether headers, body text, and buttons work together coherently. - It helps identify: - Unclear calls to action - Inconsistent terminology - Mismatched writing styles or tone - Reviewing copy in context is especially useful when multiple people contribute UX writing or microcopy, even before a formal style guide exists. ## Adding Context for Developers - Sharing early prototypes with developers can expose: - Feasibility problems - Technical roadblocks - Areas requiring further exploration - Prototypes are blueprints rather than finished implementations, so additional context helps developers understand the intended experience and bring the design to life accurately. ## Communicating Interactions - Even simple prototypes should clearly map user paths and interactions. - Specifying behaviors such as **On Click**, **On Drag**, and **While Hovering** makes the intended experience easier to understand. - Explicit interactions lead to more accurate feedback and more effective testing. ## Using Figma for Internal Communication Figma also uses prototypes as a communication medium, particularly for remote collaboration. - **All-hands meetings:** Team members add presentation slides directly to a shared master Figma file. - **Information sharing:** Teams use Presentation View for quarterly plans, research findings, and remote-collaboration ideas. - **Customer conversations:** Sales teams send prototype URLs instead of static PDFs, enabling customers to click through presentations and view animated elements such as GIFs. - **Events:** Figma speakers use Figma files and Presentation View to build and deliver conference presentations. Lightweight prototyping is most effective when it is shared early, includes enough interaction detail to convey intent, and provides the surrounding context that collaborators need. Teams should treat prototypes as flexible communication tools—not merely as final-stage testing artifacts.

Read original(opens in new tab)
figma2 min readCurated summary

Building on our open platform: Design in Figma, prototype with Framer | Figma Blog

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.

Read original(opens in new tab)
figma3 min readCurated summary

Zoom Streamlines the Design Workflow with Figma | Figma Blog

Zoom adopted Figma to replace a fragmented design workflow built around Sketch, InVision or Framer, and Zeplin. Figma’s speed, real-time collaboration, contextual commenting, and shared libraries reduced manual file management while improving communication between designers, engineers, product managers, and other stakeholders. The case study concludes that Figma became a shared source of truth that made Zoom’s distributed design process faster and more collaborative. ## Speed Bumps in the Design Workflow - Zoom’s lean design team—about one designer for every ten engineers—needed efficient ways to communicate design decisions. - Designers worked across multiple countries and time zones, making collaboration especially important. - Their workflow relied on separate tools: - Sketch for design - InVision or Framer for prototypes - Zeplin for engineering handoff - Each iteration required files to be synchronized across tools. - Teams pushed revisions 10–20 times per project and had to manage multiple versions, reviews, and stakeholders. - Static screenshots often removed designs from their broader context, limiting the quality of feedback. ## Figma’s Collaborative Workflow - Designer Steven Crosby was initially attracted by Figma’s performance, particularly its smooth frame rate when moving objects. - Figma’s integrated commenting and real-time collaboration addressed Zoom’s workflow problems in one place. - Multiple designers could brainstorm and work on the same file simultaneously. - Anyone with access could comment directly on the design without downloading files or managing synchronization. - Feedback became more contextual because reviewers could see the full design flow rather than an isolated screenshot. - Figma brought designers together with engineers, project managers, product managers, and other teams, substantially improving the amount and quality of feedback. ## A Shared Design System - Figma became Zoom’s single source of truth for design work. - Team Libraries allowed designers in different locations and time zones to share components across projects. - Zoom created a master file containing an icon set and reusable components, with live updates available to the team. - Constraints helped designers create responsive components while keeping elements pinned to specific sides of a layout. - Using reusable components improved consistency and helped designers better understand scalable design-system construction. ## Brainstorming Across Teams - Zoom used Figma to include data scientists and an external design partner in product-message brainstorming. - Participants needed no prior Figma experience to contribute. - By sharing a link and inviting collaborators into the file, everyone could work simultaneously in separate areas of the canvas. - Participants quickly moved elements, modified messages, and reused ideas from one another. - The low learning curve enabled non-designers to participate directly rather than providing feedback indirectly. Zoom’s experience suggests that consolidating design, prototyping, feedback, and reusable components in a collaborative tool can eliminate workflow friction and make design a genuinely cross-functional activity.

Read original(opens in new tab)
figma2 min readCurated summary

Should designers learn to code? | Figma Blog

The article argues that learning to code is not a universal requirement for designers. Alex Cornell chose filmmaking and motion graphics instead because his engineering-heavy startup already had strong coding expertise, and that specialization later helped him launch Facebook Live. While coding can improve collaboration with engineers, designers should choose skills based on their interests, team needs, and career goals. ## Coding Is a Personal Choice - In 2007, deciding whether to code was viewed as an individual career choice rather than an expected designer milestone. - Cornell worked alongside highly experienced engineers, so learning to code would have duplicated an existing team strength. - He chose filmmaking, After Effects, and Premiere because he found motion graphics more engaging and useful. - Without modern prototyping tools, he used After Effects to demonstrate animated interface ideas. ## The Value of Learning Adjacent Skills - Cornell sometimes wonders what learning to code might have enabled, but does not fundamentally regret his decision. - His design career benefited from understanding how engineers think and how to translate design concepts into technical language. - At Facebook, coding is helpful but not essential to his role. - Specializing in a complementary discipline can make a team stronger than having everyone develop the same skills. ## The Boundary Between Design and Code Is Blurring - Modern tools such as Framer and Origami combine visual design with logic and interaction. - Designers increasingly work with systems that sit between traditional design and programming. - Because roles and tools overlap, the question is no longer a simple choice between coding and not coding. - There is no universally correct answer; the best path depends on the individual. ## Writing and Communication Matter - Cornell recommends writing and communication or presentation as especially valuable alternatives to coding. - Strong design or technical execution may have little impact if the designer cannot persuade others to support the idea. - Communication can take many forms: - Speaking in meetings - Presentations and slide decks - Films or demonstrations - Clear written explanations - These skills combine practical communication with emotional intelligence, helping designers influence decisions and move projects forward. - Cornell also cautions against leaving school too early because writing, communication, and interpersonal skills are harder to acquire independently than technical skills. Designers should learn to code when they are genuinely interested in it or when it serves their goals—not because it has become an expected rite of passage. Building complementary strengths, particularly in writing and communication, can be just as valuable.

Read original(opens in new tab)
figma2 min readCurated summary

Introducing Figma’s Integration with Framer | Figma Blog

Figma announced a one-click integration with Framer in August 2016, responding to strong user demand for better prototyping workflows. The integration lets designers import Figma assets directly into Framer instead of exporting layers individually and uploading them manually. Together, the tools connect Figma’s rapid UI design and iteration with Framer’s expressive, code-based prototyping. ## The Need for Better Prototyping - Static mockups are insufficient for designing mobile and interactive experiences. - Designers need to: - Design within the context where a product will be used. - Demonstrate how screens respond to user input. - Add motion, transitions, and other interactive details. - Earlier workflows often required After Effects or manually building HTML, JavaScript, and CSS prototypes. - These approaches were cumbersome, involving remote servers, FTP uploads, mobile testing over 3G, and browser compatibility issues. ## Figma and Framer Integration - Figma users can import assets into Framer with one click. - The integration removes the need to export and upload layers individually. - It creates a faster path from visual UI design to interactive, code-based prototypes. - The feature was especially significant because Framer was the prototyping tool most frequently requested by Figma users. ## Complementary Strengths - Figma supports quick UI design and team iteration. - Framer enables open-ended, code-based prototypes, particularly for complex single-page interactions. - The combined workflow helps designers move ideas into code faster, test them in realistic interactions, and ship better products sooner. - The partnership also reflects Figma’s belief that code-based prototyping can be accessible to a broader generation of designers. The integration was intended to make prototyping more efficient by combining Figma’s collaborative design workflow with Framer’s flexibility and expressive coding environment.

Read original(opens in new tab)