Figma: Design, prototype og samarbeid på tvers av virksomheter

figma

De siste månedene har jeg bidratt til å utvikle og integrere en svært tilpasset WordPress-forekomst for en klient. Det er ganske balansen mellom styling, utvide WordPress gjennom egendefinerte felt, egendefinerte innleggstyper, et designrammeverk, et barnetema og tilpassede plugins.

Den vanskelige delen er at jeg gjør det fra enkle modeller fra en proprietær prototypeplattform. Selv om det er en solid plattform for visualisering og design, oversettes det ikke lett til HTML5 og CSS3. Legg til alle de andre iterasjonene, og dagene mine blir ganske frustrerende med at fremgangen er ekstremt treg.

Ett stykke av puslespillet er at designbyrået rett og slett overleverte prototypene, uten å gi noen form for master-stilark ... så vi jobber for å oppnå det ved å eksportere prototypene til luftskip, og deretter oversette CSS til WordPress. Antall nødvendige trinn og hull mellom plattformene gjør det til en vanskelig prosess. For ikke å nevne å prøve å forenkle kompleksiteten for hastighet og skalerbarhet

figma

figma sentraliserer mye av dette arbeidet med en plattform som muliggjør design, tilbakemeldinger og samarbeid gjennom hvert medlem av teamet ditt, inkludert:

  • Designere - Samarbeid i sammenheng og i sanntid. Aldri bekymre deg for at filene dine er utdaterte eller overskriver hverandres arbeid.
  • Interessenter - Send en lenke for å samle inn tilbakemeldinger, få endringsforespørsler, og la interessenter gjøre kopioppdateringer i designene dine.
  • Utviklere - Ingeniører har alltid tilgang til gjeldende sannhetskilde og kan inspisere elementer, eksportere eiendeler og kopiere kode.

Figma har noen unike funksjoner:

  • Boolske operasjoner - Med fire formler: union, subtrahere, kryss og ekskludere, kan du kombinere ethvert sett med formlag med presisjon.
  • komponenter - Bygg raskere og mer konsekvent med gjenbrukbare og skalerbare elementer på tvers av filene dine. Få tilgang til lag i hvert tilfelle slik at du intuitivt kan redigere og overstyre tekst og bilder integrert.
  • begrensninger - Skaler designen slik at den passer til hvilken som helst skjermstørrelse ved å feste objekter til en overordnet ramme, knipse objektet til et rutenett, eller til og med ved å lage komponenter som skalerer.
  • Enhetsrammer - Presenter designene dine i de rette miljøene. Du kan til og med velge mellom stående og liggende modus.
  • Interaksjoner - Gjør prototypene dine levende ved å definere interaksjoner ved klikk, mens du svever, mens du trykker og mer.
  • Overlegg - Med relativ og manuell posisjonering har du full kontroll over hvor og hvordan overlegg vises.
  • Pixel-perfeksjon - Interaktiv redigering på 60 bilder per sekund gir deg ultra skarpe, piksel-perfekte forhåndsvisninger og eksport.
  • Prototyping - Bygg raskt strømmer ved å koble til skjermer og legge til elementer som interaksjoner, overganger, overlegg og mer. I stedet for å synkronisere med andre verktøy, bare del en URL for å få tilbakemelding.
  • Responsive Design - Strekk layoutene dine og se hvordan de vil reagere på endringer i skjermstørrelse.

Responsiv prototyping

  • Rulling - Aktiver horisontal, vertikal eller hvilken som helst retning som ruller innenfor individuelle former eller hele foreldrerammen.
  • Stiler - Synkroniser farger, tekst, rutenett og effekter på tvers av alle prosjektene dine. Oppretthold færre tekststiler og juster designene dine på forskjellige enheter med Figmas unike rutenettstiler.
  • Teambiblioteker - Del komponenter og stiler i Figma - ikke behov for delte stasjoner eller ekstra verktøy. Du og teamet ditt kontrollerer hvordan og når endringer blir rullet ut med enkle publiseringsarbeidsflyter.
  • Vektornettverk - Figma skapte penneverktøyet for å være mer intuitivt, og muliggjorde direkte manipulering samtidig som det bevares bakoverkompatibilitet med stier.

Til enterprise kunder, kan Figma føre til konsistens, effektivitet og sikkerhet i stor skala. Plattformen gjør det mulig for bedriftsklienter å enkelt administrere designsystemer med teambiblioteker og muligheten til å laste opp og dele egendefinerte skrifter over hele organisasjonen. Enkel pålogging, tilgangskontroller og aktivitetslogger er inkludert.

Kom i gang med Figma

Figma har et stort utvalg av opplæringsprogrammer som de vedlikeholder på Youtube kanal, her er en Kom i gang-video:

figma gir utviklere muligheten til å inspisere, kopiere, eksportere eiendeler og kopiere CSS direkte fra designfilen. Du kan også aktivere eksisterende arbeidsflyter med integrasjoner, inkludert luftskip, Avokode, Jira, dropbox, ProtoPieog Prinsipp for Mac. De har også en robust API.

Prøv Figma gratis

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.