![]() The size doesn’t really matter since we can stretch the component as we need, but let’s begin with setting the size to 100×36 pixels. The background will be a separate component in Figma. Now we’ll take a closer look at each one of them. In design terms, they’re cell properties. The table cell is then a molecule which is comprised of individual atoms. Who knows, maybe this article will actually help an aspiring Figma plugin developer to create a really neat Figma Tables plugin, or at least, I hope it will. At the time of publishing, there weren’t any good ones for working with tables, but things might change fast. Quick Note: While writing this article, Figma introduced plugins. The target audience for this tutorial are designers (UX, UI) who have either already adopted Figma into their workflows or are planning to try Figma in their next design projects but aren’t sure how to get started. (To learn more, the folks at littleBits wrote a great article on the topic.) In terms of Atomic Design, they are atoms. To simplify the scope of this tutorial, let’s assume that the colors, fonts, and effects already exist as styles in the Figma project you’re about to begin. However, if you’re new to Figma and working with table data, I recommend watching the “ Getting Started” video to help you better understand Figma end-to-end, as well as the article “ How To Architect A Complex Web Table” that was published not too long ago here on Smashing Magazine. To follow along, you will need to have at least some understanding of the basic Figma concepts, its interface, and how to work with Figma components. To make it easy for you, I’ve prepared a mockup example that uses all of the components we need for this tutorial. We will also take a look at the basic elements of the table layout and how components can be included in the component library so that they can become part of the design system you are using. In this tutorial, we will talk about how tables can be created in Figma by using components and Atomic Design methodology. Moreover, you’ll be able to easily integrate the table into your design system. We’ll create a table using components, so that later on you could save a lot of time on scalability and edits. This is a detailed guide for those who are struggling with tables in Figma.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |