NEW CASE STUDY: How we built top-rated shopping apps for Crate & Barrel and CB2 
.png?width=130&height=78&name=Heady_Logo_Web-01%20(1).png){kind=logo}
NEW CASE STUDY: How we built top-rated shopping apps for Crate & Barrel and CB2
Auto Layout is a powerful feature that allows designers to create flexible and resizable components by defining rules and constraints. This task can be time-consuming and challenging depending on the complexity of the element.
The new Suggest Auto Layout feature:
This feature is one we’re definitely looking forward to adopting in order to boost our productivity.
At Heady we use FigJam for internal and external workshops, ideation and prioritization sessions, developing user flows and journeys, and facilitating team syncs. FigJam is a critical tool in our toolbelt, but we’ve long felt that it could offer better organizational capabilities.
Our team was excited to hear that we can now add multiple pages in a single FigJam file!
While this was one of the more low-key features announced during Config, it opens up a lot of opportunities for more robust workshops, centralized project documentation, and a greater degree of organization.
Figma has worked closely with Apple and Google to create UI kits that are easy to use. We always leverage these on Android and iOS platforms to ensure consistency and adhere to each platform’s best practices, but sometimes it’s a struggle to keep up with the latest UI kit versions.
Figma will now offer not only Android and Google kits, but also a new Figma Simple Design System.
Key features of these kits include:
✅ Ability to switch scheme colors easily
✅ Screens are responsive (and can be easily switched between viewports to see a desired size)
✅ All components are code-ready
Recently the Heady Design team debated how best to incorporate native components into our designs as we grappled with the challenge of ensuring updates to those libraries are rolled out across different files. Having the libraries available in every file settles our debate and will reduce time spent maintaining local libraries.
Last year, Figma launched Dev Mode — a workspace that enables developers to inspect designs, review measurements, and export assets so they can build work seamlessly and more accurately. This year they’re taking it to the next level with major updates to make Dev Mode more robust.
The goals of these updates are to:
👉 Support the realities of an iterative design process
👉 Simplify inspection of large files, making it easier to find what you need
👉 Bring code and design together to speed up workflows
👉 Improve design-dev sync
Some of these updates include:
👉 Remark as “Ready for Dev” describing changes
👉 New “Ready for Dev” view which looks like a “feed” and shows the latest updates on design, hiding any other irrelevant elements to devs
👉 “Focus View”: Cuts out all the canvas clutter and only shows the canvas that needs to be inspected
👉 View versions of previous changes
👉 Responsive setting for Prototype View
👉 “Mark design as complete,” which sends a notification to the designer informing them what is done
While our team has a library of documentation and annotation tools that we’ve created, the Dev Mode updates will be helpful for providing additional context on our designs and removing any lingering ambiguity.
Staying in sync with our dev team is essential to delivering top-rated mobile apps and websites, so we appreciate any new features that enable us to strengthen that relationship.
At Heady, we leverage design systems to ensure our work is consistent. But for a design system to be effective, it’s crucial to ensure a 1:1 design and code match. This means that every design element should have a corresponding code implementation, which reduces discrepancies and ensures that what is designed is exactly what gets built. This alignment minimizes misunderstandings and errors, leading to a smoother development process and a more accurate final product.
The newly announced Code Connect feature for Dev Mode will help bridge the gap between designers and developers by allowing developers to see code snippets from their libraries directly in the file, instead of displaying auto-generated code. By connecting component definitions and properties from code to Figma, Code Connect ensures that design and development teams are fully aligned.
We believe Code Connect will help drive consistent and correct adoption of our design systems across design and engineering. It will ensure that our designs are implemented accurately in code, reducing discrepancies and improving overall quality and product performance.
AI has become an increasingly important part of development and design and accordingly, Figma has introduced advanced AI features with its latest updates.
While as designers we firmly believe in the power of our uniquely human skills and creativity, thoughtful and judicious use of AI can significantly enhance our work and empower us to work smarter and more efficiently.
Figma’s key AI updates include 👉
Make Design
One of the most talked-about new features unveiled at Config 2024, this feature uses AI to translate a prompt into a fully hi-fi responsive screen. Designers can then customize the AI-created screen by making changes such as quickly changing the theme color, adding properties like font and corner radius, and even adding new portions with additional prompts.
Note: The week after it was rolled out at Config 2024, Figma's CEO announced they were temporarily disabling the feature after criticism that its AI was "heavily" trained on other apps. The company says it won't relaunch Make Design until it's had the opportunity to fully QA the underlying design system.
New Ways to Find What You Need
🔎 Search for Similar
Paste a screenshot, and the AI will find the most similar design in the file. Draw with the pencil tool to find components that match your sketch.
🔎 Search in Figma Community
Write a prompt to get accurate results from the Figma community that can be reused in your file.
Staying in the Flow
◽ Replace Content
One of the most tedious tasks for designers is generating realistic placeholder content that makes sense. Sometimes we simply run out of ideas (and using lorem ipsum isn’t always an option). This new feature lets you replace fake content with relevant content with just one click. It also allows you to create relevant images according to the context, remove backgrounds, translate text, and more.
◽ Prototyping
AI will draw relevant connections between a set of screens, and prototypes will now have a responsive view. This helps reduce the number of prototype windows needed during a presentation and helps us better visualize the results of our auto-layout settings.
Rename Layers
This new feature allows you to select layers and AI will automatically rename each element with relevant and intuitive labels. This task has often been neglected, so we’re excited that it will finally be automated!
All these new AI features will be available in the Beta version. Figma will absorb the initial costs and plans to update its subscription fees for these new services in 2025 based on usage data.
Designers often use Figma in unexpected ways. One of the more common — and more useful — is for creating slide decks. Just last year, 3.5 million slide decks were created in Figma. But leveraging Figma for presentations makes it difficult to collaborate and slides often need to be exported to another tool. Figma Slides is a new tool from Figma specifically for designing and collaborating on decks.
Figma Slides introduces:
✨ A simplified interface
✨ An easy way to reorder slides or rows of slides
✨ A template picker with color schemes that can be applied to all slides to ensure visual consistency
✨ Slides animations
✨ Voice and tone adjustments of the text
✨ Design mode that will reveal more advanced features
✨ Ability to embed a fully working interactive prototype and engage directly from the presentation
✨ Spotlight another user and see their cursor while driving the presentation/prototype without having to stop and share another screen
✨ Polls that allow users to vote on options within the slides
We're thrilled about this update because we frequently use Figma to create decks and have faced the challenges that come with it. Having a dedicated Figma tool for decks is a big win and something we look forward to using at Heady.
From enhanced auto-layout suggestions and multi-page FigJam files to advanced AI capabilities and improved developer collaboration tools, these updates will help us work more efficiently and effectively. At Heady, we’re excited to start integrating these features into our projects as we continue to deliver the best possible digital products for our clients.
.png?width=75&height=45&name=Heady_Logo_Web-01%20(1).png){kind=logo}
Your phone will break before our apps do.
© 2024, Heady LLC.
