techlist.io
KREN

responsive-design

27 posts

figma

GPT-5.6 is Now Available in Figma Make | Figma Blog (opens in new tab)

GPT-5.6 is now available in Figma Make, where Figma says it improves both the speed and quality of AI-generated prototypes. The model is designed to produce stronger first passes, preserve existing designs more faithfully, and recover from errors without stopping. Figma’s examples suggest it can move teams from prompts or static designs to functional, responsive prototypes with less iteration. ## Faster exploration and error recovery - GPT-5.6 can turn complex prompts into working prototypes quickly, helping teams explore multiple ideas in one session. - In Figma’s stock-tracking app evaluation, it created: - An interactive dashboard - Sample prices and performance data - Keyboard shortcuts and search - A dark, gothic visual style - The model is described as more token-efficient, helping users make better use of Figma Make credits. - When builds encounter errors, GPT-5.6 can investigate and self-heal instead of stopping. Figma reports that it independently diagnosed and fixed a blank build. ## Faithful design-to-code conversion - GPT-5.6 can build prototypes from existing design specifications or Figma Design files. - In a nature sound player test, it preserved: - Layout and visual hierarchy - Spacing, proportions, and styling - A multi-track timeline and sound library - It also implemented functional interactions, including: - Play, pause, and skip controls - Working audio playback - Multiple playable tracks - Audio-responsive visual effects ## Higher-quality first passes - Figma says GPT-5.6 produces polished initial prototypes with functional interactions and responsive layouts. - A bookshelf e-commerce example included: - Product descriptions, measurements, and care information - Populated information dropdowns - An interactive product photo library - A clickable navigation menu - The prototype adapted reliably across different screen sizes without additional prompting. - Stronger first passes allow teams to spend more time refining ideas collaboratively rather than repairing basic implementation problems. GPT-5.6 is available through Figma Make’s model selector. Users can select it directly in Make and consult Figma’s help center for guidance on choosing and using AI models.

responsive-designprototypingfigma-makedesign-to-code+3
discord

Making Discord on Desktop Look Just Right: Display Settings to Ease the Eyes (opens in new tab)

Discord’s desktop app offers several display and accessibility settings to make conversations more comfortable and easier to read. Users can control when media and spoilers appear, reduce interface color intensity, simplify names and role colors, manage HDR brightness, and adjust UI density and text size. These options let people tailor Discord to their visual preferences without changing how content appears to others. ## Chat Options for Customizing Conversations - In **User Settings > Display > Messages**, users can control whether images and videos appear automatically. - Media can be shown or manually opened when: - Posted as direct links - Uploaded directly to Discord - **Show embeds and link previews** can be disabled to prevent automatic previews for web links. - Alt text can be displayed by default when image descriptions are provided. - Spoiler content can be configured to appear: - **On click** - **Always** - **On servers I moderate** - Links can always be underlined, improving visibility—especially when interface saturation is reduced. ## Toning Down Discord’s Colors - The **Saturation** setting reduces the intensity of interface colors, including buttons, status indicators, and links. - Saturation can also be applied to custom colors such as server role colors. - User-created media—including avatars, custom emoji, photos, and videos—is not affected. - Role colors can be displayed as a dot beside a user’s name instead of coloring the entire name. ## Reducing Brightness and Visual Distractions - HDR-capable displays may show extremely bright images and videos. - In **Accessibility > High Dynamic Range**, users can switch from **Full Dynamic Range** to **Standard Range** to reduce HDR intensity. - Nitro display-name styling can be disabled through **Accessibility > Text Readability > Display Name Styles**. - Disabling these styles restores standard fonts and colors without notifying other users. ## Adjusting UI Density and Text Size - Discord also provides settings to make the interface more or less dense, depending on whether users prefer more information on screen or greater spacing. - The article introduces additional controls for changing the size and spacing of interface content, though the provided text ends before describing them in detail. Overall, Discord’s display settings can be combined to reduce visual overload: hide media until needed, lower saturation, soften HDR content, simplify names, and adjust spacing or text size for a more comfortable setup.

responsive-designdiscordaccessibilitydesktop-app+2
figma

Why You Should Care About Design Context | Figma Blog (opens in new tab)

Design files are becoming an important input for agentic coding tools, so their organization and clarity directly affect the quality of generated code. Figma argues that designers should treat handoff as carefully as the design itself, providing developers and AI agents with explicit links between visual decisions and implementation details. The central recommendation is to build strong design-system foundations and structure files so they are easy for both humans and tools to interpret. ## Design systems as implementation foundations - Components and shared variables for color, spacing, sizing, and typography promote consistency and reuse. - These foundations become more valuable when connected directly to the codebase: - **Code Connect** links Figma components to their coded equivalents and displays accurate snippets in Dev Mode. - **Variable code syntax** defines how design variables should be represented across web and native platforms. - With the Dev Mode MCP server, AI agents can retrieve this design-system context directly instead of searching through an entire codebase. - A component such as a card can therefore be generated with the correct variants, properties, spacing, colors, typography, and states. - Embedding this information in shared Figma libraries allows the benefits to scale across teams and projects. ## Structuring files for developer consumption - Clear page hierarchies, frame names, layer names, and layouts make files easier to work with during design and easier for developers and MCP-powered tools to understand. - Create frames for important responsive breakpoints and major visual changes, such as a navigation bar becoming a menu icon. - Use auto layout to express how designs should respond to viewport widths, breakpoints, and changing text. - Intentional structure turns a design file into useful implementation context rather than merely a visual reference. Designers can improve development speed and AI-generated code by treating Figma files as structured technical documentation. Establish reusable, code-connected foundations first, then organize layouts and responsive states explicitly so developers and coding agents can reliably translate designs into production.

responsive-designfigmadesign-systemsai-agent+3
figma

8 Tips for Designers Building Branded Templates in Figma Buzz | Figma Blog (opens in new tab)

Figma Buzz templates should be designed as flexible systems, not just finished compositions. The post argues that brand designers need to anticipate marketers’ editing needs by building in guardrails for content, spacing, scaling, and branding. Thoughtful template structure helps teams create accurate, on-brand assets at scale without requiring constant designer review. ## Design in Figma Design First - Begin by creating the asset in a Figma Design frame, where designers can use components and Figma Draw’s vector tools. - Once the design is ready, copy it into Figma Buzz for final adjustments and publication as a template. - This workflow combines expressive design capabilities with Buzz’s collaborative marketing features. ## Use Auto Layout for Flexible Templates - Auto layout keeps elements aligned and maintains consistent spacing as content changes. - It is especially useful for buttons, text boxes, and image containers. - Longer headlines or other variable content can expand without pushing surrounding elements out of alignment. - Auto layout provides the responsive foundation needed for templates used across different assets and formats. ## Separate Text Layers by Input - Create a separate text layer for every unique piece of content, particularly when inputs use different fonts, sizes, or styles. - Modular text layers are essential for Bulk create, which maps CSV or XLSX fields to individual design layers. - Combining multiple inputs or styles in one layer can cause formatting problems and make bulk updates difficult. - Separating layers keeps formatting consistent across campaigns and generated assets. ## Lock Image and Vector Aspect Ratios - Lock the aspect ratio of images and vector graphics using the square icon beside the width and height controls. - Templates often need to be adapted from one format—such as a 1080 × 1080 social post—to others, including Instagram Stories or web banners. - Aspect-ratio locking prevents logos, portraits, illustrations, and other graphics from becoming stretched or compressed. - This setting acts as a simple safeguard against accidental distortion during editing. ## Name Layers Clearly - Rename layers so teammates can understand what each editable field controls in Buzz’s Edit Content panel. - Text layers are initially named after their visible canvas text; use Command + R or edit the layer name directly to replace it. - Figma AI can help rename large numbers of layers. - Clear labels make template editing more intuitive, much like completing a form, especially when many layers are available for customization.

responsive-designauto-layoutfigma-designfigma-ai+3
figma

A Tale of Two Parameter Architectures—and How We Unified Them | Figma Blog (opens in new tab)

Figma’s component properties and variables both let users define a value once and apply it across a design, but they were originally built on separate architectures. This led to conflicting bindings, inconsistent rendering, and duplicated engineering effort. Figma unified the systems into one parameter architecture, improving consistency and creating a scalable foundation for future products. ## Two Different Parameter Systems - **Component properties**, introduced in 2022, addressed the gap between design and code. - They enabled **scoped parametrization**: parameters could be defined by a component and applied only to its internal layers. - This gave design-system authors a clear customization contract and mirrored how component properties work in code. - The model supported features such as: - Boolean properties - Text and instance customization - Component variants and states - Component properties helped power products including Figma Sites, Figma Make, and Code Connect. ## Variables and Global Parametrization - Variables provided a broader, more globally reusable parameter system. - They supported values such as colors and could define different values for contextual modes, such as light and dark themes. - Unlike component properties, variables were designed to be reused across many unrelated layers and components. - This made variables well suited to design tokens and system-wide configuration. ## Problems Caused by Separate Architectures - The two systems evolved independently despite having similar goals. - A variable and a component property could bind to the same layer property, producing inconsistent results in the editor. - Users had to learn different behaviors and rules for concepts that appeared similar. - Maintaining two implementations increased engineering complexity and slowed feature development. - Extending parametrization to other Figma products risked reproducing the same technical limitations. ## Unifying the Architecture - Figma built a single underlying parameter architecture to support both component properties and variables. - The unified system preserves the distinction between: - Parameters scoped to a component - Parameters reused globally across a project - It eliminates competing bindings and makes parameter behavior more predictable. - The change also improves developer velocity by allowing new capabilities to build on shared infrastructure. ## Broader Impact - Designers receive a more consistent mental model for configuring components and design systems. - Rendering behavior is more reliable when multiple parameter types interact. - Figma can extend parametrization across existing and future products without maintaining separate technical foundations. - The unified architecture supports Figma’s broader goal of connecting design-system behavior with code and interactive products. Figma’s recommendation in practice is to treat component properties and variables as complementary uses of one parameter model: use scoped properties for component contracts and variables for reusable, contextual design tokens.

responsive-designfigmadesign-systemscode-generation+3
figma

Config 2025 Launches Deepen Figma's Design Capabilities As Its Platform Expands | Figma Blog (opens in new tab)

Figma’s Config 2025 announcements expand the platform from collaborative design into a broader product-development environment. New tools combine AI, code, visual design, websites, and marketing workflows, enabling teams to move from ideas to production within Figma. The company’s conclusion is that design and AI can help more people contribute throughout the development lifecycle. ## New Products - **Figma Make** turns written prompts or existing designs into working prototypes and applications. - **Figma Sites** lets designers build and publish dynamic websites with customizable interactions, code, and AI. - **Figma Draw** adds advanced vector editing and illustration tools to Figma Design. - **Figma Buzz** helps brand and marketing teams produce visual assets at scale while preserving brand consistency, with integrated AI features. ## Expanded AI Capabilities - New image-generation and image-editing tools support faster visual exploration. - Contextual auto-suggestions provide workflow guidance and help users work more efficiently. - FigJam receives additional AI features for brainstorming and collaboration. - Together with Figma Make, these tools are intended to make ideas easier to visualize and turn into functional outputs. ## Responsive Design and Developer Handoff - **Grid** introduces responsive layouts that adapt across screen sizes. - Grid can generate CSS code in Dev Mode, improving communication between designers and developers. - The feature supports Figma’s broader effort to connect design work more directly with implementation. ## Figma’s Expanding Platform - The new offerings join Figma Design, FigJam, Dev Mode, and Figma Slides. - About two-thirds of monthly active users in Q4 2024 worked outside traditional design roles, including roughly 30% who identified as developers. - The announcements reflect Figma’s shift from a design tool toward an integrated platform for ideation, design, development, publishing, and marketing. ## Global Growth - Figma announced full localization for Brazil, including Portuguese translation, culturally adapted interfaces, and dedicated language support. - Brazilian support joins existing Japanese, Spanish, and Korean localization. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024, while more than half of its 2024 revenue came from non-U.S. markets. - The company now employs more than 1,600 people worldwide. The new products and features will roll out over the following weeks. Overall, Figma is positioning itself as a unified environment where designers, developers, marketers, and other collaborators can take products from early concepts through launch.

responsive-designfigmaprototypinggen-ai+4
figma

Introducing Figma Make: A New Way to Test, Edit, and Prompt Designs | Figma Blog (opens in new tab)

Figma Make is Figma’s new prompt-to-app tool for turning designs into interactive, testable experiences. It allows designers and product teams to start with existing Figma frames, add behavior through natural-language prompts, and iterate collaboratively without rebuilding everything in code. Figma’s goal is to make exploration faster while preserving design intent, structure, and craft. ## Start with Existing Designs - Users can copy frames from Figma Design into Figma Make, including their structure and metadata. - Natural-language prompts transform static designs into interactive prototypes. - The tool is designed to support the entire design process, from early sketches to developed prototypes. - Figma Make currently uses Claude 3.7 Sonnet, with additional models planned. ## Turn Static Designs into Interactive Experiences - Add animations, interactive buttons, and real-time feedback without complex coding. - Test features using dynamic data, including file uploads and data visualizations. - Adapt designs across platforms and form factors, such as converting a mobile app design into a desktop version. - Future capabilities are expected to include third-party database integrations and design-system support. ## Real-Time Collaborative Exploration - Figma Make is built into the Figma platform and supports multiplayer collaboration. - Designers, product managers, and other team members can add features, test interactions, and incorporate data in the same file. - By reducing the need for coding expertise, it enables broader participation in product exploration. ## Point-and-Prompt Editing - Users can select a specific element and describe the desired behavior, such as animating a button or responding to scrolling. - This approach connects design intent directly to functional implementation. - Figma Make preserves component hierarchies and design-system structure while adding interactive behavior. ## From Canvas to Code and Publication - Figma Make connects with existing Figma workflows, including Figma Design and Figma Sites. - Teams can move from concept to prototype to published site without switching tools or recreating work. - The workflow is intended to provide a continuous path from visual design through implementation. Figma Make is positioned as a complement to—not a replacement for—traditional design work. Its practical value is in helping teams validate ideas sooner, explore more alternatives, and communicate functionality while retaining the original design’s structure and intent.

responsive-designdesign-systemsgen-aireal-time-collaboration+3
discord

Discord Update: November 18, 2024 Changelog (opens in new tab)

Discord’s November 2024 update introduces a major cosmetic collaboration with the series *Arcane* alongside several practical tools designed to simplify content sharing and profile management. These changes emphasize a more integrated media experience, allowing users to interact with external content and their own gaming data more fluidly within the app. **Arcane Collaboration and Shop Items** * A limited-edition *Arcane* collection has been added to the Shop to mark the show's final season. * New Avatar Decorations and Profile Effects feature characters such as Jinx, Vi, and Ekko, as well as themed weapons and technology. * The collection is a temporary release available for users to customize their visual presence across servers. **Streamlined Sharing and Media Integration** * A native "Forward" button has been introduced, allowing users to share messages directly to other conversations without needing to take and store manual screenshots. * TikTok embeds can now be played directly within the desktop client, eliminating the need to open an external browser or application. * The emoji reaction picker now suggests a user’s top three most-used emojis to facilitate faster communication. **Profile Features and Social Activities** * Desktop profiles now display a list of recently played games to friends and community members. * New privacy controls allow users to manually clear specific games from their play history if they do not want them visible. * "Quiz Planet" has been added to the Activity Directory, providing a new trivia-based interactive experience for users in voice channels. **Mobile Performance and Multitasking** * The mobile application has received optimizations for fluid resizing, specifically targeting users who utilize split-screen or multitasking modes on phones and tablets. * General performance patches have been implemented to improve the stability of the interface when switching between Discord and other resource-heavy apps. To maintain privacy, users should review their new gaming history section on desktop and clear any entries they prefer not to share. Additionally, users interested in the *Arcane* cosmetics should visit the Shop soon, as the collection is designated as a final celebration for the series.

responsive-designdiscorduxmobile-app-development+4
figma

Figma 2024: We shipped it, you shaped it | Figma Blog (opens in new tab)

Figma’s 2024 product work was driven by community feedback, spanning 180 releases, UI3, AI tools, performance improvements, and new workflows for moving from concept to delivery. The company’s central conclusion is that meaningful progress comes from reducing friction while preserving designers’ existing habits. Community input shaped both major launches and small refinements across Figma, FigJam, and Figma Slides. ## UI3: Putting the Work Front and Center - Figma redesigned its interface for the first time substantially since 2019, updating typography, layout, colors, icons, labeling, and panel behavior. - Early UI3 testing revealed that floating panels disrupted users’ speed and daily workflows. - Based on feedback, panels became docked and resizable, while users could hide panels to maximize canvas space. - The eyedropper was upgraded to reuse styles and variables, switch between color formats, and create new styles or variables. ## Improving Core Design Workflows - Multi-edit simplified making changes across multiple designs. - Typography improvements added support for italic, bold, underline, underline styling, mixed paragraph spacing, and better local-font detection. - File organization improved through pinning, enhanced search filters, page dividers, and split tabs. - Drafts, content transfers, and file-moving workflows became easier for teams working across organizations. - “Suggest Auto Layout” helped users make designs more responsive. - Figma also introduced playful retro cursors inspired by DOS, Y2K, skeuomorphism, and Windows Vista. ## Performance, Collaboration, and Administration - Dynamic page loading made large design files more manageable. - Memory optimization and a revamped memory-management system improved performance in large files. - Multiplayer collaboration became smoother and more reliable. - Admin tools received new sidebar navigation and a dedicated content-management tab. - Infrastructure improvements included EU-localized file hosting, better support for large asset libraries, and stronger Enterprise security controls. ## AI Features That Reduce Friction - Visual search lets users find designs by uploading an image or selecting part of the canvas. - Asset search understands context instead of relying only on exact component names. - AI-assisted layer renaming improves file organization. - Replace Text Content generates realistic copy, while Rewrite, Translate, and Shorten help revise text. - Make an Image enables image creation and editing directly on the canvas, and Remove Background isolates subjects without requiring another tool. - FigJam’s AI mindmaps became a popular way to explore ideas and visualize connections. - Figma AI can turn a FigJam board into a Figma Slides outline and generate presenter notes. - First Draft, formerly Make Designs, was redesigned to help users move from an idea to an initial design. It was in limited beta, with planned support for custom libraries and deeper integration with existing design systems. ## Moving from Work in Progress to Shipping - Figma continued expanding tools intended to connect design work with development and presentation. - Dev Mode and Code Connect aimed to reduce developer context switching by translating design components into code. - Figma Slides supported creating high-fidelity presentations, extending Figma’s workflow beyond interface design. - The broader goal was to help teams move more smoothly from early concepts to implementation and delivery. ## Community-Led Product Development - Figma reported 10,000 Config attendees and more than 220 Friends of Figma groups worldwide. - Product decisions were shaped through beta testing, user conversations, and feedback from individual designers and organizations. - The company emphasized thoughtful AI development: AI should help express ideas and remove tedious work without replacing designers’ judgment. - Community members influenced both flagship features such as UI3 and First Draft and smaller quality-of-life improvements. Figma’s 2024 updates show a strategy focused on practical acceleration rather than novelty alone: improve the fundamentals, apply AI where it removes real friction, and build stronger bridges between design, development, and presentation. For teams, the most valuable improvements are likely the cumulative ones—better organization, faster search, stronger performance, and workflows shaped directly by how people already work.

responsive-designfigmaaidesign-systems+4
figma

Behind the Feature: Inline Device Frames | Figma Blog (opens in new tab)

Inline device frames bring interactive phone, tablet, and watch mockups directly into the Figma editor, making prototypes feel closer to real-world use without switching to presentation view. The feature evolved from Figma’s inline preview and was designed to make devices tangible, movable, and resizable. Its development balanced realistic device representation with intuitive interactions and collaborative input from Figma’s community and cross-functional teams. ## Prototyping in the Editor - Figma introduced inline device frames as part of broader prototyping improvements. - Designers can preview their work within representations of mobile, tablet, and watch devices. - The goal is to help teams identify usability gaps and opportunities earlier by experiencing how designs actually behave. - Other announced prototyping updates included: - Copying and pasting interaction “noodles” - Faster flow deletion - Importing elements with local variables into new files - A 22% reduction in loading-spinner time in key use cases ## A Collaborative Foundation - Figma previously offered device presets in presentation view, but the team wanted to make them available beside designs in the editor. - The intended experience was for devices to feel tangible: - Users should be able to grab, move, and resize them. - Frames needed to be dynamic and responsive rather than static images. - Development combined community research with feedback from engineering, design, product management, and marketing teams. - Three guiding principles shaped the feature: - Seamless integration into the design process - Realistic representation of diverse devices - Intuitive interactions through clearly defined hit targets ## Representing Different Devices - The inline preview’s space constraints led the team to prioritize phones, tablets, and watches rather than larger personal-computer interfaces. - Supporting many device shapes and sizes created significant design and engineering challenges. - The team had to account for details such as smartphone notches, which house front-facing cameras and sensors. - Watch frames raised additional questions about where users should be able to interact and resize the device. Inline device frames are intended to make prototyping more immediate and realistic while preserving the flexibility of the Figma editor. Designers can use them to evaluate designs in context without leaving their working file.

responsive-designfigmaprototypinguser-interface-design+2
figma

All Your Questions About Variables Answered (and a Few You Didn’t Even Know You Had) | Figma Blog (opens in new tab)

Figma’s latest variable updates expand design customization while bringing design systems closer to code. Variables can now control more visual properties and respond to different modes, making responsive, platform-specific designs easier to manage. The post presents variables as more flexible than traditional tokens and highlights their potential for both practical systems work and highly creative prototypes. ## Variables Enable Broader Customization - Designers are using variables for applications ranging from production design systems to interactive, game-like creations. - Unlike regular tokens, variables are open-ended and support more flexible customization. - Figma points to Headspace as an example of using variables to improve design-system efficiency and collaboration with developers. - Beginners can start with Figma’s dedicated variables guide and community file. ## New Properties That Support Responsive Design - **Reactive effects:** Variables can control blur sizes, drop-shadow colors, and offset distances, allowing effects to change by mode. - **Dynamic stroke weights:** Designs can use different stroke weights for platforms such as desktop and mobile. - **Layer opacity:** Opacity fields can be bound to variables for more nuanced visual control. - **Adaptable layout grids:** Grid settings can switch between modes, supporting pixel-perfect desktop and mobile layouts. - **Individual corner radii:** Each corner radius can be controlled independently through variables. - **Nested instance variant binding:** Variables can be applied to component instances nested within other components, enabling more complex component structures. ## Connecting Design and Code - The updates are intended to align design variables more closely with how values are managed in code. - Mode-based values make it easier to represent platform, theme, or responsive differences within a single design system. - Figma indicates that typography is an area planned for further variable support. Overall, the post recommends adopting variables as a flexible foundation for scalable design systems, responsive interfaces, and richer prototypes—especially when designers and developers need a shared source of truth.

responsive-designfigmadesign-systemsdesign-tokens+2
figma

Config 2024: Designing a Better Conference | Figma Blog (opens in new tab)

Config 2024 is presented as a community-centered conference shaped by lessons from Figma’s previous events. Scheduled for June 26–27 in San Francisco, it aims to improve both the learning program and attendee experience through reserved breakout seating, more developer content, expanded networking, and greater accessibility. Figma’s goal is to make Config a broader, more inclusive gathering for everyone involved in building products. ## A Community-Driven Conference - Config has grown from its first 1,000-person conference in 2020 into a larger global community. - Figma describes the event as more than a product conference: it is intended to support learning, idea-sharing, and celebration of craft. - The 2024 program is expected to include more than 75 speakers covering design systems, AI, development, and related topics. ## Reserved Seating for Breakout Talks - Attendees can reserve places in breakout sessions instead of relying on available seating. - Registered attendees are guaranteed a seat if they arrive on time. - Very early bird ticket holders receive access to session registration 24 hours before other attendees. ## More Content for Developers - Figma is expanding programming specifically for developers. - The developer track reflects the company’s aim to serve everyone who contributes to building digital products. - Additional details about this programming were still forthcoming when the announcement was published. ## Improving In-Person Connections - The schedule will include more downtime for networking, informal conversations, and community interaction. - A larger event footprint is intended to reduce lines and crowding. - Figma expects the changes to create a smoother overall attendee experience. ## Supporting a Global Audience - Virtual attendees will receive captions in English, French, German, Japanese, Korean, and Spanish. - In-person attendees will have access to simultaneous interpretation and translation. - Figma plans to continue adding languages to future events. ## Expanding the Leadership Collective - The executive-focused Leadership Collective will return after positive feedback in 2023. - The track will include more content, a new executive briefing center, and additional networking opportunities. - Participation is invite-only, with applications available during registration. ## Registration and Participation - Very early bird tickets were available through Config’s registration site. - Scholarships were offered for qualifying attendees. - Figma invited the community to submit ideas and suggestions by email or social media. - The call for speakers was open, with applications due by December 31, 2023. Overall, Figma’s approach is to combine product announcements and educational sessions with better logistics, accessibility, and community interaction. The event is designed for designers, developers, executives, and other people involved in building products.

responsive-designfigmaaidesign-systems+1
figma

Storyboarding the Future of Design and Creativity | Figma Blog (opens in new tab)

The post imagines how a Figma–Adobe partnership could transform design workflows by connecting products, assets, collaboration, AI, and storytelling. It envisions a future where ideas move instantly from user research to interactive storyboards, 3D models, prototypes, and marketing videos. The proposed merger was ultimately abandoned in December 2023 after the companies concluded regulatory approval was unlikely. ## From User Journeys to Storyboards - User journeys could be converted from basic sticky-note diagrams into visual storyboards. - More engaging formats would make it easier for teams to understand, discuss, and improve product experiences. ## Connected Assets Across Tools - Assets created in Adobe Substance 3D could be placed into Figma mockups. - Linked assets would remain synchronized, reducing manual updates across products. - Shared design systems could connect colors, fonts, and other design tokens between Adobe and Figma. - Adobe Fonts could become available directly within Figma. ## Multiplayer Collaboration in 3D - Adobe’s 3D tools could gain Figma-style multiplayer collaboration. - Multiple designers could work simultaneously on different aspects of a model, such as geometry, lighting, and textures. - Real-time collaboration could make learning complex 3D workflows easier. ## Generative AI in Product Design - Adobe Firefly could integrate directly into Figma workflows. - Designers could generate backgrounds that match an interface’s visual style. - Generative Fill could extend images to fit responsive layouts without leaving the design process. ## Prototypes Connected to Marketing - Working app prototypes could be inserted directly into launch videos. - Updates made to the product could automatically appear in the video, helping marketing teams keep pace with last-minute design changes. The post presents these integrations as a vision for a more connected and collaborative creative ecosystem, though the planned Figma–Adobe merger did not proceed.

responsive-designfigmadesign-systemsprototyping+4
figma

Behind the scenes of creating the official Figma kit for Tailwind UI | Figma Blog (opens in new tab)

Tailwind Labs created an official Figma kit to meet strong customer demand for Tailwind UI designs. Building it required translating more than 400 responsive code components into over 1,400 Figma components and 10,000 elements, with the final code serving as the pixel-perfect reference. The project showed that a production design kit needs rigorous structure, naming, responsive modeling, and reusable variants—not just visual accuracy. ## Building a Design File as a Product - Unlike exploratory product files, a commercial design kit is itself the final deliverable. - Every decision affects usability, including: - Layer names - Component structure - Page organization - Variant behavior - The team used the finished HTML and Tailwind CSS components as the standard the Figma files needed to match. ## Consistent Layer Naming - Consistent names allow Figma overrides to persist when users swap component instances or variants. - For example, a button’s text layer was always named “Text,” allowing customized text to carry over when changing button sizes. - This becomes especially valuable in complex components containing icons, headings, paragraphs, and links. ## Mirroring HTML Structure in Figma - Auto Layout, layout grids, and constraints let Figma layers approximate HTML structure and browser layout behavior. - Matching design and code architecture helps designers and developers share an understanding of what layouts can support. - It also exposes recurring implementation patterns, such as responsive padding and centered max-width containers, which developers can turn into reusable layout utilities. ## Using Variants to Simplify Components - Instead of maintaining dozens of separate components, the team combined options into configurable variants. - A single Badge component could cover type, size, theme, and optional secondary elements. - Variant properties were named consistently with code component properties, using terms such as: - Type - Size - Theme - Position - Breakpoint - State - Variants made components more discoverable and reduced duplication. - The completed kit contained 1,430 components averaging seven variants each; without variants, it would have exceeded 10,000 components. ## Scale and Quality Control - Over several months, the team built and rebuilt more than 1,400 components and 10,000 distinct elements. - The project emphasized detailed auditing and pixel-level consistency, although the provided article excerpt ends before describing that process. The main recommendation is to treat a shared Figma kit like a carefully engineered product: align it closely with the codebase, establish naming and structural conventions early, and use variants to keep a large responsive system manageable.

responsive-designfigmadesign-systemscss+3
figma

Behind the feature: the making of the new Auto Layout | Figma Blog (opens in new tab)

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply. ## The Need for Automatic Resizing - Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed. - This repetitive work made responsive design systems difficult to build and maintain. - Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018. - During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real. ## Designing a Thoughtful Subset of Flexbox - The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code. - They intentionally avoided reproducing all of flexbox’s complexity. - Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use. - Core capabilities included: - Enabling vertical or horizontal layout on a frame. - Setting spacing between items. - Automatically sizing frames to hug their contents along the main axis. - Allowing fixed or content-based sizing on the counter axis. - Giving individual components independent alignment within their container. ## Prototyping and Team Alignment - The designer, Marcin, built an early prototype entirely in HTML. - The prototype helped the team experience the feature early and resolve interaction details before implementation. - It informed decisions about frame-handle decoration, dragging behavior, and visual outlines. - This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability. Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.

responsive-designfigmadesign-systemscss+3