Although the design tool, Figma, is yet a relatively new addition to the design systems list, it has become quite popular. As the free, web-based designing platform, it has stirred quite the buzz, especially with more enterprises using it. The process is amicable since developers can start with Figma without any expensive licensing or installation. Developers can easily access the design files.
Nonetheless, despite how easy the tool is to use, developers may be unfamiliar and inexperienced with it. Hence, this article draws to cover the bases and provides a complete guide for developers to work with Figma confidently.
Alongside, you will find specific feature references like CSS information of elements. This helps to navigate the platform and extract any additional information you may need. So, without any further ado, let's dive in!
Disclaimer: The CTRL key corresponds to the CMD key on macOS. Also, the ALT button corresponds to ALD on Windows but ALD/Option on mac.
Table Of Contents
- Figma For Developers: Getting Started
- Navigation: How Do Developers Jump From The Basics?
- Styles & Elements: Figma For Developers
- Export Assets: Figma For Developers
- Animations & User flow
- Summary
TLDR
- A vector graphics editor and a prototyping platform, Figma is an online tool that breaks barriers for designers and developers.
- A more innovative downloadable application is available for Mac and Windows and a mobile app for Android and iOs. The app allows interaction with prototypes in real-time on mobile devices.
- The power of Figma as a Design tool has completely changed the lives of developers too, who can now seamlessly work with designs. Therefore, efficiently managing the handoff process.
- The article explains the different stages developers must be aware of when working with this uncomplicated and flexible platform.
- Lastly, it discusses the forwarding space for developers as they roundabout the designs and thinks of the next segment in the pipeline.
Figma For Developers: Getting Started
Let’s understand first why switching to Figma changes the lives of developers. One of the significant impacts Figma induces is the ability to share designs due to its collaborative nature easily.
Initially, developers had to wait till the designers had almost finished their part before they could share it with anyone. And so, the process was a pretty tedious and cumbersome one. Design teams had to email tonnes of attachments, design images, word docs, and whatnot. On the other hand, developers could not access the complete design without expensive licensed software. With scattered communication and an ever-changing track of changes in structure, the process was no less than a nightmare.
What started as the inversion of separate platforms like Invision or Zeplin evolved into the one melting point: Figma. The cloud-based software is a simultaneous collaboration and communication space.
Subsequently, the tool brought an end to the frustration of designers and developers. Now, they could work together easily and exchange meaningful feedback while the work was in its formative stages. Most developers are familiar with the “handoff,” the point where they start converting wireframes and mockups to code. Thus, when both parties are clear with each of their expectations and the reality of the situation, none of them have to undergo any discrepancies. Not to forget, they do not have to restart the design if there is any issue midway.
Navigation: Figma For Developers
Once you are added as a collaborator on Figma, you may choose from two options: open it in the browser or download the desktop app. The cross-platform electron app is available on both Windows and macOS. However, they are both quite similar. The difference is that the desktop app has in-built support for local fonts. Whereas the browser one needs you to install the Figma Font Helper before accessing the local fonts.
On the screens of mobile applications, Pages are how the Figma files are organized. These consist of Frames or subpages often used to arrange Pages’ mockups in different interaction spaces. Frames are built-up of Elements: shapes, vectors, and texts. The elements or clusters of features are saved as reusable components. You can customize aspects with styles like fronts and colors. Again, these styles or groups can be further saved to be Design Tokens. You can then organize them amongst shareable Libraries for reuse.
Orientation
Next, we move to the primary interaction space: Figma’s interface. The interface is divided into three major categories. The middle part opens to a big canvas where all the designs are available. The left end contains the sidebar of layers, pages of the files, and assets. Finally, on the right toolbar lies all the information regarding the elements in the file.
The files may be multi-paged, and each page has a canvas attached to it. Designers may use the pages to distinguish and organize different portions of the file for the design system and other assets like icons. Note that you should familiarize yourself with the various pages that may be within the file before opening it for the first time.
Navigating Around Figma
The first time you open a Figma file, here is what you might observe
- The center panel displays the contents of the current page. When you click on any elements, it is selected on both the right and left sidebars.
- The document structure is organized to appear in a nested and layered sight on the left sidebar.
- The frame's right sidebar consists of three sections on the opposite end: Design, Prototype, and Inspect.
Design lets you adjust the styles of each of the Elements. The tab contents change depending on which Element you have selected, for example, colors, sizes, borders, etc. The prototype enables simultaneously attaching all the Frames into a workable prototype. Lastly, Inspect gathers the chosen content to convert to CSS properties and code.
Shortcuts
Indeed, navigating quickly around in Figma helps you work much more efficiently. So let's quickly go through the basics once.
A few pointers may include:
- Open the file by starting on maximum zoom level, encompassing all the visible area frames. Of course, you can always zoom in or out by Ctrl/CMD button on Windows/Mac and scroll above or below using the plus( +) and minus (-) keys.
- Additionally, you can zoom in quickly on any single frame or individual elements. First, select the item and then press Shift +2. For scrolling horizontally, hold the spacebar and drag with the mouse.
- You can also return to the original space where all elements are fitted within the canvas by clicking Shift+1.
Styles & Elements: Figma For Developers
The conversion process of designs to code depends entirely on the style and elements you have on hand. Thus, beginning a new project always helps to determine the basic style and layout first. And Figma has all the project styles displayed for you on the right end. You can choose the typography, grids, colors, and virtually any other style you would like to move forward with.
Choosing Elements
Following the groundwork, we move on to the layering aspect of chosen elements as the design proceeds. One of the most important aspects of deconstructing designs is selecting and deriving information regarding dimensions and styles.
Unfortunately, selecting layers is not as simple as clicking on the element. Since most designs have the elements wrapped in multiple levels of nesting, clicking on an element only selects the top layer.
Therefore, to choose a specific layer, hold the CRTL/ CMD button when clicking. Or, you may right-click the element to pop the nested layer menu open and then choose the one you want to work with. Nonetheless, if you double-click on any element, it will select the lower nesting level. So, if you want to drill down into any elements, this can be an easier way to go.
CSS
Cascading Style Sheets or CSS, the style sheet language or programming language, is a cornerstone tech of the worldwide web. It describes the markup language, like HTML document presentation, how the elements are to appear on paper or screen or any other media. Even the external stylesheets are saved in CSS files. The best part is that it controls the multiple web page layouts altogether.
Given its predominant role, Figma offers automatically generated CSS. Simply select any element, hit the ‘Code’ tab from the right sidebar and it will show you the complete CSS information. However, the results are not always entirely accurate, especially when it comes to positioning the elements. Henceforth, it is advisable to avoid copying all CSS 1-to-1 to the project. Rather, use the feature to understand the elements better and let it guide you through the operation.
Grids & Guides
You can always check the visibility of the layout by simply pressing the Layout Grids that appear on the toolbar as the Eye icon. For Rules and Guides, press CTRL/CMD+r instead.
Alt+hover on the elements, which will show the relative values of spacing to the nearest grid module or guide.
Measuring Dimensions
With style, elements, and navigation check marked, we next approach the measurement concern. How do you measure the spaces between different elements?
The answer is simple. Select the element on hand, the one you are willing to measure from, and press and hold the Alt key. Simultaneously, hover your mouse onto the other element that you want to measure the distance from. Figma will highlight this distance with a red line and display the measurement in pixels.
Hold the Cmd key and deep select it to measure the difference between any specific child element present in another group or frame. As we discussed earlier, the deep selection procedure is the same as selecting the elements.
Export Assets: Figma For Developers
Earlier, designers were responsible for exporting the assets as developers had no access to design software.
Well, not anymore. Now, developers have complete accessibility and comfort of exporting assets with Figma, all by themselves.
Export Preparation
The process takes off with you marking the exportable assets. Select the element that you are ready to export. Press the plus icon on the right sidebar beside the Export heading.
The type of file you want to export determines how you can tweak the settings. For instance, images have a scale multiplier. So you have to select the type of images files like PNG, JPG, SVG, or PDF and adjust settings accordingly. Figma uses the layer name as the file name, but you can always add a suffix to the final file name. And then, use the export button to finish your mission.
In other instances, when you don't have to customize export settings and need to copy any element quickly, there is a more accessible alternative. Right-click the asset and hover on Copy/Paste to copy the image o SVG code.
Exporting All Assets
Apart from exporting each asset by selecting and clicking the export buttons separately, you can also export all of them. The support can be exported altogether at once. Let’s see how that works.
When you are already aware of which assets are to be exported in groups, use a slash in your layer name to highlight them as a group of assets. Subsequently, Figma will create a separate folder for the particular group and export these assets together to the subfolder.
Go to the main menu and press “ Export” from the File menu. Or, you can use keyboard shortcuts for this purpose too.
Click on:
- macOS: Shift+CMD+E
- Windows: Shift+Ctrl+E
This will prompt the marked items in the file that are to be exported.
Then, you may check the dimensions and other properties and check for any errors. Once you are sure there is nothing that needs to be excluded, you can make the final call. Hovering over the assets’ thumbnails will show the names as they would appear after export. If you are up for any changes, select the element in the canvas by simply clicking the thumbnail. Thus, you can then easily adjust any export settings.
Animations & User flow
Figma supports a myriad of animations for state or page transitions. There are options available when opening menus or modals, swiping across actions on mobiles, and many others. Developers can easily preview these engaging animations by tapping the play button on the top right and opening the Presentation view.
Again, if you want to view the animation information, choose the tab “Prototype” on the right sidebar. It will then display the user flow in blue arrows on the canvas. As you click on these arrows, it will give you the required information on that particular animation.
Each of these animations has a trigger point, an action feature, and a transitional property. Simple energy causes a hamburger menu to open. The hamburger icon consists of an “On Tap” or the trigger option. Once that trigger has been pulled, it shall “Navigate To” the screen to an opened mobile menu.
The “Smart Animate” transition type essentially means that Figma interpolates automatically between the two states. It uses the “Ease Out” animation functionality with a duration of 300ms.
Essentially, you will need the same information to recreate animations in CSS. But, like all the other element particulars, animations are not available in the Code Tab.
Summary
Therefore, it is safe to conclude that Figma is an amazing tool to test and validate designs before imprinting the code. When developers witness real-time communication, user-tested results, and motivation, they're better motivated to work. And the best part? The development cycle shifts towards a more proactive approach. As a result, the final product is much more intuitive and cohesive.
Now that developers have crossed the design hurdle, the focus from Figma graduates to the next step: product development. Since the designs are in place, developers are geared up for the implementation process, another challenge in the field. But what if we say that this is no longer a worry for you. Like what Figma did for designers and developers, has the development stage also been taken care of?
Yes, you heard that right! Convert your stunning Figma designs to their ultimate version of the desired product without stress! Your design-to-code journey can be easily managed by FigmaFy.
We're a development firm, and our primary objective is to help firms offload work on their web development side of things, regardless of the design tool they're using. Our work focuses around taking anything from Figma (or any other design tool), exporting the assets, and converting it to clean, bug-free code - which can be from something as basic as HTML5 all the way to a fully functional website or software.
With a skilled team that ensures timely deliverables and utmost dedication, we at, FigmaFy will ensure no stone is left unturned in your services. Can’t believe your eyes? Well, then, Start Now and see the results for yourself!
