22.06.2023
Figma updates 2023
Our favorite design tool Figma presented a major update. New features include Dev Mode, variables, advanced prototype functionality, integrations, artificial intelligence and more.
Let's take a closer look at some of the new features and capabilities that have appeared in this update.
1. DevMode
By using this mode, you can quickly find the information you need for programming, such as specifications and styles, finished code, etc. This greatly speeds up the process of creating and building projects. Although the scope of this feature is very wide, it should be used with caution. Dev Mode is in beta and does not always work correctly. Often you have to edit the result or even start from the scratch.
2. Updated Inspect Mode
The new Inspect mode allows you to more accurately analyze design elements, including their size, spacing, padding and more. With this update, users can easily determine which elements to change and which to keep. Also now, with the help of plugins such as Anima and Figma to Code, you can get ready-made code in various versions:
- HTML
- css
- TailwindCSS
- Flutter
- SwiftUI (development environment for iOS, iPadOS, watchOS, tvOS and MacOS)
- React (JSX)
- TypeScript (TSX)
In addition, the code can be immediately opened in any development environment (Visual Studio, Sublime Text, Atom) or downloaded as an archive that contains a ready-made template. All you have to do is open the file in your code editor.
3. Advertising
PLACE
Pro subscription for business. Black tick, Yandex.Metrica, short URL, article branding.
To know
Plugins
The new Figma update brings integration with popular tools like Jira, Storybook, GitHub and more. With it, users can sync their designs with projects and tasks, as well as receive notifications in the project itself in Figma. This will make it easier to control the development process and ensure more effective communication within the team.
4. New Auto Layout
Auto Layout has two new features - Wrap and Max/Min.
Wrap is used to wrap list items to the next line. This update is useful because it is sometimes necessary to do pass-through text formatting in buttons, forms, and other interface elements.
Max/Min allow you to set the maximum and minimum values for the width and height of the card, which will allow you to change the size of the content depending on its size.
5. Font Preview
Font Preview is now available in Figma!!!
This feature will help you evaluate how text looks with different font styles and improve the quality of your design.
6. Statuses
The status determines which frames are ready for development. In addition, a version control system is now available, which allows you to see the differences between the changed components, as well as who introduced them and when.
7. Plugin for VS Code
Using the plugin for VS Code, you can access design layout files, view and control changes to them without leaving the editor.
What's in the next Figma update?
Figma acquired Diagram, an organization that developed AI plugins.
It is known that soon it will be possible, for example, to enter queries to create button layouts in different styles. Artificial intelligence will work in the same way as the built-in ChatGPT in Figma and will help you create texts. In addition, it will be possible to request the creation of interface elements in several versions and replace the information in them using AI.