figma-sites

5 posts

figma

How We Shaped the Visual Identity for Config 2025 | Figma Blog (opens in new tab)

Figma’s Brand Studio spent 10 months developing Config 2025’s visual identity for a large, global audience and a wide range of physical and digital formats. The team centered the system on expressive animated glyphs made from basic shapes, creating an identity that could adapt as the event evolved. By combining conceptual flexibility, component-based design, motion, and Figma’s refreshed brand language, they made Config feel tactile, dynamic, and distinctly connected to the spirit of making. ## Building a Flexible Visual Concept - The creative process began with broad exploration rather than fixed moodboards or a narrowly defined style. - The team focused on a concept that could support varied execution: - Social media content - Main-stage screens - Physical installations - Attendee badges and merchandise - Spatial experiences - Creative Director Damien Correll emphasized constraining the concept without constraining execution, allowing the identity to remain adaptable. - Because event plans and requirements change, the visual system needed “wiggle room” and the ability to evolve over time. ## Glyphs as a Language of Making - The visual identity revolved around animated glyphs built from simple shapes, or primitives. - Each glyph combined inner and outer elements that interacted with one another. - Their shifting forms represented: - Dynamism - Change - Adaptability - The unpredictable nature of creative work - Motion allowed a single glyph to trigger ripples and transform an entire composition. - The concept aligned with Config’s product announcements, including Figma Draw and Figma Sites, which focused on helping users express themselves in new ways. ## A Component-Based Toolkit - The team created a glyph library directly in Figma. - Glyphs were built as reusable components, making it easy for partners and vendors to: - Swap variations - Customize compositions - Adapt assets to different surfaces - This approach helped maintain consistency while supporting many applications and production constraints. ## Extending Figma’s Refreshed Brand - Config’s identity built on Figma’s recently updated visual language. - The team adapted the refreshed: - Color palette - Typeface, Figma Sans - Playful primitive-based design approach - This connection allowed Config to feel like an extension of Figma’s broader brand while still having its own expressive event personality. Figma’s approach demonstrates how a strong event identity can combine a clear conceptual foundation with modular, adaptable assets. Designing the system as reusable components—and allowing motion and variation to carry meaning—enabled Config 2025 to remain cohesive across thousands of touchpoints without becoming rigid.

figma

Make your site interactive with code layers | Figma Blog (opens in new tab)

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support. ## Customizing Existing Designs - Code layers extend Figma Sites’ built-in responsive elements and interactions. - Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel. - AI chat can then generate or modify behaviors such as: - Spinning or bouncing animations - Animated counters and text effects - Loan calculators and price estimators - Hover effects, ripples, and color changes - Code layers can be duplicated with **Command D** to create and compare multiple interaction variations. - Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets. ## Creating Code Layers from Scratch - Designers can use the Make tool or press **E** to draw a standalone code layer on a blank canvas. - A modal opens for generating the layer through AI prompts or writing code directly. - Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points. - These components can be used as-is or customized to match an existing design. ## Reusable and Extensible Components - Code layers support customizable properties, including strings, numbers, and references to other components. - AI can generate these properties automatically, or users can request specific controls. - A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems. - Designers can import npm packages such as `motion` and `@react-three/fiber` to add advanced animation, 3D rendering, and other functionality. ## Code Layers Compared with Figma Make - **Figma Make** is suited to building a functional app from a prompt without relying heavily on precise canvas design. - **Code layers in Figma Sites** are designed for adding custom interaction and motion to an existing visual design. - Together, the tools support both prompt-first development and design-first experimentation. Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.

figma

Welcoming Payload to the Figma Team | Figma Blog (opens in new tab)

Figma has welcomed the team behind Payload, an open-source headless CMS and application framework, to strengthen its developer tools and connect design more closely with development. Payload will remain open source, with continued investment and no immediate changes for users. The partnership supports Figma’s broader vision of letting teams design, build, and deploy digital products within a collaborative ecosystem. ## Why Figma Chose Payload - Payload is known for its highly customizable architecture, extensibility, and strong developer experience. - It has become one of the leading open-source projects in its category and is used by several Fortune 100 companies. - Figma was especially impressed by Payload’s active open-source community and its practice of incorporating developer feedback into the product. - Both companies emphasize collaboration, community participation, and continuous improvement. ## What Happens to Payload - Payload will remain an open-source product. - There will be no immediate changes for existing users. - Figma plans to continue investing in the project and improving it. - Figma and Payload users will receive ongoing communication as the combined CMS strategy and product roadmap develop. ## Bridging Design and Development - Figma aims to become a central hub where teams can create and deploy digital products. - Payload’s CMS and framework capabilities can help connect Figma’s design tools with production websites and applications. - As AI accelerates the generation of code and content, controlling deployments and refining user experiences across channels becomes increasingly important. - The partnership is intended to reduce the traditional gap between designers and developers. ## The Broader Context - The announcement follows Figma’s push into web publishing through Figma Sites. - Payload’s flexibility and developer-focused tools could expand what developers can build across Figma’s platforms. - The companies expect their combined teams and communities to create more integrated design, development, and content workflows. Figma’s acquisition of the Payload team is positioned as a long-term investment in collaborative, developer-friendly product creation, while preserving Payload’s open-source identity and existing user experience.

figma

The Making of Practice, a Book on Design and Craft by Figma | Figma Blog (opens in new tab)

Practice, Figma’s third annual Config magazine, explores craft as intentional making shaped by patience, precision, experimentation, and repetition. The project argues that quality depends not only on whether something works, but on how it works. Its editorial and visual design connect historical craftsmanship with contemporary digital tools and creative practice. ## Craft as the Theme - The magazine focuses on what it means to make with intention. - Craft is presented as a process of: - Practicing repeatedly - Learning through failure - Studying more experienced makers - Taking risks and pushing boundaries - Dylan Field summarizes the central idea: “The question is not just, can you make it work? It’s how it works that actually matters.” - The contributors demonstrate that patience, observation, and intentionality apply across disciplines and mediums. ## A Contemporary Take on Traditional Bookmaking - Design studio Other Means created the print edition with type designer Kia Tasbihgou. - The visual direction draws inspiration from William Morris and the Kelmscott Press, particularly its emphasis on intrinsic quality and artistic taste. - Traditional bookmaking elements—including: - Initial caps - Fleurons - Decorative borders - Drop caps - These details were reinterpreted in a contemporary style to connect historical craft with modern design. ## Craft Across Design and Technology - Practice brings together articles, interviews, and essays from Figma’s Story Studio. - Its contributors work with screens, pixels, data, and digital tools, but share principles with makers in more physical disciplines. - The project presents craft as both rooted in tradition and driven by innovation. - The magazine’s featured subjects explore craft through themes including adaptation, iteration, application, and value. ## Practice as a Typeface - The book’s distinctive drop caps were expanded into a complete typeface. - The resulting font includes a full alphabet of visually distinctive characters. - Figma created a type specimen website using Figma Sites. - The typeface is available to view and download through the Practice website. Practice ultimately recommends treating making as a deliberate, ongoing discipline rather than a race to a working result. Whether designing software, typography, books, or physical objects, strong work comes from sustained practice and attention to how the final result is made.

figma

Publish Your Designs On The Web With Figma Sites | Figma Blog (opens in new tab)

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features. ## Design and Publish Directly in Figma - Users can create live websites without exporting designs or switching to separate development tools. - The workflow supports portfolios, event websites, landing pages, and other interactive web experiences. - Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources. - A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate. - Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems. - Figma also provides common building blocks such as navigation, hero sections, and complete page layouts. ## Responsive Design and Prototyping - Figma Sites automatically adapts layouts, text, and designs across breakpoints. - Multi-edit enables simultaneous changes across multiple screen sizes. - Text styles can define different sizing and spacing for each breakpoint without relying on variables. - Designers can preview a fully responsive site rendered in HTML and CSS before publishing. - The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints. - Interactive previews can be shared with collaborators for feedback. ## Built-In Interactions and Motion Figma Sites includes pre-built effects for creating more dynamic websites, including: - Mouse parallax - Lightboxes - Infinite spinning objects - Draggable elements - Typewriter text - Scrambled text reveals - Marquee, reveal, and scroll-based effects The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components. ## Future Customization and AI Features - Upcoming code layers will allow designers to create interactive experiences without plugins or external tools. - AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks. - Code layers will eventually support reusable components and instances, similar to Figma Design libraries. - These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow. Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.