Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

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.

Figma CSS HTML Typography+3

figmaApr 8, 20182 min readCurated summary

#FigmaTip Roundup 7.0 | Figma Blog

FigmaTip Roundup 7.0 collects small, community-shared techniques for working faster and more precisely in Figma. The tips focus on creating symmetrical shapes, controlling selection behavior, zooming directly to layers, and improving frame visibility. Together, they show how shortcuts and view settings can make everyday design tasks more efficient. ## Creating Symmetrical Shapes with Components - Draw a rough outline of one side of a shape, such as a vase or flask. - Convert it into a component with **⌥⌘K**. - Duplicate it with **⌘D**, then mirror the duplicate horizontally with **⇧H**. - Position the mirrored copy beside the original. - Edit the component to refine the shape while preserving symmetry. ## Freezing Selection Bounds - Pressing the **spacebar** freezes the bounds of the current selection. - This helps prevent the selection box from changing while moving or adjusting elements. ## Zooming Directly to a Selection - Enable **“Keyboard Zooms Into Selection”** in Figma’s settings. - This makes it easier to zoom quickly to a selected layer, especially when choosing it from the layers panel. - The feature is useful for navigating complex files with many objects. ## Making Frames Easier to See - The roundup also highlights Figma’s **“Frame Outlines”** view option. - Frame outlines improve visibility and make it easier to distinguish frame boundaries while designing. These shortcuts and settings are simple to adopt but can significantly improve speed, precision, and navigation in Figma.

Figma User Interface Keyboard Shortcuts Components+1

figmaApr 3, 20183 min readCurated summary

How Figma helped Sounds app reach 150k likes on Facebook | Figma Blog

Sounds app grew its Facebook page from a neglected channel with 14,000 fans and roughly 20 likes per post to more than 150,000 likes in under five months. Instead of hiring an agency, the company used audience research, reusable Figma templates, and modest targeted ad spending to create more engaging content in-house. The result was stronger organic reach at a fraction of the projected agency cost. ## Starting with Limited Resources - Sounds app’s marketing lead also handled community management, artist relations, and customer support. - An outside agency would have cost approximately $3,000–$5,000 or more per month, excluding advertising. - Facebook initially produced about 20 likes per post and reached only around 500 of the page’s 14,000 followers. ## Building a Repeatable Content Process - The team analyzed successful Facebook pages in the music, media, and app categories to identify high-performing content formats. - The designer created branded templates that could be quickly adapted with different artist images. - Templates were built in Figma rather than Photoshop so a non-designer could edit them easily. ## Figma Enabled Faster Collaboration - Figma worked across platforms, avoided expensive software licenses, and offered an approachable interface. - After a Slack session and a short screen-recorded tutorial, the marketing lead could create and publish content independently. - This eliminated delays caused by coordinating with a designer in another time zone and made it possible to act on ideas immediately. ## Measuring Results with Small Ad Budgets - The team began publishing Figma-created content in late October 2017 and used custom Branch links to track app downloads. - Posts that previously received 10–20 likes began generating thousands of likes, comments, and shares. - Weekly reach exceeded one million, and Facebook page likes grew to 60,000 by February 2018 and more than 150,000 the following month. - The team typically spent about $5 per post, increasing to $10 for especially successful content, with daily Facebook and Instagram spending capped at $25. - Paid reach generated additional organic sharing, increasing overall visibility. ## Lessons for Small Marketing Teams - Non-designers can produce effective social content when given channel-specific templates and accessible tools. - Successful social marketing depends more on understanding the audience and its preferred content than on formal marketing credentials. - Limited budgets can still produce substantial growth when teams experiment, measure results, and refine their approach. - The in-house strategy cost less than $3,000 in ad spending, compared with an estimated $20,000 for an agency over the same period. For lean teams, the article recommends combining reusable templates, audience research, tracking links, and controlled experimentation instead of assuming social growth requires an expensive agency.

Figma Slack Spotify Photoshop+4

figmaApr 2, 20182 min readCurated summary

Desperately seeking squircles | Figma Blog

Figma engineer Daniel Furse describes the search for an accurate mathematical model of Apple’s iOS “squircle” shape. The project illustrates Charles Eames’s idea that good design depends on recognizing and working enthusiastically within constraints. Although a superellipse initially appeared to be the answer, careful comparison showed that it was only an approximation, prompting further investigation into Bézier-based constructions. ## Design Through Constraints - Eames defined design as “a plan for arranging elements to accomplish a particular purpose.” - Furse applies this principle to engineering, where code must balance: - Time - Simplicity - Maintainability - Aesthetic quality - The squircle project became a mathematical example of design involving research, false starts, hidden constraints, and refinement. ## Why Squircles Look Different - Apple’s iOS 7 icons replaced conventional rounded squares with more organic-looking squircles. - A rounded square has an abrupt transition between its straight edges and curved corners. - A squircle has continuous curvature around its perimeter, producing a smoother, more unified appearance. - Similar curvature continuity appears in industrial design, such as MacBook corners and earbud cases, where it prevents harsh changes in reflected highlights. ## Modeling the Shape with a Superellipse - To add squircles to Figma, the team needed a precise mathematical description. - Early research suggested that Apple’s shape was a superellipse, a generalized ellipse described by parameters `a`, `b`, and `n`. - With `n = 2`, the formula produces an ellipse; with equal axes, it produces a circle. - Increasing `n` makes the shape increasingly resemble a rounded rectangle, approaching a sharp-cornered rectangle as `n` approaches infinity. - A value around `n = 5` produced an image that looked very similar to an iOS squircle. ## The First False Start - Despite its visual similarity, the superellipse did not match Apple’s actual icon geometry. - Detailed follow-up analysis found a small but consistent discrepancy for every value of `n`. - This meant that simply approximating the superellipse with Bézier curves would not produce the authentic shape. - The investigation therefore moved toward alternative constructions, including sequences of Bézier curves for the corners. The main lesson is that visual resemblance is not enough when reproducing a design precisely: mathematical elegance must be tested against the real artifact, and constraints often reveal the need for a more complex solution.

Figma iOS Vector Graphics Bezier Curves+2

figmaMar 21, 20183 min readCurated summary

Introducing: Figma’s Platform | Figma Blog

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.

Design Collaboration Json Svg Webhooks+3

figmaMar 18, 20182 min readCurated summary

Now you can name and annotate your Figma Version History | Figma Blog

Figma introduced named and annotated Version History to make design changes easier to organize, review, and restore. Because Figma continuously autosaves files in the browser, users can now mark important milestones instead of sorting through a long list of automatic saves. The update aims to reduce export work, improve collaboration, and help teams review designs more efficiently. ## Organizing Design Milestones - Designers can manually flag important versions and give them names and notes. - Autosaves between marked versions are automatically collapsed, making the history easier to scan. - Important milestones can be restored or duplicated into new files. - Version History is available through a file’s name menu and “Show Version History.” ## Page-Specific Version History - Version History can now be viewed for individual pages rather than only for the entire file. - This reduces noise when different pages contain unrelated changes. - To access it, open a page, select the file name, and choose “View Version History.” ## Notes for Faster Design Review - Notes can explain what changed in each revision. - Stakeholders can review design stages and leave feedback directly within Version History. - The feature is intended to reduce meetings and speed up design feedback cycles. ## Keyboard Shortcut - macOS: `⌘ + ⌥ + S` - Windows: `Ctrl + Alt + S` - The shortcut quickly saves and names a selected version. The update builds on Figma’s autosave system by adding deliberate checkpoints and context. Teams can stay in their design workflow while preserving, reviewing, and discussing key stages without exporting files.

Figma Collaboration Version History Autosave+1

figmaMar 13, 20183 min readCurated summary

How to hit the road as a UI/UX digital nomad | Figma Blog

Digital nomadism can offer UI/UX designers freedom and new experiences, but it requires careful preparation and reliable communication. The article’s central advice is to secure clients, establish the basics of a freelance business, and plan for dependable internet before leaving. Once abroad, designers should build local connections and maintain client trust through consistent updates and clear expectations. ## Prepare Before You Leave - Secure clients or an employer before booking a one-way ticket. - Building relationships while still nearby makes hiring easier and reduces financial pressure. - Meet prospective clients in person when possible to understand their communication styles and business needs. - Grow a client network by: - Attending design meetups and tech events. - Posting freelance services on Craigslist. - Completing initial projects before explaining long-term travel plans. - Regularly reminding professional contacts that you are accepting work. ## Set Up the Freelance Business Complete administrative tasks before traveling, since registering and managing a business from abroad can be difficult. - Consider forming an LLC for potential business deductions. - Open a separate business checking account. - Create a portfolio website with contact information. - Prepare business cards and other promotional materials. - Work with an accountant to manage taxes. - Register the business name. ## Plan for Reliable Internet Internet access is essential for conference calls, email, and collaborative design work. - Research WiFi quality at each accommodation and check reviews for complaints. - Ask hosts to provide a connection-speed test if necessary. - Carry a backup SIM card or mobile-data option. - Warn clients in advance if connectivity may be unreliable. - Use cloud-based collaboration tools such as Figma to share files, collect comments, and avoid repeatedly exporting designs. - Open Figma files before losing connectivity if offline work may be necessary. ## Build a Digital Nomad Community Traveling can be isolating, so designers should intentionally connect with other remote workers. - Join Facebook communities such as Digital Nomads Around the World, Female Digital Nomads, or Digital Nomad Girls. - Consider destinations with established remote-work communities, including: - Hanoi - Chiang Mai - Ubud - Look for cities with strong WiFi, coworking spaces, coffee shops, and a reasonable cost of living. - Structured programs such as Roam and Remote Year can provide a more organized experience. ## Maintain Client Trust Across Time Zones Distance makes transparency and regular communication especially important. - Send clients frequent progress updates; one designer mentioned sending daily emails. - Schedule recurring calls, such as every two days, to answer questions and maintain alignment. - Set clear expectations around availability, time zones, and possible connectivity problems. - Balance work with travel so the nomadic lifestyle does not become an exhausting remote office. A successful UI/UX digital nomad lifestyle depends less on spontaneity than on preparation, dependable infrastructure, and disciplined client communication. Secure work and business systems first, then choose destinations and routines that support both productivity and the freedom to travel.

Figma User Experience Remote Work Digital Nomad+1

figmaFeb 26, 20182 min readCurated summary

Figma prototyping: now with transitions | Figma Blog

Figma’s 2018 update introduced transitions to its prototyping tool, allowing designers to create more realistic, communicative app experiences. Users could connect frames with dissolve, slide, or push animations, customize duration and easing, and preview results directly in the toolbar. The update aimed to reduce ambiguity among designers, engineers, clients, and other stakeholders. ## Why Transitions Matter - Prototypes help teams evaluate high-fidelity app experiences before development. - Animation between frames can significantly affect how an interface feels. - Adding transitions reduces back-and-forth by communicating interaction details more clearly. - The feature was developed in response to extensive community feedback. ## New Transition Features - Apply **dissolve, slide, or push** effects between frames. - Set animation durations down to a few milliseconds. - Adjust easing so animations accelerate or slow down at different points. - Preview frame transitions in the prototyping toolbar. - Use transitions to reproduce platform-specific interactions, such as iOS-style motion. ## Existing Prototyping Advantages - **Live design:** Prototypes remain synchronized with the underlying web-based designs, eliminating the need to re-export after edits. - **Mobile presentations:** Presentations can be controlled from Android or iOS browsers, while stakeholders can follow along from their own computers. - **Components:** Prototype interactions assigned to a component automatically apply to its instances, making repeated navigation—such as a home button—easy to maintain. ## Continued Product Development - Figma positioned transitions as another step toward making prototyping faster and easier. - The company planned to continue expanding prototyping to better support everyone involved in software development. Transitions made Figma prototypes more polished and useful for communicating both static designs and interactive behavior before implementation.

Figma User Experience Prototyping User Interface+2

figmaFeb 14, 20182 min readCurated summary

With love, from Figma: @mentions and file sorting | Figma Blog

Figma’s February 2018 update introduced two features designed to reduce friction in design workflows: file sorting and @mentions. Users can now organize files by creation date or name, while comments can directly notify specific teammates by email and in-app notification. Together, the features make finding files and coordinating asynchronous feedback more efficient. ## Organizing Files with New Sorting Options - Figma file lists were previously sorted primarily by “Last Modified.” - Users can now sort files by: - Date created - File name alphabetically - Last modified date - These options make it easier to locate older files or maintain a more organized workspace. ## Directing Feedback with @Mentions - Figma introduced @mentions for comments, allowing users to tag a teammate by typing `@` followed by their name. - Mentions are useful for: - Drawing a product manager’s attention to a specific design change - Asking engineers questions about a prototype - Notifying designers that copy edits are complete - Mentioned users receive both an email and an in-app notification. - Users can reply directly to comment notification emails, and their response is added to the Figma comment thread. ## Improving Asynchronous Collaboration - Previously, commenters had to send a document link and tell recipients to search for the relevant comment. - @mentions eliminate that extra step by pointing teammates directly to the discussion requiring their attention. - The features were developed in response to repeated requests from Figma users. Refreshing open Figma tabs enables both updates. These additions provide simple, practical improvements for organizing files and ensuring feedback reaches the right collaborator.

Figma User Experience Prototyping Real Time Collaboration+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.

Figma User Experience Prototyping Android+4

figmaFeb 6, 20181 min readCurated summary

FigmaTip Roundup 6.0 | Figma Blog

The sixth FigmaTip Roundup collects practical techniques and community-created resources for speeding up design work in Figma. It highlights a Material Design System, more precise color editing for grouped objects, and Figma’s support for smoother “squircle” corners. ## Material Design System for Figma - R. Kamushken’s user-made Material Design System includes a fast table constructor. - The feature was introduced in version 1.3. - The resource is available for download through Setproduct. ## Editing Strokes and Fills Independently - Figma allows designers to change the stroke color of a group without altering its fills. - Objects in the group that have fills but no strokes remain unaffected. - The roundup presents this as a workflow advantage over tools such as Illustrator and Sketch. ## Smoother Corners with Squircles - The post announces a feature for creating ultra-smooth corners using squircles. - This provides an alternative to standard rounded rectangles for producing more polished interface shapes. The roundup encourages designers to adopt these community-discovered resources and features to make everyday Figma workflows faster and more precise.

Figma Design Systems User Interface Vector Graphics+1

figmaJan 31, 20182 min readCurated summary

Figma raises $25MM Series B | Figma Blog

Figma announced a $25 million Series B funding round led by Kleiner Perkins partner Mamoon Hamid. Existing investors from Index, Greylock, and LinkedIn also participated. The funding supports Figma’s broader vision of making design accessible, collaborative, and web-based rather than limited by siloed tools and workflows. ## Series B Funding - The round was led by Kleiner Perkins’ Mamoon Hamid. - Hamid’s previous investments included SaaS companies such as Slack, Box, and Intercom. - Existing investors Danny Rimer of Index, John Lilly of Greylock, and LinkedIn co-founder Jeff Weiner joined the round. - This was Hamid’s first investment at Kleiner Perkins. ## Figma’s Founding Vision - Figma was founded five years earlier by Dylan Field and Evan Wallace. - The founders believed creative tools should empower users rather than constrain them. - Their goal was to make creation: - Accessible to more people - Collaborative instead of siloed - Built for the web - The company emerged from experimentation with browser-based design tools, supported initially by a Thiel Fellowship. ## Adopting a New Way of Working - Figma acknowledged that changing established design workflows is difficult and takes time. - The company credited its users, employees, and early investors for supporting its vision during that transition. - The funding announcement represented both financial growth and continued validation of collaborative, web-based design. Figma intended to use the momentum from its Series B to continue developing tools that make design more open, collaborative, and accessible across teams.

Figma User Experience Collaborative Design Web Design+1

figmaJan 30, 20182 min readCurated summary

Figma announces design system meetups in 6 cities around the world | Figma Blog

Figma announced a series of design system meetups in six cities worldwide to help designers share challenges, lessons, and best practices. The initiative began in Lagos, Nigeria, where more than 300 people attended, and was shaped by strong community interest in design systems. Figma concluded that larger meetups were more inclusive and useful than the dinner-sized events originally planned. ## Meetup Locations and Schedule - Lagos, Nigeria — January 27 - Toronto, Canada — February 23 - Bangalore, India — details forthcoming - Amsterdam, Netherlands — details forthcoming - New York, United States — details forthcoming - Los Angeles, United States — details forthcoming Each event would be adapted to its local design community and include presentations from local designers. Figma representatives would attend where possible. ## Community-Driven Organization - The meetups grew out of thousands of responses to a questionnaire launched with DesignSystems.com. - Designers volunteered to host or partner on events. - Figma abandoned its original dinner format after receiving more interest than small venues could accommodate. - The broader meetup format allowed more designers to participate and share “war stories” about building design systems. ## The Lagos Meetup - Lagos was selected because of its growing design and technology scene and its large concentration of Figma users in Africa. - Figma’s cloud-based platform and free tier were especially valuable in Lagos, allowing designers to work from offices, home, or internet cafés. - Hotels.ng designer Namnso Ukpanah organized the event. - Speakers included designers from hotels.ng, Andela, and Paystack, along with Figma CEO Dylan Field. - More than 300 people attended. ## Expanding DesignSystems.com Figma planned to use information from the questionnaire and meetups to create a more comprehensive version of DesignSystems.com. Designers interested in bringing an event to their city were encouraged to express interest, volunteer as hosts, or contact Figma for details. The initiative demonstrates that design systems benefit from open, local communities where practitioners can exchange practical experience. Designers seeking similar events could support the effort by organizing locally or participating through DesignSystems.com.

Figma Design Systems User Experience Digital Product Design+1

figmaJan 24, 20182 min readCurated summary

Bug Bashing Party at Figma During Quality Week | Figma Blog

Figma’s Quality Week is a company-wide pause from new feature development to focus on fixing accumulated bugs and polishing existing functionality. The initiative reflects Figma’s belief that small usability problems compound for designers who spend hours in the product. By making quality work a recurring tradition, Figma aims to deliver a smoother, more reliable professional tool while also giving employees opportunities to explore unfamiliar parts of the codebase. ## A Company-Wide Focus on Quality - Figma launched its first official Quality Week in early 2017. - Engineers and designers temporarily paused their regular projects to address: - Annoying but non-critical bugs - Broken or incomplete features - Improvements to existing workflows - The company found that focused maintenance work could be as valuable as continuously shipping new features. - Quality improvements are especially important because users spend long periods working in Figma, making small imperfections increasingly disruptive. ## Quality Week 2018 Improvements - Two engineering teams collaborated on a broad set of bugs and prioritized issues that affected Figma’s professional quality. - Notable fixes included: - **Figma Mirror:** Improved stability and reduced crashes in the mobile mirroring app. - **Sketch import:** Added drag-and-drop importing into the editor and improved text-import accuracy. - **Chromebook support:** Enabled users to hold the search key and drag to duplicate objects. - **Layer panel behavior:** Made it easier and more intuitive to nest layers into groups and frames. - Figma acknowledged that the product was not bug-free, but planned to continue focused quality efforts throughout the year. ## Benefits for the Team - Quality Week helped developers and designers work in parts of the codebase outside their usual areas. - The event encouraged collaboration across teams and made otherwise routine maintenance work enjoyable. - Figma celebrated achievements with awards, including recognition for fixing the company’s oldest known bug—an issue affecting Windows users since 2015. ## Feedback and Ongoing Support - Many bugs addressed during Quality Week were reported by Figma’s user community. - Figma encouraged users to submit feedback through: - The in-product Help menu - Twitter - The community forum - Email support - The company emphasized an all-hands support model, where users might interact with engineers or even the CEO. Figma’s approach shows that dedicated time for bug fixing and product cleanup can complement innovation rather than compete with it. Regular quality-focused periods, combined with continuous user feedback, help maintain a reliable and polished product as it evolves.

Figma Design Tools Windows Chromebook+4

figmaJan 18, 20181 min readCurated summary

#FigmaTip Roundup 5.0 | Figma Blog

This #FigmaTip roundup highlights small Figma interactions that can make design work faster and more intuitive. The tips focus on importing multiple images, navigating deeply nested layers, and creating evenly spaced layouts. Together, they demonstrate how Figma’s built-in behaviors can streamline common design tasks. ## Importing Images in Bulk - Drag a folder directly from your desktop into Figma. - Figma imports the folder’s images as a set, avoiding the need to add each file individually. ## Navigating Nested Layers - Hold **Control** and right-click an object. - Use the resulting context menu to view and navigate through the object’s nested layers. - This is particularly useful when several layers overlap or when selecting a deeply nested element is difficult. ## Creating Equal Spacing and Column Grids - Use Figma’s red alignment and spacing guides to quickly position objects at equal distances. - Once the spacing is correct, use the distribute function to arrange the objects into a column-like grid. These shortcuts are worth incorporating into everyday workflows: they reduce repetitive actions and make Figma’s “it just works” interactions more discoverable.

Figma User Interface Desktop Applications Grid Layout+1