Figma

532 posts

figmaJun 12, 20182 min readCurated summary

A Sketch user's perspective on switching to Figma | Figma Blog

After using Figma for a month, Marco Pacifico argues that Sketch teams—especially distributed product teams—could gain substantially by switching. Figma combines Sketch-like design capabilities with prototyping, collaboration, developer handoff, version control, and cloud storage in one web-based tool. Its central advantage is reducing the syncing, uploading, and coordination overhead that slows design iteration. ## Web-Based Design and Real-Time Collaboration - Figma runs in browsers, with native apps available for offline work. - Work is automatically saved to a shared cloud space, eliminating manual file organization and updates. - A single URL serves as the source of truth for designers, developers, and stakeholders. - Teams no longer need to repeatedly upload screens, sync files, or distribute PNGs. - The author reports that Figma feels at least as performant as Sketch, including with large files. ## A Replacement for the Sketch Ecosystem The article presents Figma as combining the capabilities of several tools traditionally used alongside Sketch: - Sketch-like drawing tools and interface. - Clickable prototyping comparable to Craft and InVision. - Built-in comments, tagging, resolution tracking, and Slack integration. - Developer handoff with dimensions, styles, and downloadable assets. - Version history that allows users to restore or fork earlier designs. - Multiplayer editing with visible cursors and real-time drawing. - Live viewing of another collaborator’s screen and cursor. - Flexible components, intuitive constraints, and shared team libraries. - Dropbox Paper embedding. ## Faster Design Iteration - Designers can conduct reviews, make changes, and receive immediate feedback in the same file. - Iteration can shrink from days to minutes because teams avoid: - Re-uploading screens to InVision. - Reordering prototype screens after synchronization. - Waiting for teammates in other time zones to commit or upload work. - Recovering from broken third-party plugins after software updates. - Changes are visible immediately, so there is no separate synchronization step between the design file and prototype. ## A More Inclusive Design Process - The design file becomes a shared space where team members and stakeholders can discuss work directly. - Anyone with the link can participate through comments and collaborative review. - Real-time access makes design discussions more seamless and reduces barriers between distributed teammates. ## Practical Recommendation For teams currently assembling Sketch, Abstract, InVision, Craft, Zeplin, and collaboration tools into one workflow, the author recommends evaluating Figma as a unified alternative—particularly when rapid iteration and distributed collaboration are priorities.

Figma Design Systems Prototyping Real Time Collaboration+3

figmaJun 5, 20182 min readCurated summary

#FigmaTip Roundup 8.0 | Figma Blog

This edition of Figma’s #FigmaTip Roundup collects quick workflow improvements from the design community. It focuses on making projects easier to identify visually and navigating layers and selections more efficiently. Together, the tips show how small organizational and keyboard-shortcut habits can speed up everyday Figma work. ## Customizing Project Thumbnails - Create a single frame on the first page of a project, sized approximately **620 × 320 pixels**. - Design a visually distinctive thumbnail inside the frame, using relatively large text. - Match the frame’s color with the canvas background so the thumbnail appears polished and cohesive. - This makes projects easier to recognize quickly in Figma’s project view. ## Navigating the Layers Panel - The roundup highlights keyboard shortcuts for moving through and managing layers. - The supplied article text does not include the details of this embedded tip, but its purpose is to reduce reliance on manually clicking through the layers panel. ## Speeding Up Selection and Layer Management - **Tab / Shift-Tab:** Select the next or previous sibling layer. - **Return / Shift-Return:** Enter or exit groups and frames while maintaining selection context. - **Command + ] / Command + [:** Move a layer up or down in the stacking order. - **Option + Command + ] / Option + Command + [:** Move a layer to the top or bottom of the stacking order. The practical recommendation is to combine a deliberately designed project thumbnail with regular use of selection and layer shortcuts. These simple techniques improve both project organization and editing speed without changing the underlying design process.

Figma User Experience User Interface Keyboard Shortcuts

figmaJun 4, 20182 min readCurated summary

With websites, what comes first: The copy or design? | Figma Blog

Website projects often become slow, repetitive exchanges between copywriters, designers, and stakeholders. The post argues that copy and design should be developed together rather than sequentially, using a shared, cloud-based workspace like Figma. Real-time collaboration reduces revisions, meetings, delays, and confusion while producing better web assets. ## The Problems with Separate Copy and Design Workflows - Copywriters may work in Google Docs while designers work in Sketch or another separate tool. - Teams repeatedly exchange drafts after discovering that text does not fit the design. - Design critiques, copy reviews, and stakeholder feedback can force additional redesigns. - Remote collaboration makes the process even more cumbersome; the author describes printing designs, writing edits by hand, scanning them, and sending them back. - Siloed tools make the project difficult to track, even for project managers. ## Developing Copy and Design Together in Figma - The author outlined the main copy points for each page in a Google Doc. - Designers created Figma frames representing the website pages. - Marketing and design worked simultaneously, progressing from high-fidelity wireframes to final designs. - Copy could be edited directly while viewing it in its intended visual context. - Designers spent less time handling communication and more time focusing on the design itself. ## A Shared Source of Truth - Stakeholders could access the latest copy and designs through a single project URL. - Team members could leave comments and review version history without exporting or emailing files. - The same designs could be used for user testing, allowing everyone to connect feedback with the current work. - Fewer meetings were needed, and the remaining meetings became more efficient. - Last-minute updates no longer required a separate scramble before milestone reviews. The practical recommendation is to replace sequential, tool-separated workflows with real-time collaboration between writers, designers, and stakeholders. Treating copy and design as interconnected parts of one process can make website projects faster, clearer, and less frustrating.

Figma User Experience Web Design Sketch+4

figmaMay 29, 20183 min readCurated summary

How Virta Health uses Figma to help patients reverse type 2 diabetes | Figma Blog

Virta Health uses Figma as a collaborative foundation for designing healthcare experiences aimed at reversing type 2 diabetes. The company’s transparent, shared design process helps teams create consistent patient interfaces, involve non-designers, and move from ideas to implementation quickly. Figma’s real-time collaboration and reusable components have become central to Virta’s design culture and operational speed. ## Designing for High-Stakes Healthcare - Virta provides treatment for type 2 diabetes and other chronic metabolic diseases without medication or surgery. - Its mission is to reverse diabetes for 100 million people by 2025. - Reported results after one year include: - 94% of insulin users reducing or eliminating insulin use. - 60% of patients reversing type 2 diabetes. - Because healthcare products directly affect patients’ lives, interfaces must be intuitive, predictable, and reliable. ## Real-Time Collaboration Across Teams - Virta’s 11-person design team operates as a transparent internal hub for designers, developers, marketers, and physicians. - Since the company adopted Figma early, its designs have been accessible and current from anywhere and on any machine. - Designers share files in Slack, where teammates can immediately open the canvas, comment, duplicate work, and suggest improvements. - New team members can get productive quickly because the latest designs and decisions live in Figma. ## Consistency Through Components - Virta treats consistency as essential: patient and physician workflows should behave predictably across the app. - Figma components let designers reuse interface elements instead of recreating them manually. - The team developed a component library based on structural components and nested components. - Components support responsive desktop and mobile versions within a shared system. - Virta is applying the same structural principles to its codebase to reinforce consistency between design and implementation. ## Empowering Non-Designers - Figma allows marketing, product, leadership, developers, and physicians to participate directly in design work. - During the VirtaHealth.com relaunch, the entire process—from ideation through developer handoff—took place in Figma. - Shared visibility enabled faster feedback and helped the first page launch within a month. - Marketing teams use templated Figma files for social graphics, landing pages, and other collateral. - Non-designers can create assets independently, then tag designers for targeted reviews or illustration requests. - This self-service approach eliminated multiple design cycles and reduced the process by weeks. Virta’s experience suggests that collaborative design tools are most valuable when they become part of the company’s operating model, not merely a place to create mockups. Shared files, reusable components, and broad participation helped the company deliver faster while maintaining the consistency and clarity required in healthcare.

Figma Design Systems Prototyping User Interface+2

figmaMay 23, 20183 min readCurated summary

How you can design end to end on a Chromebook | Figma Blog

Chromebooks, once considered too limited for professional design, can now support an end-to-end design workflow when paired with cloud-based tools. The author’s year of using Chrome OS professionally shows that Figma, web apps, and cloud storage can replace most desktop software, although custom fonts, internet access, and specialized audio/video work remain limitations. ## Why Switch to a Chromebook? - The author moved from a Mac at Square because Chromebooks offered: - Stronger security - Lower cost - Automatic file backup and synchronization - Using a Chromebook helped the author understand coworkers who used Chrome OS. - Because Figma already ran in the browser, the transition was easier than expected. ## Six Things Designers Should Know About Chrome OS - **Figma is essential:** It is the author’s preferred cloud-based design tool and works natively in the browser. - **Keyboard shortcuts differ:** The Control key replaces Command, while the Search key can act as a modifier. Figma’s shortcut menu displays Chrome OS-specific commands. - **Performance is sufficient:** Figma performed well across three different Chromebooks. - **Most supporting tools are web-based:** Slack, Grammarly, Funkify, and G Suite worked without major issues. - **Font installation is limited:** Chrome OS does not currently support custom typefaces, though Google Fonts provides many alternatives. - **Internet access matters:** Offline functionality exists, but cloud-based workflows are strongest when connected. Touchscreens are useful for scrolling and navigating canvases. ## Choosing Chromebook Hardware - The author tested an HP Chromebook, the touchscreen-and-stylus Samsung Pro, and eventually chose the Google Pixelbook. - The Pixelbook’s keyboard and trackpad were the deciding factors. - Although it started at $999, it cost less than one-third of the author’s previous MacBook Pro. - Cheaper devices, including the $85 Chromebit, could also support lightweight workflows. ## Cloud-Based Tools for a Complete Workflow - **Creating:** Figma, SuperHi, Google Slides, Paste, Grammarly, Google Docs, and Dropbox Paper. - **Organizing:** Asana, Google Tasks, Bonsai, Notion, and 1Password X. - **Messaging and meetings:** Signal, Telegram, Slack, and Google Meet. - **Media:** Spotify and Pocket Casts. - The author still used a Mac for Final Cut Pro and Logic Pro, since video and audio editing remained desktop-focused. ## The Web as a Design Platform - Cloud software eliminates much of the burden of saving and backing up files. - Files are accessible from any browser rather than being tied to a particular device. - Advancements such as WebGL demonstrate that browsers can handle sophisticated, real-time applications. - The web’s openness and accessibility make it an increasingly viable platform for professional software. Overall, designers who primarily use cloud-based tools can confidently consider a Chromebook, especially if affordability, portability, and synchronized files are priorities. Those dependent on custom fonts or advanced media-production software may still need a traditional computer.

Figma Slack Webgl Chromebook+4

figmaMay 21, 20182 min readCurated summary

5 ways to use Figma that you probably never thought of | Figma Blog

Figma’s real-time collaboration makes it useful for far more than traditional interface design. The post highlights five applications that use shared editing to organize information, make decisions, divide repetitive work, encourage creative collaboration, and have fun. Its central conclusion is that Figma’s multiplayer capabilities can support nearly any activity involving visual thinking and teamwork. ## Affinity Diagrams for Organizing Ideas - Teams can collect large amounts of research or brainstormed ideas in one shared file. - Participants add concepts simultaneously, then group related items into themes. - This process helps clarify priorities and create structure for complex projects, even when collaborators work remotely. ## Real-Time Voting for Design Decisions - Teams can review multiple design options together and mark their preferences directly in Figma. - Instead of printing designs and using physical stickers, participants place circles or other markers beside favored concepts. - Seeing votes accumulate in real time makes individual preferences clearer and helps teams reach decisions faster. ## Design Assembly Lines for Repetitive Work - Large, repetitive tasks can be divided among several people working in parallel. - ClassPass used this approach to create more than 30 custom maps, with designers placing location pins for gyms and studios in different cities. - Multiplayer collaboration allows teams to complete simple production tasks quickly through coordinated effort. ## Collaborative Comic Creation - Figma can serve as a shared illustration environment where friends or colleagues draw and develop ideas together. - USC students Louis Harboe and Parker Malachowsky used it to turn a presentation about AI and healthcare into an accessible comic. - Reusable components such as speech balloons, caption boxes, and image panels helped organize the longer project. - Figma’s vector networks provided flexibility for drawing and editing illustrations. ## Games for Team Connection - Figma’s multiplayer features can also be used for recreational games and playful activities. - Collaborative play offers a way to lighten the mood and strengthen relationships when teams are not working. - This reflects the influence of cooperative multiplayer video games on Figma’s collaboration model. Figma’s shared canvas is valuable wherever people need to think visually together. Teams can use it not only for design production, but also for research synthesis, group decisions, repetitive workflows, creative projects, and informal team-building.

Figma Real Time Collaboration Vector Graphics Design Sprints+1

figmaMay 9, 20183 min readCurated summary

Material Design + Figma Styles = 🔥 | Figma Blog

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

Figma Design Systems Design Tokens Responsive Design+2

figmaMay 8, 20182 min readCurated summary

Figma Styles beta: A new way to apply text and layer attributes | Figma Blog

Figma’s 2018 Styles beta introduced a modular system for applying text and layer attributes consistently across documents. Instead of bundling typography, color, and alignment into complex combinations, Styles separated them so each could be managed and updated independently. The feature also allowed different styles within a single text field, making design systems easier to maintain for both individuals and teams. ## Modular Text and Layer Styles - Styles could be created separately for: - Text properties - Fills and colors - Layout grids - Effects - Strokes - Styles were available through team libraries, helping teams share current versions. - Team members could enable shared Styles and receive notifications when they changed. ## Reducing Text Style Complexity - Traditional tools combined font, color, and alignment into a single text style. - A project with three text formats and three colors could require nine separate styles, even before accounting for alignment. - Changing a color—such as an inaccessible light-gray link color—required manually updating every affected style. - Figma separated form, color, and alignment so each attribute could be edited independently. - Updating a source fill style automatically propagated the change throughout the design. ## Applying Multiple Styles Within Text Fields - Other design tools often restricted a text field to one style. - Formatting part of a sentence as a link or section heading could break its connection to the original style. - Figma allowed users to highlight portions of text and apply different text or fill styles. - These partial styles retained their links to the source styles and updated when those styles changed. ## Beta Rollout - The private beta was intended to reduce daily styling problems and support scalable team design systems. - Migration was planned to begin with smaller teams before larger ones. - The migration was one-way, so teams needed to consider the change before participating. Figma recommended Styles as a more flexible foundation for consistent design systems, especially for teams managing shared typography and visual attributes at scale.

Figma Design Systems User Experience Accessibility+2

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