figmaJun 20, 2018

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog (opens in new tab)

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.

team-libraryfigmadesign-systemsprototyping+3

figmaNov 29, 2017

How to build your design system in Figma | Figma Blog (opens in new tab)

Figma’s 2017 post argues that design systems can begin with simple, practical building blocks and grow into sophisticated libraries of reusable components. Rather than prescribing one method, it showcases how teams use Figma’s constraints, components, and Team Library to support different organizational needs. The examples suggest that design systems improve consistency while also strengthening collaboration among designers, engineers, product managers, and non-designers. ## Starting with Simple Building Blocks: Gusto - Gusto’s experience addresses the common challenge of deciding where to begin. - The team used basic, reusable elements as the foundation for its component library. - The approach demonstrates that a design system does not need to be comprehensive at launch; it can develop incrementally. ## Creating Marketing and Communications Assets: Square - Square’s marketing team built an internal system for communications design. - The system included reusable assets such as: - Color palettes - Logo sets - Other brand and communication resources - Figma helped the team organize and share these assets across its internal workflows. ## Empowering Non-Designers: Virta Health - Virta Health documented the process from auditing existing components to producing final mockups. - Designers used reusable components that allowed non-designers to assemble designs through drag-and-drop workflows. - The design system improved communication between designers, engineers, and product managers by giving teams a shared visual language for discussing ideas. ## Using Nested Components: OpenText - OpenText explored nested components to create more flexible and powerful UI patterns. - Components could be combined into more complex structures, including controls with multiple button states. - This approach supports scalable systems in which changes to foundational components can flow through larger interface patterns. ## Applying Atomic Design Principles: SetProduct.com - SetProduct.com used atomic design as the organizing framework for its system. - The hierarchy progresses from small elements to complete interfaces: - Words and icons - Buttons and other phrases - Cards and other sentences - Full screens or chapters - Figma components support both local editing and broader, reusable design-system updates. Figma’s examples show that teams should begin with the problems and workflows specific to their organization, then gradually build a reusable system around them. Features such as constraints, nested components, and Team Library can support systems ranging from simple asset collections to highly structured component architectures.

team-libraryfigmadesign-systemscomponent-library+2

figmaNov 28, 2017

Advanced Project Permissions for design systems | Figma Blog (opens in new tab)

Figma introduced Advanced Project Permissions to give design-system teams finer control over who can edit or access projects. Available to paying Professional Teams, the feature adds view-only and invite-only options alongside the existing team-wide editing model. It is designed to protect systems from accidental changes while allowing maintainers to develop and test privately. ## Why Design Systems Need More Control - Design-system maintainers often need to work privately before releasing components to the broader organization. - Once published, the system should be protected from accidental edits by designers who primarily consume its components. - Figma’s Team Library enabled cross-file and cross-team component sharing, but additional project-level privacy and access controls were needed. ## New Project Permission Options - Professional Team editors can choose one of three access settings when creating a project: - Everyone on the team can edit - Everyone on the team can view - Invite-only access for selected collaborators - Existing projects can be updated by opening the **Share** dialog and changing their permissions. - The feature creates a boundary between design-system “maintainers” and “viewers.” ## Effects on Team Workflows - View-only permissions reduce the risk of well-intentioned team members modifying carefully maintained components. - Invite-only projects allow maintainers to experiment and refine a system before wider deployment. - Larger teams may give individual designers fewer opportunities to directly change the system, depending on the balance between maintainers and viewers. - Figma was exploring pull-request-like workflows so designers could suggest changes while maintainers retained ownership. Overall, the permissions provide a practical foundation for managing robust design systems: restrict editing to maintainers, use view-only access for consumers, and consider structured contribution workflows for future improvements.

team-libraryfigmadesign-systemscollaboration+2