figmaFeb 26, 2024

Behind the Feature: Inline Device Frames | Figma Blog (opens in new tab)

Inline device frames bring interactive phone, tablet, and watch mockups directly into the Figma editor, making prototypes feel closer to real-world use without switching to presentation view. The feature evolved from Figma’s inline preview and was designed to make devices tangible, movable, and resizable. Its development balanced realistic device representation with intuitive interactions and collaborative input from Figma’s community and cross-functional teams. ## Prototyping in the Editor - Figma introduced inline device frames as part of broader prototyping improvements. - Designers can preview their work within representations of mobile, tablet, and watch devices. - The goal is to help teams identify usability gaps and opportunities earlier by experiencing how designs actually behave. - Other announced prototyping updates included: - Copying and pasting interaction “noodles” - Faster flow deletion - Importing elements with local variables into new files - A 22% reduction in loading-spinner time in key use cases ## A Collaborative Foundation - Figma previously offered device presets in presentation view, but the team wanted to make them available beside designs in the editor. - The intended experience was for devices to feel tangible: - Users should be able to grab, move, and resize them. - Frames needed to be dynamic and responsive rather than static images. - Development combined community research with feedback from engineering, design, product management, and marketing teams. - Three guiding principles shaped the feature: - Seamless integration into the design process - Realistic representation of diverse devices - Intuitive interactions through clearly defined hit targets ## Representing Different Devices - The inline preview’s space constraints led the team to prioritize phones, tablets, and watches rather than larger personal-computer interfaces. - Supporting many device shapes and sizes created significant design and engineering challenges. - The team had to account for details such as smartphone notches, which house front-facing cameras and sensors. - Watch frames raised additional questions about where users should be able to interact and resize the device. Inline device frames are intended to make prototyping more immediate and realistic while preserving the flexibility of the Figma editor. Designers can use them to evaluate designs in context without leaving their working file.

mobile-designfigmaprototypingresponsive-design+2

figmaDec 15, 2021

What’s new in Figma: December 2021 | Figma Blog (opens in new tab)

Figma’s December 2021 updates focus on making collaboration and creation more seamless across Figma and FigJam. The release adds richer media support, improved drawing tools, and expanded mobile capabilities. Together, these changes help teams share context, refine ideas, and preview designs without interrupting their workflow. ## Enriching FigJam collaboration - Users can paste links into FigJam to watch Vimeo videos, play Spotify music, and share other rich media. - The new Vimeo plugin supports screen and webcam recordings directly within Figma and FigJam. - Recordings can be used for status updates, product demos, tutorials, and asynchronous collaboration. ## Highlighting and refining ideas - The new **Highlighter** tool emphasizes text and other FigJam elements. - Holding **Shift** while highlighting creates perfectly straight lines. - The **Eraser** tool removes individual strokes, making it easier to correct sketches and refine work in progress. ## Expanding mobile design workflows The updated Figma mobile app lets designers preview, review, and manage work more independently from a desktop. - Play prototypes directly on mobile devices. - Toggle hotspot hints during prototype playback. - Mirror selected desktop frames to a mobile device. - Share, browse, and view Figma files and prototypes. - Share, browse, and view FigJam files. - Navigate teams, projects, and workspaces from the app. - Updates are available for iOS and Android phones and tablets. Figma’s December release is primarily about removing friction from collaboration: teams can communicate with richer media, improve FigJam ideation with more precise tools, and validate mobile experiences directly on their devices.

mobile-designfigmaprototypingfigjam+4

figmaDec 15, 2019

"The Decade of Design”: How 10 years transformed design’s role in tech | Figma Blog (opens in new tab)

The 2010s transformed design from a secondary concern into a central function of technology companies. The smartphone, especially the iPhone, made products more complex, generated vast amounts of behavioral data, and raised consumer expectations for polished experiences. As a result, companies began hiring designers at scale and treating design as a driver of product strategy and growth. ## The Mobile Wave ### More Complex Interactions - Smartphones introduced smaller, varied screens and touch-based gestures such as swiping, tapping, and holding. - Users interacted with devices in many contexts—while walking, commuting, or multitasking—forcing teams to design for real-world conditions. - Designers became essential to prioritizing functionality and simplifying complex technical systems. - Mobile effectively made the phone the primary computer people used throughout the day. ### The Rise of Data-Driven Design - Smartphones produced unprecedented volumes of behavioral data. - Product teams began continuously A/B testing interface details, including button colors, wording, and layouts. - These experiments measured outcomes such as sign-ups, purchases, and sharing. - “Growth design” emerged as a distinct discipline, with designers increasingly focused on optimizing user behavior and business metrics. - Smartphone ownership among U.S. adults rose from 35% in 2011 to 81% in 2019. ### Apple Raised the Standard - The iPhone changed expectations for how technology should look and feel, replacing the perception of software as merely functional and bland. - Apple’s design became a benchmark that competitors sought to imitate. - The iPhone’s broader mainstream appeal made high-quality industrial and interface design visible to ordinary consumers, not just creative professionals. - Products such as Tinder adopted mobile-first design conventions influenced by Apple’s operating system. - Even Google reportedly discarded an Android device it had been developing after reassessing its design direction. ## Design’s Expanding Role in Technology - The rapid growth of mobile products exposed the limitations of engineering-only approaches to product development. - Designers were particularly valuable for translating complicated systems into simple, intuitive interactions. - Technology companies that had previously operated with minimal design resources began hiring designers and acquiring design agencies. - Silicon Valley gradually shifted from primarily celebrating engineering expertise to recognizing design as a competitive advantage. The decade’s central lesson is that design became indispensable because technology moved into people’s pockets and daily lives. Companies that want to compete should treat designers as strategic product partners, not merely as people responsible for visual polish.

mobile-designuxa-b-testingux-ui-design+2

figmaMay 8, 2017

Figma Mirror for Android | Figma Blog (opens in new tab)

Figma introduced Mirror for Android on May 9, 2017, bringing real-time mobile previews to Android users and designers. The app reflects selected Figma frames on an Android device and updates instantly as designs change on a computer. Figma also offered the same functionality through a mobile browser, making the feature accessible without installing the app. ## Real-Time Design Mirroring - Users can select a frame in a Figma file on their computer and view it immediately on an Android phone. - Design edits made on the computer are reflected instantly in the mobile preview. - The feature helps designers test how their work appears and behaves on an actual mobile device. - Mirror was already available for iOS before the Android release. ## Browser-Based Alternative - Users who do not want to install the Android app can visit `figma.com/mobile-app` in a mobile browser. - The browser version provides the same basic mirroring functionality. ## Support for Android Design - Android accounted for roughly 52% of the U.S. smartphone market and 82% of the global market at the time. - Figma included preset frame sizes for several popular Android devices, reducing the need to create device layouts from scratch. Figma Mirror for Android made mobile design testing more inclusive and convenient, while the browser option provided a no-download alternative.

mobile-designfigmaandroidios+1

figmaMar 13, 2017

The 6 design trends John Maeda predicted in his State of the Union | Figma Blog (opens in new tab)

John Maeda’s 2017 *Design in Tech Report* predicted rapid growth and transformation in product design. The article argues that companies increasingly need designers because technology has become easy to build, making user experience and emotional relevance key differentiators. However, fragmented tools and outdated education remain major challenges. ## Designer Hiring Surges - Major corporations are expanding their product design teams. - Companies such as Facebook, Google, and Amazon reportedly hired 65% more designers in the previous year. - More than 35 design agencies were acquired by large companies over two years. - As app development becomes commoditized, design determines how useful and meaningful products feel to people. ## More Inclusive Design - Technology’s broader reach requires products designed for people from varied backgrounds and experiences. - Companies including Airbnb, Slack, Google, and Microsoft were highlighted as leaders in inclusive design. - Inclusion is becoming both a social responsibility and a product-quality requirement. ## Design Education Falls Behind - Many design programs remain focused on print-era disciplines such as traditional typography. - Schools often fail to teach digital product design for web and mobile platforms. - More than two-thirds of surveyed students said they learned digital skills independently through resources such as Lynda.com. - Maeda expects educational institutions to change slowly because their structures and processes evolve deliberately. ## Design-Focused Investment - Venture capital is showing greater interest in companies built around design. - Two VC firms were reportedly launching with design-focused investment strategies. - Designers themselves show entrepreneurial interest: 80% of those surveyed said they would start a company if they had sufficient funding. ## Growing Number of Design Tools - Product design tools remain fragmented, supporting different workflows rather than one unified process. - Many companies are attempting to streamline collaboration and production. - Maeda warned that increasingly sophisticated tools could create more opportunities for machine intelligence and eventually reduce demand for some design work. ## Emerging Specializations - Voice-interface design is growing alongside products such as Amazon Alexa. - Cybersecurity is creating demand for specialized designers. - China is expected to become increasingly influential in the global design landscape. The outlook for technology and product design is strong, but the industry must address outdated education and disconnected workflows. Designers, companies hiring them, and toolmakers all have opportunities—especially to create more unified, collaborative design processes.

mobile-designfigmaproduct-designweb-design+4

figmaMar 8, 2017

Did Snapchat succeed because of its controversial UI? | Figma Blog (opens in new tab)

Snapchat’s confusing, unconventional interface may have helped rather than hurt its success. By rejecting standard usability rules, it created a product that encouraged exploration, social teaching, creativity, and a sense of insider belonging. Its design was partly accidental, but it also introduced influential mobile interaction patterns that made Snapchat distinctive. ## Breaking Conventional Usability Rules - Snapchat violated the principle of making interfaces immediately understandable. - Its navigation was chaotic: - Stories used both vertical and horizontal scrolling. - The camera screen contained unrelated controls. - There was no consistent navigation bar. - Designers argued that design should solve a problem, even if the result is less polished or intuitive. - Snapchat demonstrated that usability is not always the most important measure of a successful product. ## Tribal Knowledge and Millennial Appeal - Many users initially found Snapchat frustrating and ridiculous. - Its hidden features, such as filters and video calling, were often learned from friends. - This dependence on “tribal knowledge” created: - A sense of belonging among users. - A private space that felt separate from parents and older generations. - A rewarding discovery process. - The app’s messy interface also reflected the informal, chaotic identity its young audience associated with itself. ## Pioneering Mobile Interaction - Snapchat was among the first major social apps to open directly to the camera. - This encouraged users to create content rather than simply consume it. - Gestures such as swiping, tapping, double-tapping, and holding became essential commands. - Swiping to access filters was more fluid than browsing static filter thumbnails. - Its multidirectional navigation arguably suited touchscreen devices better than tiny menu buttons. ## “Shareable UI” Instead of Intuitive UI - Josh Elman described Snapchat’s approach as “shareable UI.” - Rather than making every feature discoverable by individual trial and error, the app encouraged users to learn from friends. - Social products can benefit from features that people want to demonstrate and discuss. - The goal is not always immediate comprehension; a powerful or entertaining product may spread because users teach one another how to use it. ## Accidental Innovation or Deliberate Strategy? - Some designers believed Snapchat’s interface was simply the result of accumulated bad decisions. - Others saw its design as unusually attuned to younger users and mobile behavior. - Regardless of intent, its unconventional choices helped establish new patterns for camera-first apps, gesture-based controls, and socially learned features. Snapchat’s success suggests that products do not always need to be intuitive or conventionally polished. A distinctive, difficult-to-master interface can succeed when it creates social value, rewards discovery, and gives users something worth sharing.

mobile-designui-designux-designinteraction-design+3