large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/@kamushken/figma-design-system-adding-components-by-instance-fbe1ffed00ac">medium bookmark / Raindrop.io</a> |  </p>
<div>
<hr>
<div>
<div>
<p>In my last recent post <a href="https://medium.com/@kamushken/one-year-in-figma-subjective-tour-through-pros-and-cons-644140b537d6"><em>One year in Figma</em></a> I was referring to an absence of search functionality in <a href="http://figma.com/">Figma</a> when you’re not a team. The problem is still remains: you obtain search input only after your components were published. Damn! But how to survive without, if you an indie UI player, like me?</p>
<p>Before I was almost at the end of development my <a href="http://setproduct.com/material"><strong>Figma material design system</strong></a>, I noticed that cloning the component and toggling it into another one by Instance probably could be a cure. So it’s kinda lifehack, but thanks God I can convert simple button component into whole table. And the last thing I have to do after — is simply to reset the size of cloned object sometimes.</p>
<h3>· Why not to just drag and drop as usual?</h3>
<p>As a UI freelancer either I used my product for my clients every day. And sooner or later I realized there’s no reason to drag and drop any object from ‘Components’ TAB. Especially when there are hundreds of it, and constant scrolling through the thumbnails is so complicated. After I completed a couple of projects, I stopped referring to components panel almost at all, because I got more familiar to the structure and design elements location. So I admitted it’s much more faster to use ‘Instance’ dropdown menu to convert elements.</p>
<h3>· How the toggling works?</h3>
<p>When you dealing with <a href="http://setproduct.com/mobilesystem">huge Figma library</a> every day, whether you want it or not after a couple of evenings will past away, you’ll learn the structure / organization of the components folder very well. <em>And now toggling by Instance becoming your friend:</em></p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*_sWzIZhY6D2Kj7XkFKYMXQ.gif" alt="1*_sWzIZhY6D2Kj7XkFKYMXQ.gif"></div>
<p>Watch this video on YouTube <a href="https://youtu.be/yFg3SVTIWMI"><strong>https://youtu.be/yFg3SVTIWMI</strong></a></p>
<h3>· What’s the pros and cons?</h3>
<p>I guarantee you, it’s super faster to add any new UI module onto the artboard in comparison to classic drag and drop from a tab. That&#8217;s the advantage. Honestly, you have to learn how to navigate faster within your system. Can you remember the path to iconic ‘Raised buttons’ or ‘Bottom bar’ with 4 icons? After a few app screens is done, you’ll be good and quick with toggling when every component location is remembered.</p>
<h4>What’s the <a href="http://setproduct.com/material">Figma Design System</a>?</h4>
<div><img src="https://cdn-images-1.medium.com/max/1200/1*87IpHG3p9MYmC6Z11qF74A.png" alt="1*87IpHG3p9MYmC6Z11qF74A.png"></div>
<p>More info at <a href="http://setproduct.com/"><strong>setproduct.com</strong></a></p>
<p><em>You can consider it as UI kit, prototyping kit or components library. It’s huge, and contains </em><strong><em>&gt;500</em></strong><em> UI components to cover designer’s every need to solve tasks faster. Every module made with attention to guidelines, scalability and 8dp grid. So, if you a material fan like me — I recommend you to try. The main purpose is a semi-automatisation of your always the same movements: creating buttons, cards, grids, tables and etc…</em></p>
<h3>· How to organize the system?</h3>
<p>Perfect organization of your design system is a primary thing. Use <em>emojis</em> in filenames to let to navigate with ease. Use “ / “ symbol when naming your objects to place it deeper in subfolders, or when creating instances like <em>Dark / Light / Accent</em> or etc. I usually keep the depth within 3 levels:</p>
<blockquote><p>Category / Type / Properties</p></blockquote>
<p>And in Material Design System it looks like</p>
<blockquote><p>Buttons / FAB / Accent</p></blockquote>
</div>
<div>
<p>So, toggling within Instance is a key to keep interrelationships between the components inside every design system. Need to switch the color from Primary to Accent? Select the color layer and perform it via ‘Instance’. The same for Stroke, Backgrounds (cards, popups, dropdowns), Icons and every thing in <strong>Figma Design System</strong>.</p>
<p><strong><em>Thanks for reading!</em></strong><em><br />Wish you good luck with design system development…</em></p>
<p><em>Best wishes, </em><a href="https://dribbble.com/kamushken"><em>Roman</em></a></p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Try <a href="http://setproduct.com/material">Figma Design System</a> now!</h3>
<ul>
<li>500+ material design modules at your service</li>
<li>Cross-customizable: simply edit master component for mass-effect</li>
<li>Equipped with simple and clear onboarding</li>
<li>Made with material.io guidelines followed within 8dp grid</li>
<li>Delivers Figma ‘Instance’ features at maximum confidence</li>
</ul>
<h4>Made for product, UI / UX designers</h4>
<p>Stop creating from scratch the same buttons, icons and modules along with every new project started. Use this huge library of predefined UI modules to complete your tasks faster.</p>
<h4>Made for web / app developers</h4>
<p>This system will let you dip into design process, learn or enhance prototyping skills. Use Figma ‘Instance’ feature to create layouts without design skills. No reason to edit pixels manually, unless you want to go deeper in customization.</p>
<h4>Made for IT managers / entrepreneurs</h4>
<p>Simply equip your development team with this premade design system architecture and save time without building it from scratch. Release your apps faster by using this Material Design System core in advance.</p>
</div>
</div>
</div>
<div><a href="https://medium.com/@kamushken/figma-design-system-adding-components-by-instance-fbe1ffed00ac">https://medium.com/@kamushken/figma-design-system-adding-components-by-instance-fbe1ffed00ac</a></div>


Design system in Figma. Adding components by Instance

Design system in Figma. Adding components by Instance

Top Stories