Figma’s Auto-Layout convinced me to switch completely to Figma. Here are some things I like in Figma: Usable components and styles Swapping between two things instantly Constraints Frames Variants. Also, I set up a simple cover page for the file. In Figma, this enables a thumbnail preview of all the components and helps with the brows ability of files. The cover page includes the file name and what phase it’s in design, development, or release. The status can be easily updated when the file progresses.
This page contains examples of the numerous ways that a component shows up in a company’s digital product. In the case of a text field component, for instance, the inventory page would show how the text field looks on abb.com compared to how it appears on an iPhone compared to how it shows up on an Android device. This page should also show the ways the component is being used incorrectly.
The test results data page aggregates all the data related to testing a component, including the feedback from users and stakeholders. This kind of history can save significant time by making sure that designers don’t try it again. Scope The page lays out a component’s scope so designers can bring a design to fruition. Creating the scope should be a collaborative process with the product owners, developers, and designers.
Was created the style rules page, a kind of catch-all for elements that, are not visible in the design. For example, how will the component render when you scroll down the page? It’s also where the design system team keeps track of unresolved questions or issues.
The role of a design system designer is multifaceted. Designing a design system involves so many roles. It’s an enormous undertaking and not necessarily the right move for all companies. Startups, for instance, might do better, to begin with, an out-of-the-box system such as Google Material Design or the IBM Carbon Design System, rather than dedicating extensive resources to creating one. Still, the time might come when that won’t suffice. Building a design system takes work and dedication; it also takes collaboration. Involving all stakeholders in the development system throughout the process was a priority. It was really iterative work with my whole team. It was all about listening to them and we took the time to learn and test it thoroughly and develop this structure. Having a structure that includes extensive documentation, including history and best practices, is at the core of the Figma design system.