vector-design

6 posts

figma

Config 2025: Pushing Design Further | Figma Blog (opens in new tab)

Figma’s Config 2025 announcements frame design as more than visual production: it is the process of solving problems, shaping quality, and turning ideas into working products. As AI makes software easier to build, Figma argues that human craft, judgment, and point of view become even more important. Its new tools aim to connect ideation, prototyping, illustration, websites, and production in one collaborative platform. ## Figma Make: From prompts to working prototypes - Figma Make is a prompt-to-code tool that converts natural-language instructions or existing Figma designs into interactive prototypes. - Designers can: - Start with a text prompt or an existing file. - Generate high-fidelity app and interface concepts. - Select a specific area of a prototype and modify it with a prompt. - Test interactions and animations earlier in the design process. - Because Make is embedded in Figma, teams can explore, iterate, and validate ideas within a shared source of truth. - The tool is intended to reduce the separation between design and production while giving designers more control over generated results. ## Figma Sites: Taking designs to production - Figma Sites extends the platform from designing websites to publishing them. - It is intended to let teams move from visual design to production without relying on disconnected tools or complex handoffs. - Designers can use Figma’s existing collaboration and design workflows while creating real, publishable web experiences. - This reinforces Figma’s broader goal of supporting the full path from initial idea to live product. ## Grid: Moving from freeform to structured layouts - Grid addresses the tension between Figma’s flexible canvas and the structured layouts required for real interfaces. - It enables designers to shift more smoothly between exploratory, freeform work and organized, production-ready arrangements. - The feature is designed to make structured layout systems easier to create without sacrificing creative flexibility. ## Figma Draw: Expanding vector expression - Figma Draw adds more expressive illustration capabilities to vector layers. - It focuses on unbounded visual exploration, including texture, gesture, and richer vector-based artwork. - The tool helps designers create more distinctive illustrations and visual assets directly inside Figma rather than switching to a separate application. ## Figma Buzz: Creating branded content at scale - Figma Buzz is aimed at producing marketing and brand assets across many formats. - It brings design quality and brand consistency to content creation that may otherwise be handled through repetitive, disconnected workflows. - Teams can adapt designs for different channels and use cases while maintaining visual standards. - The product broadens Figma’s audience beyond product-design teams to include marketing and brand professionals. Figma’s Config 2025 direction is to make the platform a more complete environment for creative work: prompt ideas into prototypes, organize them into structured designs, add expressive visual detail, and publish or adapt the results for production. The central recommendation is to treat AI as an accelerator while preserving human design judgment, quality, and originality.

figma

The Power of Play | Figma Blog (opens in new tab)

Laura Fehre’s experiment creating the Figma-based “Mani Mansion” shows how play can unlock creativity when perfectionism and rigid expectations get in the way. Although she initially rejected structure, she discovered that a flexible design system made experimentation easier and more enjoyable. The project ultimately became less about producing a perfect digital salon and more about creating something delightful and inspiring. ## Finding Inspiration in Everyday Experiences - Fehre drew inspiration from the childhood game *Barbie Nail Designer* and her own nail-salon appointments. - She explored real nail salons to capture their sounds, scents, textures, and ’90s aesthetic. - Sketches of plush seating, neon signs, and glossy counters helped translate the physical experience into an interactive Figma playground. - Her goal shifted from designing for efficiency to creating a space where users could lose track of time. ## When Disorder Needs Structure - Fehre initially made every nail shape unique, hoping to create a wild and unconventional experience. - This approach made layering and combining elements difficult, producing endless duplicates and a frustrating file. - She realized that structure and reusable components were necessary to support creative freedom. - The experience also exposed her insecurity about rusty graphic-design skills and unrealistic expectations. ## Reframing Problems as Play - Collaborating with fellow Designer Advocate Miggi Cardona helped Fehre turn creative frustration into experimentation. - They played with nail shapes and patterns without focusing on whether the results were “useful.” - Fehre recognized that trying to impress others had made failure feel threatening. - Letting go of perfection allowed setbacks to become opportunities for learning, humor, and discovery. ## Designing and Sharing the Final Manicure - Fehre created a mood board combining disco glitter, ’80s Versace influences, bold black clothing, “baddie” energy, and Valentine’s Day hearts. - A systematic set of nail shapes and colors gave her enough consistency to explore combinations freely. - She brought the resulting design to her nail technician as creative inspiration rather than an exact template. - The final manicure demonstrated how digital play can inspire real-world collaboration and expression. The practical lesson is that structure and play are not opposites. Designers can use systems as a foundation, then experiment freely within them—especially when the goal is delight rather than perfection.

figma

Figma Persona 2022: What’s your creative collaboration style? | Figma Blog (opens in new tab)

Figma Persona 2022 presents a playful quiz designed to help people reflect on their creative collaboration and working styles. Based on 21 questions across problem-solving, workspace habits, and collaboration, the quiz assigns one of eight Figma-inspired personas. The article encourages teams to use these insights to improve communication, planning, and creative collaboration. ## The Figma Persona Quiz - The quiz is intended as an end-of-year reflection and goal-setting exercise. - It evaluates three areas: - How someone generates ideas and solves problems - How they organize their workspace and use tools - How they collaborate with others - Results fall into eight personas: - Lone Ascender - Canvas Captain - Direct Mobilizer - Artful Detacher - Bounding Boxer - Branch Merger - Vector Networker - Bézier Curve Baller ## Organized Individualists - Organized individualists prefer: - Tidy processes and clear deliverables - Defined milestones and structured workflows - Working independently before regrouping - Async updates and bug bashes - They are most effective when given space to develop ideas and solutions. - Collaborators should provide clear expectations, async pre-work, and precise requests. ## The Lone Ascender - The Lone Ascender is described as an organized, analytical individualist. - This persona excels at: - Solving complex problems - Building tactical, practical, systems-driven solutions - Applying consistent processes - Scaling difficult or complicated work - Lone Ascenders favor pragmatism and systematic thinking over idealism. - They value occasional collaboration but may be protective of file organization and formatting. - Suggested tools and habits include: - Memorizing shortcut keys and quick actions - Using FigJam templates to extend structured workflows - Applying strong organizational systems within Figma Overall, Figma frames the personas as a lighthearted way to recognize different working preferences. The practical recommendation is to use the results as a conversation starter, giving teammates the structure, independence, or collaboration style that helps them do their best work.

figma

30 updates: recent features and fixes in Figma | Figma Blog (opens in new tab)

Figma’s July 2021 update roundup highlights 30 small improvements designed to make everyday design work faster and less disruptive. The changes span vector editing, typography, images, collaboration, navigation, accessibility, browser behavior, and keyboard shortcuts. Together, they reduce friction across common workflows rather than introducing one major feature. ## Vector, Stroke, and Drawing Improvements - Redesigned the stroke panel with easier controls for end caps and connector properties, including connectors copied from FigJam. - Added math operations for changing properties with mixed values. - The Pencil and Pen tools now remember selected stroke settings for future use. - Added hover states for frame presets and improved grid property drag handles. - New rulers are automatically selected after creation, allowing immediate keyboard adjustment or deletion. ## Image and Export Workflow - Added browser support for **Copy as PNG**, using `⌘+Shift+C` or `Ctrl+Shift+C`. - Holding `⌘`/`Ctrl` while resizing an image immediately crops it. - Image adjustment sliders can now be used without an extra click. - Export settings now include an “include bounding box” option, with the corresponding Plugin API setting `use_absolute_bounds`. - Renamed “Contents only” export to “Ignore overlapping layers.” - Pasting an image during text editing now exits text mode and pastes the image normally. ## Typography and Fonts - A second fill added to an object is now a solid color instead of a gradient. - Text export behavior was improved with more precise bounds controls. - Copying text with a missing font now activates the global missing-font indicator. - The missing-font dialog lets users click directly to identify affected layers. - Removed the “+” option for text nodes with mixed styles, making it easier to override them with a new style or color. - Renaming a file no longer produces an unnecessarily tall selected-text background. ## Collaboration and FigJam Integration - Preferences now sync automatically across open tabs without requiring a reload. - Stickies copied from FigJam as text are ordered according to their layout. - Zooming with “Z” no longer shows a selection rectangle to other collaborators. - Layer-panel icons update faster to reflect their corresponding objects. - The layers panel now scrolls to the selected layer when selection keyboard shortcuts are used. ## Navigation, Menus, and Interaction - The “Move to project” dialog can be dismissed by clicking outside it or pressing Esc. - Increased the clickable area for the top-menu chevron. - Middle-clicking selected links opens them. - Alignment and repositioning buttons remain active while editing text. - Users can pan across links without triggering disruptive link pop-ups. - The redesigned cursor hand is less intrusive. - Toolbar dropdowns now work correctly in View Only mode. ## Browser and Safari Fixes - Safari users can scrub fields by holding `⌥` and moving the mouse. - Right-click menus remain open more reliably in Safari. - Various interaction and menu behaviors were refined to make browser-based Figma more consistent. Figma presents these updates as an ongoing effort to remove small sources of friction from design workflows. Users can review the changes in the associated Figma Community file and follow the “What’s New” page for weekly fixes and improvements.

figma

#FigmaTip Roundup 7.0 | Figma Blog (opens in new tab)

FigmaTip Roundup 7.0 collects small, community-shared techniques for working faster and more precisely in Figma. The tips focus on creating symmetrical shapes, controlling selection behavior, zooming directly to layers, and improving frame visibility. Together, they show how shortcuts and view settings can make everyday design tasks more efficient. ## Creating Symmetrical Shapes with Components - Draw a rough outline of one side of a shape, such as a vase or flask. - Convert it into a component with **⌥⌘K**. - Duplicate it with **⌘D**, then mirror the duplicate horizontally with **⇧H**. - Position the mirrored copy beside the original. - Edit the component to refine the shape while preserving symmetry. ## Freezing Selection Bounds - Pressing the **spacebar** freezes the bounds of the current selection. - This helps prevent the selection box from changing while moving or adjusting elements. ## Zooming Directly to a Selection - Enable **“Keyboard Zooms Into Selection”** in Figma’s settings. - This makes it easier to zoom quickly to a selected layer, especially when choosing it from the layers panel. - The feature is useful for navigating complex files with many objects. ## Making Frames Easier to See - The roundup also highlights Figma’s **“Frame Outlines”** view option. - Frame outlines improve visibility and make it easier to distinguish frame boundaries while designing. These shortcuts and settings are simple to adopt but can significantly improve speed, precision, and navigation in Figma.

figma

Figma’s new icon | Figma Blog (opens in new tab)

Figma’s 2017 icon redesign reflects the company’s growth and broader design philosophy. Rather than treating the icon as a standalone mark, Figma built it around three ideas: fundamental design elements, playful experimentation, and modular systems. The result is a bright, flexible icon made from simple shapes that represents both Figma’s product and its approach to design. ## Celebrating the Fundamentals of Design - All designs can be reduced to basic elements such as points, lines, and shapes. - Figma’s own tools follow this principle: a relatively small set of carefully integrated functions can produce complex results. - The icon celebrates these foundational building blocks, echoing traditions associated with Bauhaus and other design movements. - Its simple forms represent Figma’s goal of empowering designers to create sophisticated work from elemental components. ## Encouraging Play - The icon’s bright colors and block-like shapes were inspired by children’s building blocks. - Figma views experimentation and play as important ways to discover new solutions. - An open, playful design process can produce more creative and unexpected outcomes. - The icon is intended to communicate the same openness and enjoyment that Figma hopes to enable in its users’ workflows. ## Design as a System - Digital products must work across many screen sizes, devices, operating systems, and connection conditions. - Modular systems and reusable components are therefore more effective than one-off designs. - Figma favors rules-based, vector design because it can adapt to different environments more reliably than fixed pixels. - The new icon is constructed from three simple shapes arranged on a modular grid, reinforcing the idea of flexible, reusable design components. - This concept connects to Figma features such as team libraries, which help designers build and maintain systems. The new icon extends Figma’s identity while expressing its core beliefs: strong design starts with fundamentals, creativity benefits from play, and digital work is most powerful when built as an adaptable system.