Figma

532 posts

figmaAug 28, 20242 min readCurated summary

Breaking In: A Guide To Landing Your First Product Design Role | Figma Blog

Figma’s guide explains how aspiring product designers can land their first role by presenting strong work, communicating their thinking, and showing how they learn from challenges. It emphasizes that a portfolio should be personal but focused on clear storytelling, accessible navigation, and evidence of design impact. The strongest projects are those where candidates can explain their decisions, trade-offs, constraints, and outcomes. ## Crafting a Portfolio - Portfolios do not need to follow one prescribed format or use a specific website builder. - The priority is to: - Showcase your best work. - Tell compelling project stories. - Make the portfolio easy to navigate. - Represent your individual perspective and skills. ### Lead with Your Best Work - Your first project creates the initial impression, so lead with work that best demonstrates your: - Design skills - Creativity - Process - Product impact - If choosing between projects, feature the one you can discuss most naturally and explain most compellingly. - Strong case studies should include: - A clear problem statement - Important project milestones - An insightful conclusion - Relevant metrics and learnings - What you would change in retrospect - A project does not need to have been an overwhelming success. Honest reflection and lessons learned can create a stronger narrative. - Explain the reasoning behind design decisions, not just the final visuals. - Discuss the trade-offs, advantages, disadvantages, constraints, and implications of choices involving colors, components, styles, and copy. - Figma designer Tammy Taabassum argues that explaining “why” demonstrates product thinking more effectively than simply showing “what” was designed. ## Figma’s Early-Career Opportunities - Figma welcomes interns and new graduates onto its product design team. - Early-career designers are encouraged to contribute actively and bring new ideas rather than merely observe. - The guide is intended to explain what Figma looks for and how aspiring designers can prepare for its interview process. A practical approach is to build a portfolio around a few well-developed case studies, prioritize the work you can explain most clearly, and make your decision-making and learning as visible as the final design.

Figma User Experience Generative AI Product Design+3

figmaAug 19, 20243 min readCurated summary

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain. ## Crunchyroll’s Design Complexity - Crunchyroll serves around 15 million fans across: - Web and mobile applications - Smart TVs, game consoles, set-top boxes, and Roku - Nine living-room platforms - Supporting multiple languages and complex licensing requirements increases product complexity. - The company also extends beyond streaming through the Crunchyroll Store and Game Vault. - Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone. ## Measuring Design Success - James Hsu defines successful design through two baseline criteria: - It looks good, using sound typography, grids, spacing, and visual hierarchy. - It works well, with clear content, thoughtful interactions, and no frustrating edge cases. - A design can be visually polished but still fail if users become trapped in confusing flows or loops. ## The Role of the Universal Design System - The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior. - Reusable components improve team efficiency, much like meal preparation: - Teams can build from existing solutions. - New components can be evaluated based on their cost and value. - Shared patterns speed up product delivery and help product teams validate ideas quickly. - Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle. ## Adapting the Design System to Reality - Crunchyroll uses: - A foundational design layer - Separate component libraries for individual clients - The system still contains many one-off components, numerous variants, and an underdeveloped type system. - The team rejects treating the existing system as an unchangeable process. - The design system should serve current product needs, not constrain teams because of decisions made by previous teams. - Different designers are at different stages of understanding and adopting the system, making education and early investment important. ## Problems with the Previous Workflow - Design and code parity was managed through complicated Jira workflow triggers. - Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information. - Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV. - Finding the right flow required invitations, navigating branches, and comparing against outdated designs. - Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating. - Handoff statuses were ambiguous: - Designers submitted work for review. - Reviewers moved it back to “in progress.” - Exported designs were not necessarily final. - Engineers had to rely on labels such as “ready for development.” ## How Dev Mode Improved Handoff - Dev Mode gives engineers direct access to design values and helps them identify the correct component. - Designers now create a dedicated, organized page when work is ready for development. - The page is labeled “ready for development,” and engineers receive a link directly to it. - Engineers no longer need to sift through ideation or outdated explorations. - Faster loading and parsing removed a major pain point from the previous tool. - The team supported adoption through documentation and onboarding workshops for developers. - Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible. Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.

Figma Design Systems User Experience Design To Code+4

figmaAug 14, 20242 min readCurated summary

The Three Cs of Figma: A Beginner’s Guide to Success | Figma Blog

Figma beginners should focus less on memorizing individual features and more on building practical skills through three stages: creation, customization, and collaboration. The author argues that this framework makes learning more structured and helps users progress from making simple designs to creating reusable resources for their teams. Learning by doing, seeking help, and setting realistic milestones are central to that progression. ## Establishing Goals, Timelines, and Mindset - Define what you want to learn and how Figma fits into your role, whether in design, development, product management, or education. - Suggested milestones: - **30 days:** Learn basic tools, collaboration practices, and file organization. - **60 days:** Pilot projects and identify knowledge gaps. - **90 days:** Add more advanced features to your workflow. - Adopt a hands-on learning approach by experimenting, making mistakes, and rebuilding. - Share work and ask questions through coworkers, Slack, social media, or the Figma Community Forum. - Take breaks and allow time for unfamiliar tools and processes to become natural. ## The Three Cs of Figma - **Creation:** Learn to make a basic design element. - **Customization:** Use advanced features to make the element flexible and reusable. - **Collaboration:** Share the work with teammates and provide components or documentation they can use. - The three stages function like rungs on a ladder: users first create something, then improve its adaptability, and finally make it useful to others. - Figma’s Help Center, YouTube channel, virtual events, and community resources support this learning process. ## Applying the Framework to a Button - A button provides a practical example of the three Cs: - Create a basic button. - Turn it into a reusable component. - Publish it so teammates can use it in their own files. - This approach connects individual feature knowledge to real design workflows and team collaboration. - Figma provides a playground file for practicing the progression. The practical recommendation is to learn Figma through small, complete projects rather than isolated feature tutorials. Build something, make it reusable, and share it with others while progressing at a sustainable pace.

Figma Design Systems Prototyping User Interface+2

figmaJul 29, 20242 min readCurated summary

HP Powers Up Design Handoff with Dev Mode | Figma Blog

HP built its Veneer design system to unify digital experiences across more than 100 product lines and many independent business units. By combining design language, reusable components, documentation, governance, and community feedback, HP reduced duplication and improved consistency. Figma’s Dev Mode further streamlined handoff, helping developers interpret designs faster and cutting development time by up to 50% on some projects. ## Building a multilayered design system - HP’s diverse products—including printers, laptops, and gaming systems—each have distinct brand and product requirements. - Teams previously worked in isolation, making it difficult to maintain a consistent digital experience. - Veneer evolved from a frontend component library into a broader system containing: - Design language and tokens - Shared components and patterns - Usage guidelines, code standards, and snippets - Governance and community collaboration - Its multilayered structure supports HP’s numerous sub-brands rather than forcing every product into one rigid system. ## Measuring adoption and impact - HP tracks both usage data and feedback from designers and developers. - Veneer’s iconography library includes 915 components used by 320 teams. - The library averages approximately 85,000 component inserts per week. - HP reported that Veneer saved projects 500% more time than the time invested in creating the system during 2023. - Some projects experienced a 50% reduction in development time. - Adoption remained challenging because designers were protective of their product-specific work and teams needed flexibility for different sub-brands. ## Dev Mode improves design handoff - Dev Mode gives developers direct access to design specifications in Figma, reducing meetings and repeated clarification between design and engineering. - **Compare changes** helps teams identify differences between design versions, especially when updating existing products. - **Ready for development** lets designers indicate which parts of a design are prepared for implementation, helping developers focus on the correct work. - **Variables** connect designs to primitive and semantic tokens, allowing HP’s system to scale across themes and modes. HP’s experience suggests that a successful enterprise design system must be flexible, measurable, and supported by strong collaboration. Pairing such a system with Dev Mode can make handoff clearer, reduce redundant work, and give both designers and developers more time to focus on higher-value work.

Figma Design Systems Design Tokens Dev Mode+2

figmaJul 10, 20242 min readCurated summary

Crafting the Visual Identity for Config 2024 | Figma Blog

Figma’s Brand Studio created Config 2024’s visual identity as an immersive extension of the Figma brand. Inspired by the redesigned Figma canvas and Figma Slides, the team developed a flexible, shape-based system that could work across a massive physical and digital conference experience. The result balanced visual variety with practical UX needs for more than 10,000 in-person attendees and a larger virtual audience. ## Balancing Form and Function - The team drew inspiration from switching between different modes of making, such as creating, sharing, and presenting work. - They developed a visual language centered on shapes that could: - Shift and transform - Amplify creative ideas - Reveal unexpected perspectives - Represent collaboration and multiple modes of creation - Three large physical supergraphics formed the conference’s central installations. - Attendees used them as seating, photo backdrops, and meeting points. - The identity was designed not only for visual impact but also for usability. - It supported complex experiences such as registration and navigating popular talks. - The system helped guide attendees through the event while maintaining a cohesive look. - Simple primitive shapes served as the foundation for more complex graphic structures. ## Designing at Scale - Config required a large volume of assets across physical spaces, digital surfaces, signage, merchandise, and other touchpoints. - The team created a modular system that could remain consistent without becoming repetitive. - Its core shapes came directly from the Figma toolbar: - Rectangle - Circle - Polygon - These basic forms reflected the starting point of the design process in Figma and became components of larger supergraphics. - The team built a reusable component library in Figma to generate variations efficiently. - Each supergraphic included three variants, allowing shapes to be presented from different angles and creating visual variety across the conference. Figma’s approach demonstrates how a strong event identity can combine expressive branding with a practical, reusable design system. By treating simple interface primitives as flexible building blocks, the team created a conference experience that could scale across environments while remaining recognizably Figma.

Figma Design Systems User Experience Component Library+1

figmaJun 25, 20242 min readCurated summary

What is Good Design in the Age of AI? | Figma Blog

AI is making product creation faster and more accessible, increasing the importance of design as a differentiator. Figma argues that designers should not chase automation or trends, but apply enduring principles such as empathy, creativity, and solving real user needs. The future of good design will depend on experimentation, stronger design-to-code connections, pragmatism, and new forms of human–AI collaboration. ## AI Creates a New Design Inflection Point - Like the iPhone’s launch in 2007, AI is introducing a new medium that requires experimentation and the development of new interaction patterns. - Early mobile products often forced desktop experiences onto smaller screens; today, many AI products similarly rely on basic chatbots and templates. - Designers can unlock AI’s potential through: - Richer interactions - Intuitive gestures - Patterns designed specifically for AI - AI can generate code, designs, and complete applications from prompts, allowing teams to move rapidly from concept to creation. - As more people participate in product development, thoughtful design becomes increasingly important for products to stand out. ## Codifying the Fundamentals of Good Design - Figma’s AI feature for generating initial UI drafts needed to understand the mechanics of good design. - Because large language models are text-oriented, generating high-quality visual interfaces is more difficult than generating text or code. - A complete rulebook for design is impractical: - Good design contains too many contextual details to define exhaustively. - Extremely large prompts exceed technical token limits. - Figma instead focused on reducing design expertise to a small set of broadly applicable principles. - Teaching AI requires designers to make their intuitive knowledge explicit by creating rules that are: - Clear - Concrete - Practical - General enough to apply across many interfaces - The process resembles teaching design: instructors must break complex judgment into principles that others can understand and use. ## Design’s Continuing Role - AI should elevate design rather than simply automate it. - The most valuable design foundations remain relatively constant despite technological change. - Designers’ roles may evolve, but their understanding of users, creativity, and ability to solve meaningful problems remain essential. ## Practical Direction Teams should treat AI as a new design medium, not merely an automation tool. They should experiment with AI-native interaction patterns while grounding products in concise, teachable design principles and genuine user needs.

Figma AI Design Systems Large Language Models+2

figmaJun 25, 20242 min readCurated summary

Stack the deck with Figma Slides | Figma Blog

Figma Slides is introduced as an open-beta presentation tool combining Figma’s high-fidelity design capabilities with FigJam’s collaborative feedback features. It aims to help designers and non-designers create more engaging presentations without exporting work into separate tools. Figma positions it as a way to turn product reviews, sales decks, and pitches into clearer visual stories and collaborative conversations. ## Why Figma Built Slides - Presenters commonly struggle with: - Designing creative layouts - Finding effective visuals - Spending more than eight hours creating a deck - Figma users created approximately 3.5 million presentations in the previous year. - Designers often had to move Figma work into other presentation tools or distribute prototypes and pre-reads to non-designers. - Figma Slides brings presentation creation into the same environment as design and collaboration. ## High-Fidelity Design Features - Slides includes core presentation features such as: - Speaker notes - Slide transitions - Presentation-focused editing tools - Design mode provides access to Figma Design capabilities, including: - Auto Layout - Advanced properties - Precise alignment and snapping - Interactive components and states - Interactive components, such as hover states, can remain functional during presentations. ## Shared Libraries and Assets - Existing Figma text styles, color styles, and design assets are available directly in Slides. - Designers can reuse established libraries instead of recreating presentation elements. - Copy-and-paste workflows work across Figma products, reducing the need to export interface designs individually. ## Grid View for Structuring Narratives - Users can edit individual slides or switch to grid view for an overview of the entire deck. - Grid view organizes slides into rows, making it easier to: - Rearrange sections - Review the overall story - Refine the narrative arc - This bird’s-eye perspective is particularly useful for long presentations where restructuring becomes difficult. ## From Presentations to Conversations - Figma’s experience with FigJam revealed the limitations of one-way presentations. - FigJam became a regular tool for meetings such as team kickoffs, bug bashes, executive reviews, all-hands meetings, and Q&A sessions. - Figma Slides is intended to combine polished visual storytelling with collaborative participation, helping more people contribute to and influence the discussion. Figma Slides’ central promise is to make presentations both visually sophisticated and easier to build collaboratively, allowing teams to design, organize, and discuss their ideas in one shared space.

Figma User Experience Figjam Design Collaboration+3

figmaJun 25, 20242 min readCurated summary

Inside the Redesigned Figma, Where Your Work Takes Center Stage | Figma Blog

UI3 is Figma’s third major redesign, created to manage the complexity accumulated over nearly a decade of new features. Its central goal is to put users’ work—not the interface—at the center while preserving professional workflows and making Figma more approachable. The redesign also establishes a flexible foundation for products such as Dev Mode, Figma AI, and Figma Slides. ## Why Figma redesigned the interface - **Center users’ ideas:** New capabilities such as interactive components and AI risked making the interface feel crowded or distracting. - **Serve both beginners and experts:** Figma aimed to become more intuitive for newcomers without removing the power and familiar ergonomics professional designers rely on. - **Adapt to modern design practices:** Reusable components, generative AI, and higher-level abstractions require tools that provide building blocks rather than focusing only on individual pixels. - **Prepare for the future:** UI3 supports Figma’s broader ecosystem, including closer connections between design and code, Dev Mode, Figma AI, and the newly introduced Figma Slides. ## Clearing the stage for the canvas - The redesign began by maximizing canvas space and reducing visual distractions. - Figma experimented with extreme concepts, including interfaces that appeared only on hover and layouts where panels constantly appeared and disappeared. - These approaches made the workspace feel unstable, so the team moved toward a more consistent solution: - Resizable and collapsible panels - A slim toolbar positioned at the bottom of the canvas - The ability to hide the interface completely and reveal panels when needed - The new structure creates a roomier workspace and provides a consistent framework for switching between Figma products. ## Iterative design process - Figma explored hundreds of interface variations. - Designers built and used many prototypes internally to evaluate how each approach affected real workflows. - Features and controls were deliberately removed until the team identified what users genuinely missed, then selectively restored them. UI3’s practical recommendation is to give designers more control over the interface: keep tools accessible, but allow the canvas and the work itself to take priority.

Figma Design Systems User Experience Generative AI+2

figmaJun 25, 20242 min readCurated summary

Making Figma Work Better for Freelancers and Agencies | Figma Blog

Figma is revising its billing model to better support freelancers and agencies that work across multiple clients. The company acknowledges that its organization-focused plans create licensing and administrative overhead, and proposes connected workspaces, easier project transfers, and stronger billing controls. These changes aim to make external collaboration easier while reducing unexpected seat charges. ## Connected Workspaces for External Collaboration - Figma is developing connected workspaces that link separate Figma accounts. - Freelancers and agencies will be able to collaborate with clients and co-edit files using their existing seats. - The feature is expected to roll out early the following year, reducing the need for multiple licenses. ## Easier Project Transfers Figma plans to improve transferring work between accounts and plans so freelancers can hand projects to clients with less friction. - Users will be able to transfer a copy while retaining the original. - Collaborators can be removed during transfer to prevent accidental paid-seat upgrades. - Work can be transferred across Professional, Organization, and Enterprise plans. - These improvements went live on August 20. ## More Visibility and Control Over Billing Figma’s browser-based collaboration model lets users begin editing immediately, but it can leave admins responsible for remembering to downgrade seats after a project ends. - Admins can enable daily, weekly, or monthly notifications showing who upgraded and what action caused the upgrade. - New accounts receive these notifications by default: - Weekly on Professional plans - Monthly on Organization and Enterprise plans - Admins can set new users’ default role to “viewer-restricted,” requiring explicit approval before they receive a paid seat. - Figma says broader billing-architecture improvements are still underway. Figma’s immediate tools help admins monitor and approve seat changes, while connected workspaces and improved transfers address the larger structural challenges freelancers and agencies face.

Figma Figjam Collaboration Figma Design+1

figmaJun 11, 20242 min readCurated summary

The Long and Short of It: Issue no.5 | Figma Blog

Issue no. 5 of Figma’s newsletter, “Come together,” argues that progress depends on community, collaboration, and shared inspiration. Ahead of Config, it highlights creators and leaders whose work shows how connection—whether in person or online—helps turn ideas into reality. The issue spans product development, design quality, creative experimentation, AI, and community events. ## Building tools that feel magical - Charmaine Lee, product manager for Snap’s Lens Studio, shares principles for creating developer tools that delight creators. - Her approach emphasizes hands-on involvement, collaboration, and understanding the creator’s experience rather than following rigid product-building rules. - The feature presents creator-focused product development as an “all-hands-on-deck” effort. ## Craft, beauty, and product quality - Leaders from Stripe, Linear, and Figma discuss how to define and measure craft and beauty in digital products. - Katie Dill, Karri Saarinen, and Yukhi Yamashita explore the relationship between form and function. - Their central argument is that thoughtful design is not merely cosmetic: quality and beauty can contribute directly to product adoption and business growth. ## Designing quilts in Figma - Former product designer Nicole Boettcher uses Figma to plan and design handmade quilts. - Her process demonstrates how digital design tools can support physical, artistic work beyond conventional interface design. - The project playfully extends the idea of “moving rectangles,” connecting her former profession with her current craft. ## AI and creative tools - David Hoang, formerly of Replit, discusses how AI is changing creative tools, product design, and development workflows. - He recommends responding to rapid change through shared learning and strong communities. - Cohorts that combine accountability with fun can help people stay motivated as they develop new skills. ## Config and community opportunities - In-person Config tickets are sold out, but virtual attendance and local watch parties remain available. - Readers can follow the live blog for speaker highlights and event coverage. - The issue also promotes illustrator Thomas Colligan’s artwork, new Config merchandise, and the upcoming Figma Store release. Figma’s overall recommendation is to stay connected: creative progress is strengthened by mentors, collaborators, peers, and communities that make learning and experimentation possible.

Figma AI Product Design Developer Tools+3

figmaJun 10, 20243 min readCurated summary

What’s Happening at Config 2024? | Figma Blog

Config 2024 brought together product builders, designers, artists, and inventors for a conference focused on creativity, technology, and unconventional thinking. Figma’s coverage highlights talks, workshops, community activities, and behind-the-scenes moments from the event. The central message is that meaningful innovation comes from authentic perspectives, outside influences, experimentation, and the freedom to play. ## Conference Community and Programming - Config featured both in-person and virtual programming, including: - “Design of Everything” - New feature recaps - Friends of Figma - Figma EDU - “Figma like the pros” - Daily conference recaps - Attendees came from around the world, supported by speakers, staff, and volunteers. - Figma encouraged viewers to revisit sessions through its YouTube playlist and announced Config APAC for July 2. ## Designing Beyond Expectations - Karla Mickens Cole and Nashilu “Nash” Mouen of The Browser Company discussed designing for a world that resists conformity. - Working on the Arc browser, they argued that products should carry the “fingerprints” of their creators—their experiences, identities, and perspectives. - Nash emphasized that designers should look beyond technology for inspiration, drawing from unexpected sources, stories, and culture. ## AI, Digital Art, and Criticism - Artist Refik Anadol described his digital artwork *Unsupervised*, which uses AI to reinterpret MoMA’s archive. - He framed the project as an exploration of “the possible dreams of the machine.” - Responding to criticism that his work simplifies data, Anadol questioned who the critics are and what perspectives shape their judgments. - His comments reflected the broader challenge of establishing digital and AI-assisted art within the traditional art world. ## Creativity Through Play and Failure - Inventor and YouTuber Simone Giertz presented humorous projects such as a toothbrush-brushing helmet, a slapping alarm clock, a soup-feeding robot, and a drone hair cutter. - After leaving her startup, she found that striving for excellence was not helping and instead gave herself permission to play. - She stressed that difficulty does not necessarily equal importance. - Giertz also discussed overcoming self-deprecation and building a professional identity through her product design company, Yetch. - Her brainstorming exercise—finding unusual uses for a brick—encouraged attendees to embrace strange and creative ideas. - She concluded that creating her own career was her favorite invention. ## Design, Merchandise, and Hands-On Experiences - The conference floor offered opportunities for attendees to connect, explore exhibits, and shop at the Figma Store. - Attendees praised the quirky, distinctive character of the event merchandise. - In the Maker Space, participants customized tote bags with patches and received personalized aura portraits. Config 2024’s activities reinforce a practical creative philosophy: designers should draw from life beyond their field, experiment without fear of failure, and build work that reflects their individual perspectives.

Figma AI User Experience Product Design+2

figmaJun 2, 20242 min readCurated summary

Updates to how drafts work | Figma Blog

Figma is moving Drafts for Starter and Professional users into team-associated spaces. The change is intended to clarify ownership, permissions, security, and plan features while keeping drafts private and free to create or edit. Users must eventually move existing drafts into a team, though no immediate deadline applies. ## Why Figma Is Changing Drafts - Drafts previously existed outside teams, creating: - Unclear ownership and team association - Inconsistent behavior across Figma plans - Limited access to paid features such as advanced prototyping, password protection, and Dev Mode - Ambiguous permissions between personal and professional work - Potential security, intellectual-property, and file-loss risks ## New Drafts Structure - Every draft must now belong to a team. - Each team provides members with a private drafts space. - Drafts in Professional teams can use Professional features when edited by eligible users. - Collaborators who are not full team members will be changed from editors to viewers when a draft moves, preventing unexpected paid seats. - Users with one Starter team may have their drafts migrated automatically. ## What Remains the Same - Drafts remain private to their owner and invited collaborators. - Users can create and edit personal drafts for free. - Starter teams can have unlimited viewers and unlimited editors on up to three collaborative files. ## Moving Existing Drafts - Users will find their files in a temporary “Drafts to move” space. - Drafts can be moved into any existing team or into a newly created free Starter team for personal work. - Existing collaborators can continue editing before migration, but new collaborators can only be added after moving a file to a team. - There is no hard deadline yet; unmoved drafts will eventually be transferred to a new free Starter plan after advance notice. ## Future Billing and Collaboration Improvements - Figma plans to make paid editor-seat upgrades clearer. - Planned improvements include better freelancer handoffs, support for users on multiple teams, license management, admin tools, and guest management. - The company is also redesigning its core billing experience. Figma recommends organizing drafts into the appropriate team—or creating a free Starter team for personal projects—to establish clearer separation between professional and personal work.

Figma Prototyping Dev Mode Access Control+2

figmaMay 21, 20242 min readCurated summary

Unlocking the Power of Code Connect | Figma Blog

Code Connect helps design systems bridge the gap between design and engineering by making implementation guidance and production code available directly in Figma’s Dev Mode. Leaders from Bumble, GitHub, and HP argue that successful adoption depends on creating shared terminology, meeting developers in their existing workflows, and introducing the tool incrementally. The broader conclusion is that Code Connect is a practical first step toward tighter, more consistent design-to-code collaboration. ## Establish a shared language - Designers and developers often use different naming conventions, component properties, and expectations. - Design systems can serve as a “third language” by defining shared terms, patterns, and components. - Documentation and design decisions must be easy to discover and implement, not merely documented somewhere. ## Bring design guidance into developer workflows - Teams often struggle to identify a single source of truth, leading to inconsistent implementations and duplicated code. - Designers may rely on design documentation while engineers consult separate technical sources. - Code Connect surfaces design-system documentation and implementation details directly in Dev Mode, reducing the need for developers to switch to external websites or tools. - This helps teams reuse established patterns instead of repeatedly creating custom solutions. ## Start small to encourage adoption - Design systems cannot assume that people will adopt them simply because they exist; reducing friction is essential. - Code Connect lets developers inspect how a design has been implemented without leaving their existing workflow. - Teams should begin with small, high-impact components such as toggles. - Mapping a few components first makes it easier to learn the process, demonstrate value, and expand gradually. - HP’s Gilson Hoffmeister describes Code Connect as a first step toward broader design-system improvements. ## Value both disciplines’ expertise - Effective design-to-code collaboration requires recognizing that designers and developers contribute different forms of expertise. - Code Connect is intended to connect those perspectives by delivering design-system code into Dev Mode. - Better alignment can improve consistency, speed, and the quality of handoff without requiring either discipline to abandon its established practices. Teams should begin with a small set of frequently used components, establish shared terminology and ownership, and use Code Connect to make authoritative implementation guidance available where developers already work.

Figma Design Systems Design To Code Dev Mode+2

figmaMay 21, 20242 min readCurated summary

Speeding Up File Load Times, One Page At A Time | Figma Blog

Figma improved file-loading performance by dynamically loading only the page a user opens instead of the entire file. This approach reflects user-perceived complexity, reduces memory usage, and avoids making small pages wait for unrelated content. For the slowest 5% of loads, the change reduced load times by 33%. ## Loading Content According to User Needs - Figma files can contain dozens of pages, hundreds of frames, components, styles, variables, and prototype screens. - Usage data showed that users often treat a file as an entire project but typically visit only a subset of its pages in one session. - Loading everything up front made a small page unnecessarily depend on the size of the whole file. - Dynamic loading lets Figma display the selected page first and fetch additional content only when needed. ## Cross-Page Read Dependencies - A Figma file is modeled as a tree of nodes, with nodes representing interactable layers and their properties. - Nodes can reference content located on other pages, creating cross-page dependencies. - An instance points to its backing component, which may be on another page; the component must be loaded before the instance can render correctly. - Styles and variables also create dependencies: - A fill style requires loading its corresponding style node. - A variable-based font size requires the variable node so the client can resolve the raw value. ## QueryGraph and Earlier Dynamic Loading - Figma had already developed dynamic loading for view-only files and prototypes. - Its QueryGraph framework stores dependency relationships as an in-memory graph. - The multiplayer system uses this graph to determine which parts of a file should be sent to connected clients. - Previous loading strategies included: - **Page-based canvas loading:** Load the selected page and its required dependencies, then fetch other pages on demand. - **Frame-based prototype loading:** Load the current prototype screen and preload reachable frames within a limited number of transitions. ## Performance Impact - The goal is for load times to trend downward even as files become larger and more feature-rich. - Dynamic loading improves both initial responsiveness and memory consumption. - The largest benefits appear in worst-case loads, with a reported 33% reduction for the slowest 5% of page loads. Figma’s approach demonstrates that large collaborative documents should be loaded according to the user’s immediate context, while dependency tracking ensures referenced content remains available when required.

Figma Performance Optimization Dependency Graph Dynamic Loading+1

figmaMay 8, 20242 min readCurated summary

Craft and Beauty: The ROI of Marrying Form and Function | Figma Blog

Craft and beauty are presented as business advantages, not merely aesthetic preferences. Leaders from Stripe, Linear, and Figma argue that thoughtful details improve usability, engagement, conversion, and product differentiation. Their examples—including a 20% increase in email conversion and 11.9% higher average revenue for Stripe Checkout users—show that investment in quality can directly support growth. ## Craft Improves Usability and Conversion - Beauty can make products feel easier and more effective, an effect known as the **aesthetic usability effect**. - Clearer language, stronger visual hierarchy, and a smoother journey helped Stripe increase conversion from an email series by **20%**. - Every user touchpoint can either add or subtract value from the overall product experience. - Stripe’s Optimized Checkout Suite, whose quality and detail were key priorities, helped businesses generate **11.9% more revenue on average**. ## Craft as a Mindset, Beauty as the Result - Linear’s Karri Saarinen distinguishes between: - **Craft:** the mindset and care applied while creating something. - **Beauty:** the visible experience and quality that result. - Quality extends beyond appearance. A well-designed object or product should function smoothly, reliably, and pleasantly. - The central question is whether a team is committed to doing excellent work or merely completing tasks as quickly as possible. ## Performance and Quality Are Foundational - Figma views product quality as a hierarchy of needs. - Fundamental qualities such as web performance and a consistent **60 frames-per-second** experience must come first. - These technical foundations enable users to appreciate higher-level design and interaction details. - Craft also involves making products feel intuitive—so well-designed that users feel everything simply works. ## Craft Requires a Company-Wide Culture - Craft is not the responsibility of a single design team; engineering, product, design, and other functions all contribute. - Figma and Linear emphasize that quality should be an inherent cultural value rather than something enforced only through OKRs. - Stripe uses “friction logging” and multidisciplinary “walking the store” exercises, in which teams experience the product end to end as users do. - This approach helps teams identify and remove problems across the full customer journey. The practical recommendation is to treat craft as an organization-wide operating principle. Companies should invest in performance, clarity, usability, and detail at every touchpoint, because form and function together can create both a better experience and measurable business results.

Figma User Experience Product Design Stripe+2