5/3/2023 0 Comments Download figma![]() The right toolbar contains all information about elements in the file.Ī file can have multiple pages and every page has one canvas. On the left side, there is a sidebar that contains the layers, assets, and pages of a file. In the middle, you’ll find a big canvas where all the designs are located. The desktop app does have built-in support for using local fonts whereas the browser version requires installing the Figma Font Helper before you can use local fonts.įigma’s interface is split into three major parts. The functionality of the browser and desktop versions is largely the same. The desktop app is not a native app but a cross-platform electron app like Slack and Visual Studio Code. When you are added as a collaborator on a Figma design you can choose to open it in the browser or you can download the desktop app (available on Windows and macOS). Figma startup landing page dark (download).If you want to follow along with this article (or just play around with Figma), I’ll be using this file to explain everything in this tutorial: It’s also completely cloud-based so everyone is always looking at the latest version of the design and has built-in collaboration tools making collaborating and communicating easier than ever. Figma is browser-based so everyone can use it regardless of their operating system and without installing anything. A big improvement but still not perfect.įigma is a design tool that is rapidly gaining in popularity and shakes up the design handoff process once again. Although it was easier to find the latest version of a design for everyone, designers needed to work in separate tools and keep them in sync. Developers now had better access to the designs and had more tools available to extract information about typography, colors, and measurements. Designers would often use separate tools like Zeplin or Invision to handoff the designs to developers. Everyone was struggling with keeping track of changes to the design every time the design was updated, it needed to be sent to everyone involved - yet again.Īs design tools modernized, this process got more streamlined. Communication and feedback were scattered across email, project management tools, and meeting notes. Developers usually didn’t have access to the full design files as licenses for design software were expensive and not strictly necessary. To understand the hype around Figma and why you suddenly find yourself needing to learn how design tools work as a developer, it’s helpful to look back on the developer handoff process before Figma was around as it has changed significantly.ĭesign teams used to send an email to the development team with dozens of attachments containing static images of the design, exported assets, and even word documents with the page copy. Most shortcuts are written for both Windows and Mac, where the Ctrl key on Windows corresponds to the Cmd key on the Mac, and Alt is used for both Alt (Windows) and Option/Alt (Mac).įor example, Ctrl/Cmd + Alt + C is Ctrl + Alt + C on Windows and Cmd + Alt/Option + C on the Mac. I’ll also cover some specific Figma features that make it easier for developers such as providing CSS information about elements used within the design. Since many developers don’t have a lot of experience playing around in design tools we’ll cover all the basics developers need to know about so you can confidently navigate around Figma and extract any information you might need when working with the designs sent to you by a designer. This has made design more accessible than ever and that’s why many developers now find themselves needing to learn how to work with design tools. This means you don’t need to install it locally or buy expensive licenses to give team members access to design files. If you aren’t using it yet the name Figma is surely a name that you’ve heard more and more over the last few years.įigma is a relatively new design tool that is browser-based. This article teaches developers who have nothing but a basic understanding of design tools everything they need to know to work with Figma. Unlike most design software, Figma is free and browser-based so developers can easily access the full design files making the developer handoff process significantly smoother. ![]() ![]() Figma is a design tool that is rapidly gaining popularity and becoming more common in companies around the world.
0 Comments
Leave a Reply. |