![Figma community](https://kumkoniak.com/31.jpg)
Elements (or groups of Elements) can be saved as reusable Components.
![figma community figma community](https://i.ytimg.com/vi/YUg7rfDTqMk/maxresdefault.jpg)
Each Frame is made up of Elements – shapes, text, vectors, etc.
![figma community figma community](https://uploads-ssl.webflow.com/6225fc753fdfeb1f4e457d4e/6234be9cda01af0fc4bd8adf_Figma-Community-1024x576.jpeg)
So let's start from the top and take a look at the the basics, along with the Figma features that will be most useful for developers.įigma files are organized by Pages (think screens of your application), which each contain Frames (subpages, often used to organize mockups of Pages in various user interaction states). Like any specialized software, a Figma file can be a little overwhelming to navigate if you're not familiar with it. It's free for individual use, so I'd encourage you to go make an account and start playing around! It's the best way to learn. With that in mind, I'd love to introduce my developer friends to Figma, one of the most popular and widely-used UI design tools. Not to mention all the ways having access to the design source files can make your own job easier. Teams work better and create better products when both parties have a high level understanding of each others' tools and priorities. When you use one of these, you get the benefit of being perfectly synced up with your designers.but, to make fullest use of a tool like that, you'll want to know your way around Figma – at least a little. For example, this Figma Kit from KendoUI which offers all their components, broken down into base elements and ready for customization in Figma. Not to mention, Figma Kits are becoming a more popular offering for teams using a third-party component library.
![figma community figma community](https://cdn.vox-cdn.com/uploads/chorus_asset/file/19307057/_gch9G2g.png)
And yet, when we flip the script, developers are rarely expected to have an understanding of design basics – what's up with that? This pain can be lessened, however, when both sides have an understanding of what the other will be looking for in the handoff process.ĭesigners are expected to have a pretty thorough understanding of the front-end web: HTML elements, the CSS box model, how responsive resizing works, component-based structure, etc. Even if you're not personally familiar with the process, it's probably unsurprising to hear that this can be a real pain point. If you're a developer who works with designers, you're already familiar with the infamous "handoff" – that point in the workflow when you start turning wireframes and mockups into code.
![Figma community](https://kumkoniak.com/31.jpg)