Figma in Practice: Wishdesk's Web Design Approach
In modern web design, Figma tools have become the industry standard, offering powerful capabilities for optimizing workflows. The platform continues to evolve, introducing new features, including elements of artificial intelligence. In this article, we at Wishdesk share our practical experience using Figma's advanced capabilities that help us create effective web solutions for our clients.
Innovative Figma Tools and Their Practical Applications
Auto Layout and Component Systems
What it is: Powerful functionality for creating flexible, adaptive layouts and organizing components into scalable design systems.
How we use it at Wishdesk: In our practice, we create structured component libraries with logical organization and configuration of different variants. Auto Layout allows us to quickly adapt elements to different screen sizes, while component systems ensure design consistency across all project screens.
Practical case: For an e-commerce project, we created a library of 50+ components with variants for different states (default, hover, active, disabled). Thanks to Auto Layout configuration, each component adapted to content, which significantly accelerated the process of creating different screens.
FigJam with Intelligent Features
What it is: A tool for collaborative work on diagrams, schemas, and brainstorming with assistive features for organizing information.
How we use it at Wishdesk: Our team actively uses FigJam to create user journey maps and build website information architecture. Using built-in templates and automatic formatting capabilities allows us to quickly visualize complex structures.
Practical case: When planning the structure of a corporate portal, we used FigJam to organize a list of 50+ features into logical sections, creating a clear information architecture using built-in diagramming tools.
Variables and Interactive Components
What it is: A system for creating dynamic, adaptive components that change depending on context and user interaction.
How we use it at Wishdesk: We implement Variables to create flexible page templates that adapt to different content. Interactive components allow us to demonstrate realistic behavior of interface elements to clients at the design stage.
Practical case: For an educational platform project, we created adaptive course cards using Variables that automatically adjusted to different title lengths, descriptions, and visual content, ensuring a harmonious appearance regardless of the data.
Variable Fonts
What it is: Support for variable fonts that allow changing various typography parameters within a single font.
How we use it at Wishdesk: We use Variable Fonts to create flexible typographic systems that adapt to different screen sizes. This allows fine-tuning of weight, width, and other font parameters without having to use separate files for each style.
Practical case: For a media platform project, we used Variable Fonts to configure optimal font parameters (weight, contrast) on different screen sizes, providing perfect readability without creating separate typographic styles for each breakpoint.
Color Styles and Design Tokens
What it is: A system for managing color styles and design tokens to create consistent, scalable design systems.
How we use it at Wishdesk: We create structured color systems with primary and semantic colors. Design tokens allow us to change visual aspects of the entire design with minimal effort, providing flexibility when creating design variants (such as dark/light themes).
Practical case: For a fintech startup, we developed a color system with 8 primary colors and their shades, organized through design tokens. This allowed us to quickly create an alternative dark theme for the app and ensure design consistency when scaling the product.
Optimizing Workflow in Figma
Automating Routine Tasks
One of Figma's most valuable aspects is its ability to automate repetitive tasks. At Wishdesk, we actively use Auto Layout to organize elements and adapt them to different screen sizes. For example, for an e-commerce project, we created adaptive product grids with Auto Layout that display correctly on all devices.
The Batch Rename functionality has become an indispensable tool that helps rename groups of layers according to set rules. When working on a large online platform project, we used this tool to standardize the names of over 200 components, which significantly improved file organization.
We also regularly use the Templates feature to quickly create new screens based on prepared templates. For an internal system project, we created a set of page templates with different layouts, allowing the team to quickly create new screens while maintaining the overall structure.
Accelerating Design Iterations
Figma tools allow us to go through the iteration cycle faster. The component approach and content that updates synchronously across all instances allows making changes once and seeing them applied throughout the project. For a corporate website of a technology company, we used this approach to quickly iterate the design of the main navigation, testing different styling options.
Smart Animate allows creating smooth transitions between screens in prototypes. When working on a mobile app for a delivery service, we used this feature to create realistic animation transitions between order screens, allowing the client to better experience the final product at the design stage.
Prototype functionality with conditional variants allows creating interactive prototypes that simulate the real application logic. When developing a content management system, we created a prototype demonstrating different usage scenarios and potential error messages, enabling effective user experience testing.
Integrating Advanced Figma Features into Our Workflow
At Wishdesk, we follow a component-first approach in our workflow, which seamlessly integrates Figma's innovative capabilities into our design process.
During the research and planning phase, we use FigJam to create user scenario maps and information architecture diagrams. Collaborative features allow involving not only designers but also developers and business representatives in this process.
When creating concepts, we build grids and wireframes using Auto Layout, which allows quick experimentation with different layouts. We use design tokens to define the main stylistic directions of the project.
UI component development occurs through creating components with variants that are then organized into a comprehensive design system. Component properties are configured so that the team can easily create new screens with the necessary variations without violating the overall style.
When forming the design system, we use Figma component and style libraries that allow centralized management of design elements and ensure their consistency in all parts of the project.
Prototype creation is enhanced with interactive components and Smart Animate to demonstrate dynamic interface elements. We use variable component states to simulate real interface behavior.
During the testing and validation phase, we use built-in accessibility checking tools to evaluate color contrast and other parameters, and create adaptive versions of the design for different screen sizes using Auto Layout.
Practical Tips for Using Figma for Web Design
Based on our experience at Wishdesk, we recommend starting each project by setting up the file structure and basic components. Clear organization from the beginning of the project significantly simplifies further work, especially when scaling the design.
It's worth actively using components for all repeating elements, even if they seem simple. This ensures consistency and significantly speeds up making changes in the future. It's important to properly configure Auto Layout for components so they correctly respond to changes in size and content.
Design tokens and variables should be implemented in the early stages of the project to create a flexible system that can be easily modified. For example, we create basic tokens for spacing, colors, and typography, and then use them in all components.
For effective teamwork, we recommend using comment functions and collaborative editing. In large projects, it's important to establish clear naming and file organization rules so that each team member can easily navigate the project.
Prototyping should be integrated into the design development process, not left until the end. Creating interactive elements helps identify potential problems in user interaction with the interface earlier and correct them.
Challenges of Using Figma in Web Design and Ways to Overcome Them
With all the advantages of Figma, at Wishdesk we also face certain challenges. One problem is performance when working with large files and complex components. To solve this, we divide projects into linked component libraries and pages, which reduces the load on the browser.
The second challenge is transferring designs to development while maintaining all the nuances. To overcome this, we use inspection features and code snippet exports, as well as conduct joint sessions of designers and developers to coordinate implementation details.
The third challenge is synchronizing work in large teams. Our approach includes clear file structuring, defining roles and responsibilities for different components, as well as regular synchronization sessions to discuss changes and innovations.
The Future of Web Design in Figma: A Realistic View
Figma is actively developing, and we expect further integration of machine learning and AI elements into the platform. Already we see the first steps in implementing FigJam AI, which helps organize ideas and diagrams.
Another promising direction is the development of tools for a smooth transition from design to development, with automatic generation of component code and styles. At Wishdesk, we actively monitor these trends to be ready to implement new functionalities into our workflows.
The development of collaborative features has great potential for increasing the efficiency of geographically distributed teams working together. We expect further improvement of tools for synchronous real-time interaction, which will allow even closer integration of project team members.
At Wishdesk, we constantly experiment with Figma's capabilities and adapt our workflows to new platform functionalities to offer clients the most effective web design solutions.
Key Takeaways from Our Figma Web Design Process
Figma, with its powerful tools for creating components, prototyping, and collaboration, significantly expands designers' capabilities and increases workflow efficiency. At Wishdesk, we have integrated these tools into our work in such a way as to focus human talent on strategic and creative tasks while automating routine operations.
Our team is ready to share experience using Figma's innovative capabilities to create effective web solutions. We invite clients who strive for high-quality design of their digital products to collaborate with us.
