Android | Techlist.io

figmaDec 15, 20212 min readCurated summary

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

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.

Read original

Android Figma Prototyping Figjam+4

figmaNov 8, 20212 min readCurated summary

From candidate interviews to developer crits: how Figma engineering uses FigJam to scale | Figma Blog

Figma Engineering uses FigJam as more than a brainstorming tool: it supports team culture, hiring, collaboration, and technical feedback in a rapidly growing, hybrid workplace. By moving activities such as stand-ups and architecture interviews onto a shared digital canvas, the team preserves the spontaneity of in-person collaboration while creating a persistent record of discussions and ideas. ## Supporting Remote Team Culture - Remote stand-ups had become transactional and often ran over time as the team grew. - Engineers now post updates asynchronously in FigJam during a timed, 10-minute session. - Team members can add stickies, photos, reactions, hearts, and comments, making it easier to share personal updates and connect informally. - The shared canvas also encourages playful traditions, such as “20-second animal,” where everyone draws a selected animal at the end of a meeting. ## Scaling Engineering Processes - Figma’s mobile team grew to more than 20 people, creating a need for processes that scale with the organization. - Engineers focus on helping new teammates learn the company’s infrastructure and technology stack. - FigJam provides a shared space for organizing information and maintaining collaboration as teams expand. ## Digital Whiteboarding for Candidate Interviews - Engineering interviews include architecture and system-design exercises designed to reveal how candidates think and collaborate. - When interviews moved online, Figma replaced physical whiteboards with FigJam. - Interviewers share a prompt, observe candidates as they develop a solution, and discuss the design together on the virtual canvas. - Candidates unfamiliar with FigJam receive a brief orientation, and open sessions allow them to participate without creating an account. - The process retains the collaborative nature of in-person whiteboarding while working within Figma’s hybrid model. Figma’s approach demonstrates how a shared, flexible canvas can support both serious technical work and informal team connection. For distributed engineering teams, combining asynchronous updates, collaborative whiteboarding, and lightweight social activities can help preserve culture while processes scale.

Read original

Android Figma Figjam Mobile Development+2

figmaAug 8, 20182 min readCurated summary

On the road: How two designers got rid of their hardware baggage | Figma Blog

A simple Samsung-based setup can replace a laptop for user research, design collaboration, and even editing Figma files while traveling. By combining a Samsung phone or tablet with Chrome, a Bluetooth keyboard and mouse, and either a DeX dock or Chromecast, designers can work from almost any monitor or TV. The approach reduces equipment, cost, and barriers to entering the design profession. ## A Lightweight Mobile Figma Setup - Recommended hardware includes: - Samsung Galaxy S8/S9 models or a Samsung Tab 2 - A DeX dock, USB-C-to-HDMI converter, or Chromecast - Bluetooth keyboard and mouse - Designers can open Figma in Chrome on a mobile device and broadcast it to a larger display. - Prototype links can be shared with users or clients, who open them on their own computers or tablets. ## Remote User Research Without a Laptop - Josh Goodwin previously carried multiple laptops and tablets loaded with Sketch or Adobe software for medical user testing. - With Figma, he can connect his phone to an available hospital monitor and let doctors interact with prototypes in their own browsers. - Feedback can be incorporated immediately during testing, allowing development teams to move faster. ## Lowering the Cost of Design Work - The setup can provide a practical alternative for students, designers in emerging markets, or anyone on a limited budget. - A smartphone and inexpensive television may be enough to design and collaborate without a high-end laptop. - Tyrale Bloomfield uses a Samsung tablet alone for creative-direction work, sometimes commenting with his fingers instead of using a mouse. ## Why Hardware Compatibility Matters - Samsung devices performed best in the authors’ testing because they adjust DPI when projecting to a larger screen, providing an appropriate amount of workspace. - The device, browser, and input hardware must correctly distinguish mouse clicks from finger touches. - Some systems interpret all input as touch, preventing essential actions such as resizing objects, using bounding boxes, or clicking and dragging. - The designers tested many phones and roughly 30 browsers before finding a reliable combination. The article’s practical recommendation is to prioritize a compatible Android device, browser, and pointing device rather than assuming any mobile setup will work. With the right combination, a browser and Internet connection can support much of a designer’s full workflow while eliminating substantial hardware baggage.

Read original

Android Figma User Experience User Research+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.

Read original

Android 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.

Read original

Android Figma CSS Webassembly+3

figmaJan 9, 20183 min readCurated summary

How Figma Transformed This Berkeley Design Class | Figma Blog

UC Berkeley’s CS 160 course used Figma to make digital product design more accessible to computer science students. The cloud-based tool solved problems involving incompatible devices, steep software learning curves, and limited collaboration. As a result, students spent more time applying usability principles and less time learning complicated design software. ## Challenges in Teaching Digital Design - CS 160 teaches human-computer interaction through 3–4-person teams building Android apps around themes such as healthcare and elections. - The course struggled with: - Students using Linux, Windows, Macs, or no personal computer. - Limited computer-lab solutions for incompatible software. - Adobe tools requiring substantial training. - Students with prior design experience often handled wireframing and prototyping, while others focused on coding or user testing. - Enrollment demand was high enough that the course’s original 100-student limit had to be doubled. ## Figma Made Design More Accessible - Figma was free for students and worked across different operating systems. - Its simple interface allowed students without design backgrounds to learn the basics quickly—one student reported becoming productive in about an hour. - Built-in features supported teaching: - In-context comments for instructor feedback. - Version history for reviewing progress. - Simultaneous editing by multiple students. - Integrated prototyping for presentations. - Students could focus on concepts such as Nielsen’s usability heuristics instead of spending most of their time learning Photoshop. ## More Effective Project-Based Learning - Students applied classroom lessons directly to their projects, reinforcing the concepts through practice. - One healthcare-themed team designed an app helping people with alcoholism locate nearby Alcoholics Anonymous meetings. - Figma’s quick prototyping was especially useful because teams had only about an hour of face-to-face collaboration each week. - Teachers and TAs could comment directly on relevant parts of a design rather than sending unclear, broad feedback by email. ## Collaboration Across Disciplines - Real-time editing enabled students to brainstorm, observe one another’s work, and contribute regardless of their design background. - Teams could work outside class without worrying about conflicting file versions or accidentally overwriting one another’s work. - The course used Figma to bring coding and design together, giving computer science students a more collaborative introduction to product design. Figma’s main contribution was reducing technical and logistical barriers so students could concentrate on design thinking, usability, and teamwork. For similar project-based courses, accessible cross-platform tools with real-time collaboration and contextual feedback can make design education more inclusive and effective.

Read original

Android Figma User Experience Prototyping+4

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.

Read original

Android Figma Prototyping iOS+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.

Read original

Android Figma Prototyping iOS+3

figmaMay 8, 20172 min readCurated summary

Figma Mirror for Android | Figma Blog

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.

Read original

Android Figma iOS Mobile App Development+1

figmaDec 7, 20163 min readCurated summary

Components in Figma | Figma Blog

Figma’s 2016 Components release applies software-engineering ideas such as composition, inheritance, and overrides to interface design. Components let designers reuse shared elements as linked instances, so updates remain consistent while local customizations are preserved. The result is a design workflow that supports both systematic reuse and creative flexibility. ## Designing with Components - Components help designers break complex interfaces into smaller, understandable parts. - Reusable elements can appear in multiple locations, at different sizes and with local modifications. - Unlike duplicated copies, component instances remain connected to their source. - Updates to the original component are automatically reflected across all instances, improving consistency and reducing repetitive work. - Examples include repeated address-book rows containing shared typography, spacing, icons, and graphics. ## Figma’s Design Goals Figma aimed to make Components: - Easy for new users to learn. - Powerful enough for advanced design systems. - Flexible throughout the design process. - Low-overhead, so systematic design improves speed without limiting experimentation. ## Creating and Using Instances - Any frame or selected object can be converted into a component through the toolbar. - Duplicating, copying, pasting, or Alt-dragging a component creates instances rather than independent copies. - Instances can move independently on the canvas while retaining their connection to the source component. - Changes made to the main component propagate immediately to its instances. - Certain internal properties, such as the position and size of nested objects, are restricted to make components easier to maintain. ## Style and Property Overrides - Instance changes are treated as overrides of the original component’s properties. - Designers can override fills, strokes, colors, widths, and properties of nested layers. - Overrides remain intact when the source component changes. - Properties that were not overridden continue to update from the source component. - Overrides can be removed with the “Reset Instance” action. ## Complex and Nested Components - Components can contain instances of other components. - Combining nested components makes it possible to build larger systems from smaller, reusable parts. - Designers can add instances to an existing component or create a new component from selected instances. - Nested components are intended to work like other Figma objects, keeping complex systems manageable. ## Constraints - Components can be combined with Figma’s Constraints feature. - Constraints allow elements to respond to changes in size and position. - Together, components and constraints support reusable designs that adapt more intelligently across layouts. Components provide a practical bridge between design and software development: create shared building blocks once, reuse them widely, and preserve controlled customization through overrides. Teams building consistent, evolving interfaces can use them to reduce duplication while keeping designs adaptable.

Read original

Android Figma Design Systems React+4