responsive-web-design

2 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

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.