Techlist.io - Korean Tech Blog Curator

figmaAug 6, 20182 min readCurated summary

Master the art of design portfolios with this free online Skillshare class | Figma Blog

The post introduces a free Figma and Skillshare course designed to help aspiring product designers create stronger portfolios and improve their chances of landing a job. It argues that an effective portfolio should present not only polished results, but also the designer’s process, learning, adaptability, and outcomes. The course covers portfolio creation from initial content choices through interviews and peer feedback. ## Why Portfolios Matter - Applying for a first product design role can be difficult because the field includes many specialties and interview expectations. - A portfolio is central to the job search and should represent work both accurately and memorably. - New designers should be deliberate about what they include and how they frame their experience. ## What the Course Covers The free Skillshare class addresses: - Which information belongs in a design portfolio. - How to create a clear and effective visual presentation. - How to structure projects as case studies. - How to maintain a consistent professional story across: - An online presence - Applications - Interviews - How to iterate on portfolio designs and collaborate with peers in Figma. - How to invite mentors into Figma projects for practical feedback. ## Understanding Product Design Roles - Product design can combine: - User research - User experience design - Prototyping - User testing - Visual design - Smaller companies often expect designers to handle several of these responsibilities. - Larger organizations may divide product design into specialized roles. - Designers should identify their strengths and interests while remaining open to adapting as tools, methods, and industry needs change. ## Showcasing Process and Growth - Portfolios should highlight: - The design process - Key decisions - Lessons learned - Project outcomes - A final visual result alone does not demonstrate how a designer thinks or works. - Employers value candidates who show curiosity, adaptability, and a willingness to learn. - Sharing projects with classmates and mentors can provide useful critique and improve the portfolio. The practical recommendation is to use the course—or the linked written guidance—to build a portfolio that tells a complete story: what you did, why you did it, what you learned, and what changed as a result.

Figma User Experience Prototyping Product Design+4

figmaAug 1, 20182 min readCurated summary

Figma feature highlight: Observation Mode | Figma Blog

Figma’s Observation Mode lets one person mirror another collaborator’s screen in real time. By clicking a teammate’s avatar, users can follow cursor movements, navigation, text changes, and prototype interactions as they happen. Figma presents it as a useful alternative to traditional screen sharing for critiques, client feedback, and user testing. ## How Observation Mode Works - When multiple people are viewing a Figma file, click a person’s avatar in the upper-right corner. - Your view then follows everything that person sees and does. - The mirrored activity includes: - Moving through the file or prototype - Editing text inside frames - Selecting objects - Expanding design elements - Moving the cursor - Observation Mode is available even to users with view-only access, provided sharing is enabled for the file or project. ## Real-Time Design Critiques and Feedback - Designers can watch clients or teammates explore a design instead of relying only on verbal explanations. - The feature makes remote critiques more interactive by allowing everyone to follow the same part of the file. - Clients can demonstrate their reactions and questions directly within the design. ## User Testing in Figma - Researchers or designers can observe users as they move through a prototype. - Watching interactions live reveals: - Where users hesitate - Which elements cause confusion - Where navigation breaks down - Which interface areas create pain points - This provides more direct evidence than collecting anecdotal feedback after a test. ## Sharing and Privacy Considerations - Anyone with access to a shared file may be able to use Observation Mode, including viewers. - Designers should be comfortable being observed before sharing a design URL. - Teams should consider file-sharing permissions when using the feature for sensitive work. Observation Mode is best used as a lightweight collaboration and research tool: enable sharing, ask participants to explore the file or prototype, and follow their activity live to gather more precise feedback.

Figma Prototyping Real Time Collaboration User Testing+2

figmaJul 31, 20182 min readCurated summary

How Kiwi.com handles project structure, versioning & components in Figma | Figma Blog

Kiwi.com’s small mobile design team uses Figma to bring design collaboration, prototyping, versioning, and handoff into one shared environment. Their previous Sketch workflow depended on Sketch, Zeplin, Abstract, Marvel, and Dropbox Paper, creating frequent synchronization problems. Figma became attractive because it could centralize these activities and support contributions from around twenty collaborators. ## A Small Team with Many Contributors - Kiwi.com’s mobile design team consists of only two people. - Around twenty others contribute through: - Commenting on design iterations - Correcting copy - Designing cross-platform features - The broader front end and Orbit design system were built in Sketch. - Because Orbit’s mobile components differ visually, the team decided to explore building the mobile system in Figma. ## Problems with a Multi-tool Sketch Workflow - Sketch was used alongside: - Zeplin for developer handoff - Abstract for version control - Marvel for static prototypes - Dropbox Paper for embedded PNGs - These tools frequently fell out of sync: - Prototypes could reflect older tested versions. - Designers might forget to commit changes to Abstract. - Zeplin might not contain the latest approved visuals. - Documentation images could be weeks out of date. - The workflow required constant manual coordination between separate sources of truth. ## Why the Team Chose Figma - Figma offered a way to consolidate design work, collaboration, prototyping, and version history. - Its value became clearer in a team where many people needed access to current designs. - The author initially resisted Figma, preferring a native design application over a browser-based tool. - As Kiwi.com’s collaborative needs grew, the advantages of a shared, synchronized workspace outweighed that hesitation.

Figma Design Systems Prototyping Sketch+2

figmaJul 25, 20182 min readCurated summary

Introducing: Design Dictionary from Figma | Figma Blog

Figma introduced its Design Dictionary to make design terminology more accessible and improve communication across teams. The resource addresses the field’s dense vocabulary, which can confuse newcomers and hinder collaboration between designers, engineers, product managers, copy editors, and stakeholders. Launched with 70 terms and open to community contributions, the dictionary is intended to evolve alongside the design industry. ## Design’s Specialized Language - Design terminology draws from art, printmaking, publishing, usability, and typography. - Terms help experts discuss detailed concepts precisely. - The same vocabulary can intimidate people who are new to design or work alongside designers. ## The Need for Cross-Functional Understanding - Modern digital products involve many roles in design work: - Engineers translate designs into production code. - Copy editors add and refine content. - Stakeholders review and approve designs. - Product managers coordinate the broader process. - Collaboration becomes harder when teams use design terms inconsistently or do not understand them. - Figma experienced this challenge after hiring employees from business, analytics, support, engineering, and other non-design backgrounds. ## The Design Dictionary - Figma created the dictionary as a practical glossary for learning core design terminology. - The initial release included 70 terms. - It was open-sourced so the wider design community could benefit from and contribute to it. - The resource was expected to expand as design practices and industry language evolved. ## Community Contributions - Figma invited readers to suggest terms that cause confusion in their organizations. - Examples included “White Space,” “Stroke,” and “Lorem Ipsum.” - Users could submit new ideas and corrections through a link in the dictionary. Figma’s Design Dictionary is recommended as a shared reference for teams working across design and product development. Its broader goal is to create a common language that makes cross-functional design collaboration clearer and more effective.

Figma Design Systems User Experience Open Source+2

figmaJul 23, 20181 min readCurated summary

#FigmaTip Roundup 9.0 | Figma Blog

This #FigmaTip Roundup presents practical shortcuts and component techniques shared by the Figma design community. The tips focus on arranging objects efficiently, creating mirrored component variants, and customizing spacing adjustments. Together, they show how keyboard shortcuts and reusable components can speed up common design tasks. ## Arranging Multiple Frames - Use **Cmd + `** to pack selected objects vertically. - Use **Cmd + Shift + `** to pack them horizontally. - Combine these shortcuts with Figma’s alignment commands to quickly reorganize several frames or objects. ## Creating Mirrored Components - To make a flipped, reusable component: - **Option-drag** the original component into a new empty component. - Press **Shift + H** to mirror it horizontally. - The mirrored component remains linked to the original, so changes made to the source component are reflected in the flipped version. ## Customizing Spacing with “Nudge Amount” - Figma’s **Nudge Amount** setting controls how far objects move when using the arrow keys. - Adjusting this value lets designers choose more appropriate spacing increments instead of relying only on the default nudge distance. - This is useful for making precise or larger layout adjustments more efficiently. These techniques provide quick ways to improve layout organization, maintain consistent component variations, and fine-tune spacing directly from the keyboard.

Figma Design Systems User Interface Keyboard Shortcuts+1

figmaJun 27, 20183 min readCurated summary

Art of Listening: One designer’s foray into experiential design | Figma Blog

The article profiles IDEO interaction designer Mike Godlewski and his side project, Art of Listening, a communal music experience built around focused, uninterrupted listening. Inspired by a movie club, Mike created a space where people listen to an entire album in silence, reflect creatively, and discuss it afterward. The project demonstrates how listening, intentional constraints, and offline experiences can enrich both personal creativity and professional design work. ## Listening as a Design Skill - Mike believes good designers should listen more than they speak. - Understanding human problems requires exploring people’s motivations, needs, and context rather than jumping directly to solutions. - This idea connects design with John Maeda’s distinction between design as a solution and art as a question. ## How Art of Listening Began - Mike was inspired by a friend’s movie club, where participants watched films quietly and discussed them afterward. - He adapted the format to music because he wanted a communal listening experience in his own life. - The project was designed to eliminate digital and social distractions while encouraging reflection. ## The Art of Listening Experience - Participants sit together in a living room and listen to an album from beginning to end. - The central rule is to stay quiet and pay attention: - No conversations - No phone checking - No arriving late - Participants may doodle, write down memories, close their eyes, or simply listen. - Afterward, they discuss the album and share sketches or other responses. ## Designing the Event - Mike carefully selects artists whose albums have strong rhythm, structure, and narrative arcs. - He researches interviews, podcasts, social media posts, and B-sides to understand the artist and album more deeply. - During the listening session, photos and quotations appear on a monitor, adding context beyond what a typical distracted Spotify stream provides. - The event’s simple rules and carefully curated environment make deeper attention possible. ## Offline Creativity and Interface Design - Art of Listening gives Mike a creative reset from his screen-based, systematic interface work. - He observes that many designers seek similar breaks through analog practices such as film photography, letterpress, or bookbinding. - The project shows that unexpected creative activities can replenish designers’ energy and influence their professional work. - Mike’s experience also illustrates how creative pursuits can lead people into unfamiliar roles—in his case, event planning. The article ultimately encourages designers to make room for focused, offline experiences. Listening deeply, imposing thoughtful constraints, and exploring unexpected interests can generate fresh perspective for design work.

Figma Design Thinking Interaction Design Visual Design+2

figmaJun 20, 20182 min readCurated summary

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog

Figma 3.0 aims to replace fragmented, desktop-based design workflows with a unified web platform. Its major additions—more capable prototyping, shared styles and libraries, and an Organization tier—help teams keep designs, feedback, prototypes, and systems connected. The overall goal is to reduce tool switching, synchronization work, and redundant subscriptions. ## More Capable Prototyping Figma 3.0 expands prototyping so teams can create realistic interactive experiences directly from their designs: - **Device frames** provide context for designs across iPhones, Android devices, and Apple Watch. - **Fixed objects** keep headers, footers, status bars, and buttons attached to frame edges during scrolling. - **Scrollable areas** support nested frames, vertical lists, horizontal carousels, and scrolling in any direction. - **Transitions** such as dissolve, slide, and push make prototypes resemble native mobile applications. - Prototypes remain synchronized with the underlying design, eliminating screen exports and manual updating. - Comments stay linked to the design, while prototypes can be presented from a mobile browser. - Figma is also investing in an API for integrations with other prototyping tools and web applications. ## Styles and Team Libraries Figma Styles is now generally available, following extensive user research and a private beta. - Styles and Team Libraries allow companies to create and maintain shared design systems. - Teams can centralize reusable visual attributes and apply them consistently across projects. - The feature is intended to reduce inconsistencies and help organizations manage company-wide design standards. ## Organization Tier Figma is previewing a new Organization tier designed for larger companies. - It focuses on scaling design management across large organizations. - Together with shared components, commenting, developer handoff, and web-based collaboration, it is intended to support moving most of a team’s workflow into Figma. Figma 3.0’s practical recommendation is to consolidate design, prototyping, feedback, and design-system management in one web-based environment, while using Figma’s API when specialized integrations are still necessary.

Figma Design Systems Prototyping API+3

figmaJun 19, 20183 min readCurated summary

How one designer motivates others to build more ethical products | Figma Blog

Cat Noone’s work argues that accessibility should be treated as a product requirement, not a limitation added at the end of development. Through three apps— Iris Health, Stark, and Lyra—she designs for people often excluded by “typical user” assumptions. Her conclusion is that ethical, inclusive products emerge when teams understand diverse users and build accessibility directly into their workflows. ## Accessibility as a Product Priority - The article cites an estimate of 57 million disabled Americans, with 54% active online—roughly 9.3% of the population. - Noone challenges the idea that accessibility makes interfaces worse, asking whether excluding an entire population is itself poor design. - She recommends considering accessibility from the beginning rather than treating it as a later constraint. ## Iris Health: Emergency Medical Information - Iris Health was inspired by the risk of being unable to communicate medical information during an emergency, especially while traveling or living abroad. - If the app detects that a user is at a hospital and receives no response within ten minutes, it alerts emergency contacts by text. - A medical profile appears on the iPhone lock screen, allowing professionals to quickly view the user’s name, medications, allergies, and organ-donor status. - **Lesson:** Analyze potential users from every angle and adapt the interface to different medical and personal circumstances. ## Stark: Accessibility Within the Design Workflow - While developing Iris Health, Noone noticed that designers lacked sufficient tools for accessibility testing. - Stark provides color-blindness simulations and contrast-ratio checks directly within Sketch. - It enables designers to test different types of color blindness and verify typography against background colors. - The tool was already being used by teams at companies including Twitter, ESPN, Palantir, Dropbox, and Microsoft. - **Lesson:** Make accessibility checks part of the default workflow, using tools such as Stark, Contrast, and W3C accessibility resources. ## Lyra: Communication for Autistic Children - Lyra grew from Noone’s experience working with autistic children and others with special needs. - The app modernizes symbol-to-speech communication methods that traditionally relied on laminated cards and Velcro tabs. - Its goal is to help non-verbal autistic children communicate in a digital environment. - **Lesson:** Educate yourself about accessible design and learn to recognize common barriers before building a product. Inclusive design is most effective when it is built into research, design, and development from the outset. Teams should study the needs of underrepresented users and use accessibility tools continuously rather than relying on a final compliance check.

User Interface Accessibility Sketch Inclusive Design+3

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 6, 20183 min readCurated summary

How one designer finds inspiration in rabble rousers like Bart Simpson | Figma Blog

Linda Eliasen, Head of Design at Help Scout, draws creative energy from unconventional figures who challenge social rules and expectations. Her inspirations—from Bart Simpson to SNL comedians and Carl Sagan—helped her question conformity, reject restrictive ideas about femininity, and bring greater imagination and technical curiosity to her design work. ## Inspiration as a Creative Force - Eliasen rejects the idea that inspiration is entirely controllable or predictable. - She humorously describes inspiration as an almost supernatural force that arrives when artists keep showing up and working. - This view separates personal ego from creative results: success belongs to inspiration, while failure does not define the artist. - Her creative development was shaped by discovering broader worlds beyond her conservative hometown in Fayetteville, Georgia. ## Bart Simpson: Questioning the Rules - Bart Simpson encouraged Eliasen to imagine life beyond obedience and conformity. - As a shy, anxious child, she identified with Bart’s willingness to challenge: - His parents - Authority figures such as Chief Wiggum - School bullies and social expectations - Bart represented the freedom to say and do things she privately wished she could. - Learning that Bart was voiced by Nancy Cartwright added another layer of appeal, suggesting a playful challenge to traditional ideas about masculinity and identity. ## The Women of *Saturday Night Live*: Rejecting the “Pretty Girl” Ideal - SNL performers showed Eliasen that women could be funny, strange, messy, imaginative, and publicly expressive. - Growing up, she had limited access to female role models who pursued unconventional ambitions such as sports, architecture, comedy, or space exploration. - Social expectations emphasized being attractive, polite, thin, charming, and non-confrontational. - Performers including Cheri Oteri, Molly Shannon, Maya Rudolph, Tina Fey, Kristen Wiig, and Amy Poehler challenged those expectations through: - Ridiculous costumes and physical comedy - Unattractive or exaggerated appearances - Absurd characters - Bold, unconventional humor - Their example helped Eliasen see that women did not need to fit a polished, traditionally feminine ideal to succeed or take center stage. ## Carl Sagan: Expanding Technical Curiosity - Sagan’s writing opened new intellectual directions for Eliasen. - His ideas influenced her to incorporate more technical qualities into her creative work. - She describes discovering his essays as a transformative experience that brought renewed energy and possibility to her design practice. - Sagan represents inspiration through science, wonder, and curiosity rather than conventional artistic sources. Eliasen’s examples suggest that creative inspiration can come from rebellious humor, unconventional role models, and scientific exploration. Designers can expand their work by seeking influences that challenge inherited assumptions and make room for more playful, curious, and individual perspectives.

Product Design Design Illustration Color Theory+1

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 30, 20183 min readCurated summary

How one Figma engineer plays to her strengths | Figma Blog

Kathryn Salant’s interests in music, programming, and cycling all reflect her belief in experimentation, iteration, and measurable progress. Her career shows how creative disciplines can reinforce one another, leading her from trumpet performance and interactive media to software engineering at Figma. Across each field, she values collaboration, meaningful expression, and the process more than perfection. ## Figma’s “3 Things” Tradition - New employees present three experiences or interests that shaped them. - Kathryn’s three things—music, programming, and cycling—illustrate the connections between her creative and technical life. - Figma presents these stories to highlight the diverse backgrounds of its employees. ## Music and Creative Expression - Kathryn began playing trumpet in fifth grade and studied at the University of Wisconsin-Madison and the London College of Music. - She became dissatisfied with classical music’s emphasis on technical precision over inspiration and meaning. - In San Francisco, she joined the avant-garde Extra Action Marching Band in 2003. - The band performed with David Byrne and experimented with unconventional material, including Beyoncé and Black Sabbath covers. - These experiences deepened her interest in creativity beyond strict tradition. ## Programming as a Creative Tool - Kathryn first encountered programming in sixth grade on Apple IIe computers, learning Logo and creating a convincing Super Mario demo. - She continued experimenting by taking apart and sometimes breaking her mother’s work computer. - While studying music, she discovered Flash 4 and became fascinated by its combination of motion graphics, interactivity, and web technology. - Flash showed her that programming could enable artists, musicians, and designers to express ideas. - She pursued software engineering so she could help other people bring creative visions to life. - Her respect for design and emphasis on communication between engineers and designers align closely with Figma’s collaborative mission. ## Cycling and Community - Kathryn became an avid cyclist after completing the seven-day AIDS/LifeCycle ride from San Francisco to Los Angeles. - In 2006, she founded Butterlap, a weekly San Francisco bike ride centered on community and inclusiveness. - She later took part in CycloCross, a muddy, social form of bicycle racing. - Her participation in the 2008 Single Speed CycloCross World Championships was as much about encouraging others as competing. - Cycling reinforced her preference for shared experiences, perseverance, and not taking competition too seriously. Together, these three interests show Kathryn’s consistent approach: improve through iteration, stay open to unconventional ideas, and create alongside other people. Her story suggests that technical work can be strongest when it preserves the curiosity, collaboration, and expressive freedom found in the arts.

Collaborative Design Design Tools Motion Graphics Programming+3

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