figmaOct 7, 2020

Power up your design system with Figma’s agency partners | Figma Blog (opens in new tab)

Figma announced partnerships with leading digital and design agencies to help organizations build, migrate, and scale design systems. The post argues that effective design systems connect design and code, creating consistency, efficiency, and a shared source of truth. Figma’s agency partners provide both implementation support and strategic guidance for improving collaboration, workflows, and brand expression. ## Why Design Systems Matter - Modern design systems are more than pattern libraries or sticker sheets. - They create a shared language between design and development. - They support creative exploration while adding the structure and rigor needed for implementation. - A well-managed system helps teams work faster, maintain consistency, and establish a single source of truth. - Designing and implementing such a system can be challenging, especially when migrating tools or scaling across teams. ## How Agency Partners Help ### Setting Up a Design System - Agencies can help organizations migrate their existing design-tool stack to Figma. - For existing Figma users, they provide recommendations for organizing systems around specific brand and team needs. - Their support covers architecture, implementation, and initial setup. ### Improving Design and Development Processes - Building a system is only the beginning; teams must also determine how it will be used and maintained. - Partners can define guiding principles, recommend operating processes, and improve collaboration between designers and developers. - Their goal is to reduce inefficiencies caused by gaps between tools, teams, and workflows. ### Defining and Scaling a Brand - Design systems translate a brand into practical design decisions and reusable components. - Agency partners offer strategic brand guidance in addition to technical and process expertise. - This helps organizations maintain a consistent identity as their products, teams, and brands grow. ## Figma’s Agency Partner Network - Figma initially partnered with eight agencies: - BASIC® - frog - HUGE - Idean - One North - R/GA - Instrument - Work & Co - These agencies serve organizations across industries and company sizes. - Examples include BASIC®’s work with brands such as Google, Airbnb, Patagonia, Apple, Beats by Dre, and Herman Miller. - Partner testimonials emphasize faster collaboration, greater transparency, improved organization, and stronger client relationships through Figma. Figma’s recommendation is to use experienced service partners when a team needs help migrating to Figma, structuring or scaling a design system, improving design-to-development workflows, or translating a brand consistently across products.

design-workflowfigmadesign-systemsdesign-tools+1

figmaMay 2, 2019

5 ways to level up your prototyping workflow in Figma (opens in new tab)

Figma prototyping can be made faster and more realistic by reusing connected components, managing scrolling content centrally, and simulating natural interaction timing. The post presents five techniques that reduce repetitive setup while improving testing, presentation, and collaboration workflows. ## Master Components for Repeated Connections - Turn persistent navigation, such as tab bars or hamburger menus, into master components. - Link each item in the master component once; new instances inherit those prototype connections. - For components from a team library, place the library instance inside a new local master component. - Deep-select nested layers to create links without detaching the instance. ## Components for Scrolling Content - Convert long scrolling content into a component to preview how different device viewports initially crop it. - Set constraints for internal elements and enable **Clip content**. - Configure the desired scrolling direction through **Overflow Behavior** in prototype mode. - Place and resize component instances within designs to compare viewport-specific views while managing content centrally. ## Timed Delays and Overlays - Use the **After Delay** trigger to make transitions feel less abrupt. - Combine timed delays with overlays to simulate loading states or intermediate feedback. - For example, a form can show a submission state, brief loading sequence, and success message before navigating to a confirmation page. ## Table of Contents for Multiple Flows - Create a table-of-contents frame as the prototype’s starting screen. - Link each option to a different user flow, allowing one shared URL to present multiple design alternatives. - All flows must be located on the same Figma page. ## Observation Mode - Use Observation Mode to follow a collaborator’s view in the editor or prototype. - It supports remote user testing by showing where users are and how they interact with the design. - It is also useful for helping meeting participants follow along during presentations. These techniques make Figma prototypes easier to build, reuse, test, and present. Centralizing repeated behavior in components and using realistic timing and navigation can significantly streamline the workflow.

design-workflowfigmaprototypingui-ux-design+3