Figma, de op één na meest gebruikte tool voor het ontwerpen van gebruikersinterfaces (en de eerste meest gebruikte tool bij het tellen van alleen Windows OS), heeft de digitale ontwerpindustrie de laatste tijd echt stormenderhand veroverd, met zelfs Adobe XD die hun eigen versie van Figma's multiplayer-functie uitbracht (noemde het "coediting").

Het actuele onderwerp bij Figma is echter de release van plugins - uitbreidingen die Figma-gebruikers op Figma kunnen installeren om extra functionaliteit mogelijk te maken of om hun ontwerpworkflow te verbeteren.

Laten we eens kijken naar enkele van de beste Figma-plug-ins dusver.

1. Pijl Auto (maak gebruikersstromen)

Arrow Auto voegt stroomdiagramfunctionaliteit toe aan Figma, wat handig is voor het maken van gebruikersstroomkaarten. Selecteer twee objecten op het canvas en met Arrow Auto kunt u een connector ertussen tekenen. U kunt de stromen ook op aanvraag verbergen en tonen.

Autoflow is een goed (en misschien leuker uitziend) alternatief, maar Arrow Auto heeft meer functies, waaronder de mogelijkheid om van connectorrichting te wisselen en ook verbonden objecten te verplaatsen terwijl de connectoren intact blijven.

2. Hoek (gebruik apparaatmodellen)

Met Hoek kunt u uw schermen (dwz tekengebieden) weergeven vanuit een aantal realistische of mat-effect apparaatframes die elk worden geleverd met een verscheidenheid aan hoekopties en schaduwstijlen.

Indrukwekkend, ze zijn ook 100% vector.

Tekengebied Studio is niet helemaal hetzelfde, omdat het een hele reeks willekeurige 3D-objecten op het canvas kan invoegen (zoals een kiwi bijvoorbeeld). Als je alleen om apparaatmodellen geeft, zou ik Angle installeren. Vector 3D is vergelijkbaar met Artboard Studio, maar voert werkelijke 3D-middelen uit.

3. Master (beheer componenten eenvoudiger)

Master biedt een betere manier om componenten te beheren, zoals de mogelijkheid om meerdere identieke objecten in een component te veranderen, componenten in andere Figma-bestanden te dupliceren en nog veel meer.

Document opschonen, wel ... reinigt uw document! Het verwijdert verborgen lagen, sorteert ze intelligent, hernoemt ze naar wens, ontkoppelt groepen met één laag en rondt zelfs dimensies af op de dichtstbijzijnde pixel. Een geweldig hulpmiddel voor obsessieve nette freaks!

Similayer laat je eenvoudig lagen selecteren op basis van hun gelijkenis met de laag die momenteel is geselecteerd. Laten we zeggen dat je een schaduwstijl wilde veranderen die op een aantal verschillende elementen wordt gebruikt: Similayer zou dat kunnen doen.

U kunt het ook gebruiken om meerdere componenten in batch opnieuw toe te wijzen.

Ontdek het juiste marktaandeel van alle viewport-afmetingen en pas ze vervolgens toe op frames. Haar krankzinnig hoe nuttig is dit!

Viewport-gegevens zijn live afkomstig van StatCounter.

Er zijn tientallen geweldige takenlijsten, maar deze bestaat binnen Figma. Het is niet ontworpen om uw dagelijkse takenlijst te vervangen, maar het is een handiger manier om uw ontwerpspecifieke taken bij te houden zonder Figma te hoeven verlaten. Heb een lijst van veranderingen maken? Noodzaak om vast te stellen prioriteiten?

Zo ja, installeer Todo.

Breng een visueel consistente / hiërarchische lettertypeschaal tot stand door een basisgrootte en schaalfactor te kiezen en sla de resultaten vervolgens op in uw document voor continue referentie (als em or px).

9. Inhoudsrol (voeg beter-dan-lorem-ipsum-inhoud in)

Content Reel voegt "echte" inhoud in uw ontwerp in. Snel adres nodig? Of een avatar? Om de een of andere reden kan ik geen a bedenken single naam wanneer je er een nodig hebt? Content Reel staat achter je.

Ontwerpen met echte gegevens zorgt ervoor dat het ontwerp er na de ontwikkeling niet vreemd uitziet en helpt ons ook bij het ontwerpen voor randgevallen.

Of uw app nu een API heeft of u wilt gewoon handmatig een tabel met gegevens maken, met Google Sheets Sync kunt u deze gegevens in principe rechtstreeks naar Figma synchroniseren. Het lijkt op Content Reel, maar in plaats daarvan definieer je de gegevens zelf. Het is handig voor ontwerpers die ultra-realistische mockups willen bouwen met gegevens uit hun eigenlijke niche (of live-applicatie), en het is vooral handig voor teams die willen ontwerpen met dezelfde gegevensbibliotheek.

Maak verbluffende, aanpasbare grafieken met gegevens uit Excel, Numbers, Google Spreadsheets of importeer eenvoudig een lokaal CSV- of JSON-bestand. Datavizer is een geschikt alternatief, maar Chart kan ook synchroniseren met live JSON (dwz u kunt Chart verbinden met een REST API).

Alle pictogramlettertypen, precies in Figma. Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji - noem maar op.

Vrij iconisch eigenlijk.

Als de gedachte aan het verkennen van animatie je bang maakt, of als je bang bent om van tool te wisselen om toegang te krijgen tot geavanceerde animatiefuncties, maakt Figmotion animatie een stuk minder angstopwekkend. De animaties zijn ook gemakkelijk over te dragen, omdat ze gebaseerd zijn op webtechnologieën.

14. Gesplitste vorm (maak kolommen ... en zo)

Een interessante methode voor het maken van kolommen, Split Shape splitst bijvoorbeeld een rechthoek in meervoudig rechthoeken waaruit u vervolgens kolommen (of rijen of wat dan ook) kunt maken. Split Shape kan voor verschillende dingen worden gebruikt als men buiten de kaders denkt! 😁

BG verwijderen is een webtool die de achtergrond van bitmapafbeeldingen verwijdert en ze effectief omzet in transparante PNG's. BG verwijderen voor Figma doet in wezen hetzelfde, maar binnen Figma.

Als je Adobe Photoshop alleen hebt opgepot zodat je achtergronden kunt verwijderen, kun je het nu verwijderen en waarschijnlijk maak ongeveer 80 miljard miljoen GB aan ruimte vrij op uw SSD 😌.

Populaire Figma-plug-ins

Er zijn een paar Figma-plug-ins die ik niet noemde omdat ze al super bekend zijn bij gebruikers van andere UI-ontwerptools zoals Sketch. U waarschijnlijk heb deze al:

Bonus Figma-plug-ins

Deze Figma-plug-ins zijn geweldig, maar je hebt ze misschien niet vaak nodig (of helemaal niet). Het is leuk om te weten dat ze er zijn.

En tenslotte alle Figma-plug-ins (voor het geval je er gewoon geen genoeg van kunt krijgen!).

Wilt u de ins en outs leren van het ontwikkelen van uw eigen plug-ins, om uw workflow of de workflow van anderen te verbeteren? Bekijk Figma's Plug-in Documenten.

Bron: https://www.sitepoint.com/15-figma-plugins-to-help-you-design-better/?utm_source=rss