What are Reddit's favorite Prototyping Apps?
Figma
Webflow
InVision
Marvel
Repetier
Anvil.works
Moqups
Macaw
Pencil Project
Framer
Mockplus
Principle
Avocode
Pixate
Justinmind
Lucidchart
Fluid UI
Penpot
Origami Studio
ProtoPie
Axure RP
MatterControl
UXPin
Pingendo
ForeUI
HotGloo
POP (Prototyping on Paper)
SwordSoft Layout
Antetype
Vev
Indigo Studio
Mockup Builder
Draftium
Grapedrop
Top Reddit reviews mentioning Prototyping Apps:
Definitely! This is just a prototype I made up in figma.
I started learning the basics of figma while earning this google design certificate and then from there just found lots of tutorials on youtube for specific things i wanted to incorporate.
And now I'm on the final step of actually publishing the design and programming it to be fully functional. Hope that helps!
A .py file is an actual programme when you run it BUT...
- if you want to make it an executable, check out the wiki entry
- for server, it depends how you are using it:
- just a programme running in the background (constantly or on a schedule): install correct version of Python and required packages on server and include in cron-job / task manager to run your programme using that Python
- an API service, look into using FastAPI or Flask
- a web service, look into using Flask or anvil.works
> I know what: let's use every fancy web-2k12 element we can think of in one incoherent jumble. All the cool kids do it.
Way too much going on. I cant really focus on anything. And after scrolling through it all, I still don't have a clue what it is all about.
If Boxxy were to design a website, this would be it.
[Edit] - just came across this website. That's the kind of scroll-website I like.
I designed an app like this as a case study for my portfolio, but built it as a standalone app that would pull data from UDisc so it wouldn't clutter up the app itself.
Here's the prototype.
Hey, founder of Anvil here - "end-to-end Python" is exactly what we do!
Anvil is a replacement for the whole web framework in pure Python - no HTML, no JS, no HTTP API requred[*]. Your client side code is in Python, your server-side code is in Python, you can call straight from one to the other - and you can publish it instantly on the web. It's astonishing how fast a good Python developer can put up a web app!
As well as our hosted service (which has a free tier), we also provide on-site installations for people who need their apps on their own servers. I'm happy to answer any questions.
[*] Unless you want those things, that is. You can use custom HTML layouts, and working with REST APIs is pretty slick.
Check Invision's reading list. It's pretty extensive and has a good variety of books around design
The ones I can personally vouch for from the list:
Just My Type
The Elements of Typographic Style
Thinking with Type
The Design of Everyday Things
The Vignelli Canon
Obey the Giant
Logo Design Love
Don't Make Me Think
Grid Systems in Graphic Design
How To Be a Graphic Designer Without Losing Your Soul
Meggs' History of Graphic Design
Designing Brand Identity
Steal Like An Artist
Other books I can think of from the top of my head:
No more rules: graphic design and postmodernism
Wally Olins. Brand New.: The Shape of Brands to Come
Branding: In Five And A Half Steps
The Medium is the Massage
Ways of Seeing
Looking Closer 4: Critical Writings on Graphic Design (The Whole series is great actually, worth getting all of them)
How to use graphic design to sell things, explain things, make things look better, make people laugh, make people cry, and (every once in a while) change the world
Graphic Design History: A Critical Guide
Milton Glaser: Graphic Design
I used Figma, a free UI Design / Prototyping tool similar to Sketch. It's been really awesome to work with thus far.
I got the original images from each team's respective wikipedia page. The logo is an SVG (scalable vector graphic) file, which you can edit.
Includes:
- Start Menu
- Taskbar (Centered and Left Alignments)
- App Indicators
- Jump Lists
- Hover Flyouts (Task View and Search)
- Quick Settings
- Microsoft Teams Chat
- Search
- Widgets Pane
- Notification Center
all made from scratch in Figma
Link to duplicate: https://www.figma.com/community/file/1035524331682993208/Shell-Template---Windows-11
I assume you mean more prototyping and wireframing than a presentational showcase mockup.
Figma is free, cross-platform, and can be run in the browser or as a desktop app on Mac/Windows. Lots of framework templates around the web if you are trying to match specific components. Easy mirroring on devices. You can do basic interactivity (tapping an area to go to another screen).
Otherwise, I work with whatever the client wants. InVision and Sketch are great too.
I use Sketch (Available only on Mac though!) & Invision.
Even as a wireframe - which can happen when the client cannot give you their branding stuff on time - it still has the use of allowing the client to click around the mockup and you can get better feedback on UX from there too.
> >give me Visual Basic 6's UI builder and all the greatness of a 21st century machine, so that I could finally whip up an UI without yelling profanities at the CSS reference [...] that clearly just wasn't built for this
> Can I interest you in a VB6-y design/code/deploy tool with no CSS or JS? It's all in Python, even in-browser: https://anvil.works
> unironically and seemingly willingly using Visual Basic in 2018
I use it almost every day at work for screen and ux design. I actually use a plugin called Overflow to generate my wireframe user flows. Before that I used Invision, especially freehand, for wireframes and such.
It appears to be a GUI design tool (sort of a middle-ground between Visio and Inkscape. See also Pencil) with a real-time collaboration backend similar to Google Docs or Etherpad.
If I was going to jump from Sketch to something else, it would be Invision Studio I've been on the early access for the last month of so and Invision are doing a much better job of building a toolchain than Adobe are. Sure it's not free, but if you're making your living from this, the subscription is not the deciding factor in my mind.
No reason to code your portfolio when Webflow can do everything you need. Anyways, you don’t need a flashy portfolio as a UX Designer. I switched over from Square and Wix because of my frustrations with how limited they are.
And you’re correct about the last part. Pay for the cheapest plan and add your domain on.
Check out this website clone of Apple’s IPad page that someone created through webflow here
Oh boy.
They're loading two different versions of jQuery (2.1.4 and 1.11.1). I'm tempted to email them and suggest loading at least four versions of jQuery. Two just doesn't suffice in this Web 2.0 era.
All the images are loading from uploads.webflow.com. Going to https://webflow.com/ brings up some completely different CMS thing. Seems legit.
They wrote "it's" instead of "its" and the font for their "learn about micro-apps" link is way too thin and looks ugly. You think with $31 million they could afford to check their grammar and use proper fonts. The fonts seem fine on retina screens, so thankfully the 5% of the world that use Apple hardware and no external screen will be able to read the text fine.
tl;dr: wat.
Update, I found a Figma plugin for Auto-Correct:
https://www.figma.com/community/plugin/754026612866636376/SPELLL---Spell-Checking-for-Figma
You could use figma. It's free for individuals to use.
and there are free resource kits out there to get you up and running pretty quick too. https://www.figmaresources.com/resources
I've tried to make the elements that we need while working on a product.
The buttons, inputs, paragraphs, etc can be customized and you can continue your design process.
Here's the link: https://www.figma.com/community/file/1020642186098908700
Thank you!
You can check out the interactive model here. For the full experience, buy a Wind Break/Accurate River
https://www.figma.com/proto/FYeSZskvWbkAKdOsH8TpAY/DGV?node-id=811%3A9&scaling=contain
Figma Link: https://www.figma.com/file/4KmNZ2tBwh0AgnDiAufyKF/Untitled
Used Anima create input field.
It is my first bad UI, hope I did it in correct way!
This might be more for the creative side — but I use this Figma template for building diagrams for my not-tech people at work. For me it’s easy to just search the name of the asset I’m looking for (cause like you I don’t really know the icons, but pretty familiar with the resources themselves), and then add text to it in the diagram like normal. Hope this helps someone and as a side note I don’t know if that template is/will be updated.
It's good except I really dislike the precedent of using a service like this. The price is pretty crazy too. https://webflow.com/pricing
> Cancellation and termination
> If you cancel the Service, your cancellation will take effect immediately. All published websites will be unpublished, however you will still be able to access the Webflow design tool for the remainder of the billing month. After the month is over, you will no longer have access to your web site and we may delete all information on your web site. We accept no liability for such deleted information or content.
Try to reformulate the question somehow, because now it extremely broad.
- You could use Python for HTML rendering on a server by template engine like Jinja, Django template engine, f-string and a lot of other stuff.
- You could create a front-end (and full-stack) on python by Anvil https://anvil.works/
- You could use Python for web development on tradition way, like backed development (django, flask, fastapi)
- You could use Python as serverless application language for AWS and GCP for creating web APIs
I'm a Product Design Manager at GitLab, and you are 100% right, we would be more than happy about any kind of contribution! 🙂
You can either reach out to me, have a look at our design system (https://www.figma.com/community/file/781156790581391771), or watch our UX showcases to see what kind of problem designers at GitLab are solving (https://m.youtube.com/playlist?list=PL05JrBw4t0Kq89nFXtkVviaIfYQPptwJz).
Figma. Figma is the answer. It works similarly to Sketch. It is cross platform and free to use, although it has a paid version but it is really only needed as a company. You can use it on the web aswell as a desktop app both versions works great. It's great in regards of collaboration due to the fact that multiple people can edit the same project at the same time, think Google Drive (docs, sheets, etc).
We, as in me and my colleagues, use it for all the web and app designs we make and it works great. I really recommend everyone to try it out.
Hi. Don’t worry - it’s very common! Get comfortable with not knowing stuff.
I hope the below makes some sense. Im exhausted from a long day and conscious that I have half my brain already shutting down :) …
I don’t know where you are in your learning journey, but have a look at the design thinking double diamond where you start by understanding the problem and scoping and sizing it properly before you ideate solutions.
The problem that you’re trying to solve can quite often not be the real problem - have a look at the 5 whys method for getting to the problem behind the problem. It also helps you break problems down into smaller, manageable (and understandable) pieces.
These methods can help you gain confidence in understanding more about the problem space which in turn gives you confidence to explore solution space.
Get used to forming hypotheses (the scientific method for testing whether something is true or not) for your problem statements.
It also can be value to switch between looking at the big picture, then diving down into a bit of detail, then back to big picture thinking. It stops you getting too caught up in the weeds or, at the other end, too high level and abstract.
Let me know how you get on! Happy to help!
You can check out the Figma prototype here
NOTE: This is just a fun exercise in hopes to communicate my desired organization. The project goals were simply to improve the overall organization of features by grouping like items together and ensuring that the color scheme in the app (using the Envel brand colors) made it painfully obvious which Envelope your card is pulling funds from.
Maybe next weekend I'm hoping to add ideal flows for:
- Creating an Envelope (but you can see some of the options right in the Envelope screen)
- Turning on/off Autopilot
​
Just wanted to get these designs out of my system as I, like so many of you, are switching from Simple and I'm desperate for a simple, easy to use, enjoyable banking experience. Enjoy!
I'm guessing InVision Studio is what the Macaw acquisition turned into. I don't see any reason for them to need to acquire any other design platforms at the moment other than to boost market share. I'm surprised it took them this long to reform the Macaw product with the likes of Sketch taking over the market. Macaw, at the time, was revolutionary but needed much more work and I'm sure the small team at Macaw didn't have the resources and were happy to be bought up.
There's a reason for that, and this website does an incredible job of tracing the path from cave paintings to that flat modernism you're talking about. Works way better on desktop than mobile.
It's only a simple prototype in Figma but here is the link if you want to play with it
ATM I've only built out "Timedoor" & "Directory > Branching". Link to the design file here https://www.figma.com/community/file/994716661475712123/Loki-TVA-TemPad
Oh, goodness. Hello! 😅
Yeah, I might be interested. I used to work at Capital One. Been doing product design for 8 years now, currently leading design systems at a Fortune 10.
Will have to check out the listings. 🤔
Edit: my card mockups, for the new One folks!
I used Figma, I've also just created this template so you can play around with it here: https://macosicons.com/resources/vs-code-pride
No degree needed, but definitely a decent portfolio. I would start here with learning.. https://www.designbetter.co/ https://www.invisionapp.com/inside-design/
and learn as much as you can. Pick a current design tool (Sketch, Figma, Invision Studio) and get some online freelance gigs. If you can present 3 or 4 well rounded projects and prove you understand modern concepts, youll have no problem getting a gig.
I think your best bet would be figma community files. Here's an example - https://www.figma.com/community/file/886138994287878976/Hotel-Website-Design
The main reasons of why you should go for a MacBook Pro is IMO - the trackpad, UNIX-like OS with Adobe/Sketch software, build quality and battery life. As stated before you should go for the previous year model of the MBP. The OSX operating system is also by far the best polished out there.
This is my primary choice but I only live in the terminal and Chrome browser with an occasional Sketch/Photoshop session every now and then.
However a Dell XPS is not a bad choice either. You could rock a solid Linux workstation and have Figma (great web based software) as a replacement for Sketch. You're out of luck with Adobe though.
With the XPS you can buy the 32gb RAM with 1000GB SSD model as well and have a beast of a machine for roughly the same price as a much weaker MBP. The trackpad on the XPS is the best of all PC laptops but it's still no way near the feeling of the MBP trackpad.
We can do text! Here's the blog post version:
https://anvil.works/blog/announcing-new-editor
Or my (rather less formal) post to the Anvil forum: https://anvil.works/forum/t/announcing-the-new-anvil-editor-beta/9756
This is exactly what the group_name property is for. Just call get_group_value() on any radio button in a group, and it will return the value property of whichever radio button in that group is selected. (A group of radio buttons is all the radio buttons whose group_name property has the same value)
There's more info (and examples) in the reference docs here.
Does that help solve your problem?
For low fidelity wire frames, I print out a bunch of these Printable Templates and just use pencil.
For slightly higher fidelity, I just use my design tool (Sketch or Figma). I try using the Material Design or iOS UI kit or our team’s existing component library to quickly arrange components, or just draw rectangles to see what it feels like.
First off, get rid of your dev team. I understand you have already sunk money into the project but you need to be able to cut your losses. I say this for 2 reasons: First, you need to know when your project is getting completed (and it sounds like that isn't the case), any good developer will more or less hold themselves accountable to a specific timeframe. Second, if these guys are writing bad code, "revamping" later on will literally require you starting from scratch. No good developer is going to waste time going through lines of poorly written code, it is more efficient to start over.
2 solutions, depending on your remaining budget.
Hire a new developer, interview them before you enter a contract. oDesk (http://odesk.com/) is a good place to start looking for someone. Hire someone in America!! Im assuming you are from here.
Create your own MVP prototype. Try Marvel (https://marvelapp.com/). It won't be a fully functioning product, but you can definitely use it to convey how your concept will work.
Personal opinion and from my perspective.
IBM spends waaaay more money on design and design tools. Also, IBM The Loop.
https://www.invisionapp.com/inside-design/invision-ibm-the-loop/
Lots of organizations recognize IBM as a design forward company.
Deloitte is cool, but it's a massive agency/consultancy shop. Prepare to be WORKED if you go that route.
Since this is entry level through, you may gather more widespread experience at Deloitte to make your next move.
Best of luck!
Sup,
here's a workaround without using an actual brush tool, just duplicate the file and play around with it.
https://www.figma.com/file/pA1oR9fmFNbfs0FtuwkDIl/Untitled?node-id=0%3A1
Hope you find it useful.
I think there are a couple of things that make this design look off:
- The color palette is "wrong". In the sense that elements further away from the user, like the background, should have darker colors. It's not like set-in-stone rule, but that's how it works in the real world due to light, and I think our brain finds it nicer.
- Your overall composition lacks order and proper spacing. The space between the back button and "Overview" text is almost non-existent and then below you have a lot of space from the "Prefix" text. Your cards have a weird layout, and it's comprehensible as you have and odd number of elements (5), and normally that doesn't work in a grid layout.
Addressing those issues would make a nicer design. I tried a quick implementation that you can look at: https://www.figma.com/file/Y7PX3J7Jj2kJFRNsVbmiY8/Untitled?node-id=0%3A1
Let me know what you think and if you have further questions :)
That's right! I created a single component called "Table Column" that has 11 variants. That allows me to quickly swap the data type by just changing the variant. You can preview the file here to see how things are built. It's on the Data Table page :)
I use Figma every day for work and would love to help if you have any questions about components, variants, responsive scaling, etc.
In any case these look great! Would love to help if you need any.
I actually am going to start a new project in Figma to build the UI of Satisfactory soon as well. Just finished a Zelda BOTW UI Kit using Figma to plan out blueprints like how you have it here is awesome. If you want to try diagram tools, maybe try whimsical. I use it to make some great diagrams.
In any case, I like this. Great job :) I just need to get to this point in the game lol… I usually end around when I unlock Nuclear but never build it lol.
Ignore any typos or lorem ipsum if it's still there, minor things. These are my super quick redesigns of the DCS homepage. Moved some things around, prioritised some other items. Increased contrast on a few colours including that Yellow they use. Idea is to have some hero sliders that really show off some of the planes and scenery.
This was a little over 2hrs work/play using Figma which is free and a game changer for UI design.
Crit away kids!
Yeah your job is to anticipate their questions. But you should set up a meeting with them where you walk through it and let them ask you questions. I guarantee they will bring up things that are blindspots for you. That's okay! You want to bring them in some the collaboration process makes their lives easier and they don't have to figure out design shit for you.
Make sure they know how it responsively works. Ask them if they want more than three breakpoints—Desktop, Tablet, Mobile. Figure out what happens on extra large screens by maybe setting up a max width before margins appear. Make sure your assets are exportable and they know what type of asset (ie. SVG vs PNG vs JPEG) should go where. If you're using PNGs and JPGs, use imageOptim (free) to crunch down the file size. Somewhere around 80% of users who abandon sites do so because of slow loading.
As far as the sequence of the user journey, ask yourself, "Where am I coming from? Why am I here? And where do I want to go next?" That's a good way to start annotating your designs. Try to think of not just the happy paths, but the recovery paths.
Read up on this developer guide. Figma to react.
Good luck.
Creating a webapp is the easiest way, otherwise you will need everyone to install Python and be able to install all of the libraries your programme depends on, which can be problematic.
You can create a webapp entirely in Python using Anvil.Works or consider using flask and following the tutorial on the blog of PythonAnywhere.com - you can try it out using the free tier.
This is exactly the kind of thing we're trying to make easy. Right now you can connect to a Google Sheet as your DB, which lets you to just build the customer-facing parts of the app and use the Sheets interface for general admin if necessary. That means you can get something online and working really quickly. Take a look at our Getting Started Guide for an simple example.
If you want to connect to an in-house DB, you can absolutely use the Uplink service for that. Also look out for services to connect to specific DBs coming soon.
Thanks!
Here is the link to the prototype app - https://marvelapp.com/805eai4
Keep in mind, it’s really clunky as it was my first UI/UX assessment and all, it’s only showcasing the improved aspects: e.g. optional FB log-in, fan-out Pokéball menu, take a selfie with Buddy Pokémon (I’d love to add an option to tap the Buddy Pokémon face to change expressions: happy, sad, angry, shocked), option to share said selfie via FB and as mentioned earlier, the swipe-able screens/tabs in Pokémon storage and Pokédex.
I would love to completely redo it all as my skills have improved, add the redesigned menu idea I did here and present it to Niantic. I think the selfie with Buddy Pokémon would be really fun but that’s just me haha
To be honest, since it's new, it's lacking a lot of stuff. Simple stuff. Like gradients and what not, but the future for XD looks promising.
I've been using Sketch + Invision/Craft and it's hands down a near perfect combo! Try it out!
I have actually been thinking of doing something like this lately… and created a discord server for it as well, but haven’t really hit go yet as I have been toying with the idea of making a Udemy course on creating design systems for a bit.
For reference, I made this Zelda BOTW kit a couple of months ago and have been wanting to start another one, but also try and collaborate and teach others as well.
Heck, here is a link to the discord to the channel I made called Figma Mentors. Maybe it can become something, but I have ADHD and love starting projects and then stopping them once I realize I am starting too many to keep up in the air haha.
Anyways, I am happy to discuss. And also happy to meet other designers to expand my community.
You thinking something like what I did with the Lizard spearmen here? I am new to Figma and have no idea what all it is capable of but honestly it was not too bad. And in the original OP's defense his art is a bit more subdued and works better with the white I think.
https://www.figma.com/file/rjm4sWz7sHEAOK45kStG48/Custom-Units---KnW-(Copy)?node-id=0%3A1
​
The battle is not until next week but I will give Roland your best wishes. Also I am realizing I need an apostrophe...
Hmm. This is interesting, because I honestly have thought of something like this, but from the other end. I have a lot of experience with Figma, setting up design systems, designing, etc, and have always wondered how I could share in a way that helped others. (Have thought of videos, teaching, courses, etc… I really don’t know) but I am happy to help others.
https://www.figma.com/community/plugin/735098390272716381/Iconify
Usually I have a separate design tab in Figma, where I work on the interface and its elements such as buttons, icons, etc. This plugin is always useful, it is essentially an aggregator.
They did an update in copying and paste this week you can explore this file and I think it will answer all of your questions https://www.figma.com/proto/MBZXtqRnnzqDOqFjlLvDhu/Copy-and-paste-playground-Community?page-id=0%3A1&node-id=58%3A1476
>But fuck me will figma hurry up and add a good spellcheck help a brother out.
There are a few spell check plugins you can use until spell check functionality (finally!) gets built into the program. https://www.figma.com/community/search?model_type=public_plugins&q=Spell%20check
Of course not! I choose the color on my own and the illustrations are coming from Figma Community! It is total free to use!! https://www.figma.com/community/explore this is an amazing community that I just notice that not a lot of people heard of it. 😅😅
You are probably looking for a tilable image:
https://www.figma.com/best-practices/working-with-images-in-figma/manipulating-images/
​
​
Also, I've seen plugins that simplify creating new patterns.
I'll also put a big +1 for Figma.
As a related-unrelated tangent that I can't help but go on is that on top of being a really fantastic design tool, Figma offers what I think is one of the absolute highest quality web applications you can find on the internet in 2020.
If you (or any passing by Redditor) have the time and interest take an afternoon to read through Figma's Engineering Blog. The engineering team over at Figma is doing some absolutely incredible work that is often running up against the absolute cutting edge of web technologies today. It's super cool to read about.
And here is the Figma file in case you want to copy and modify: https://www.figma.com/file/ux7rFuaJ9bMlzn4ou8ArLY/KITT?node-id=1%3A2
Try Figma. It's got nearly everything Sketch has except very specific plugins which only advanced users use but it works on every platform because it's web based (But has better performance than Sketch TBH).
It's a huge waste at this point to invest in a Mac OS just for Sketch.
> If Adobe and/or Sketch supported Linux then I'd probably favor that.
I work at an agency and our designers use Sketch. Which then gets put into InVision so being on Windows does not affect me at all.
However, a friend and I were looking for something similar to Sketch for a side project and came across Figma. Now, I haven't used it yet, but it looks very promising and is available for all environments. I believe it will also import Sketch files.
I fully agree. All the “greats” are often spoken about as if the compositions were almost directly given from heaven and therefore are great. But this is nonsense, composing is hard work and once you master the skill, there remains the super important aspect of ‘the right place at the right time in history’. About Mozart and his composing style this article is interesting.
Developers often don’t really use design tools like sketch. Having said that, if you want to do more with design as a developer; Figma is a great alternative and Invision Studio (currently in Early Access), is supposed to be the big cross platform sketch competitor.
The interesting thing about these design tools is that they are component based. Sketch calls it symbols. They force you to think different and think more in reusable components, like developers are already used to, which benefits the workflow.
Hey, UI/UX specialist and front end dev here; Hope this helps ya.
Decent start, decent idea, i might've gone overboard, but got plenty of notes for you here. Main point is there's no enticement to sign up, give us a look at what we're getting. i think invision do a great job of that.
DESIGN
- Colour wise, the blue and white is pretty painful to look at. id darken the blue a bit.
- the text (h4 especially) isnt really legible. the letter-spacing: -0.05em; on all headings is an absolute nightmare to look at for the smaller headings.
- Design is somewhat basic, looks a bit like a simple template. could do with some refinement if i'm honest.
- Mobile side needs alot of work, text sizes overflow the body, heads of space that doesnt work as white space.
- Mobile menu is on the left, but the menu slides out of the right?
- Cant search tutors before signing up? there's nothing to show me i'd benefit from giving you my details
- Clicking on the call to actions (FREE/$5 a month) does nothing, yet there is a hover function, seems confusing.
- Social icons are taking up a shit load of space, whats more important, likes or sign ups?
- there's not a single example of what i'll be looking at when im there, show us an example of a profile, how easy it is to search.
- Big slideshow isnt really working for me. seems a bit old school, the call to action seems a little lost there.
- login & register buttons look the same, they should look different.
OTHER
- HTML is a mess, styles and scripts dropped in what looks like random spots, try combine them into a concise set up.
- No SSL? if im paying i want it to be secure with all my details.
- i know its a wordpress template, but you've got a fuck tonne of page requests, combine as many as you can to make it clean on organised and faster.
I liked Pitch's old website so much that I wanted to develop it in Webflow to learn, to give the project to others to learn too, and to show once again what Webflow is capable of - 100% visual development, no custom code was used.
Link to the project to clone it too: https://webflow.com/website/Pitch-Webflow-Rebuild
I'm pretty sure you can.
Someone even remade the entire Breath of the Wild interface in Figma (though probably used other stuff for designing as well)
BOTW UI Kit: https://www.figma.com/community/file/965825767811358609
They do have a style guide with exact spacing and sizing guidelines for every WinUI component in windows including the titlebar. https://www.figma.com/community/file/989931624019688277
The main problem here is that UWP doesn't officially support icons in the titlebar, so the developers need to hack it in on an app-by-app basis.
Awesome! Great job! Now I’d like to see you do it using components! :)
I did a similar case study: Figma Community - Spotify mobile ui
I think you’re misreading the documents linked. Also, Figma has done some wonderful work on general security (especially if you’re on the organization plan). You can read more about it here
https://www.figma.com/blog/an-alternative-approach-to-rate-limiting/ Is the best blog on the subject.
To answer the api call— So you need userid tier and api call count, you could store the key as a userid and value as a stringified JSON object. Chances are you’ll be using that user object at other points during the resolution.
Why are you building these sites rather than creating flat mockups? Check out Figma if you don't have Sketch or Adobe XD - it's got a basic free plan.
Realistically though you shouldn't even be mocking up custom designs for potential clients, you should create yourself a portfolio of work that sells your skills and sell yourself to the clients by explaining how their business would benefit from hiring you. If you create a working demo for potential clients you're devaluing your work and you'll find it much harder to get them to pay what it's worth - after all you were happy to create a fully working website for nothing simply to get them on board.
If you would like to mimic as it works inside the reddit app I would argue to not go for either a UIScrollView or UICollectionView as neither of them are optimal for what you would like to achieve. Bear with me.
I made this quick wireframe of how this works, you can check it out here - it's a Figma link.
Basically you have your UIView which adds a content/containerView (naming doesn't really matter), let's go with contentView, as a subview. The contentView should be 2 * view.width with an initial x offsetof view.width * 0.5.
As there's no swiping or scrolling on that component in the app you just add a tap gesture recognizer to the view (not contentView). In the selector of the tap gesture recognizer you check if the touchPoint.x < view.width * 0.5, if that's true you animate the offset x of the contentView to 0, else you animate the contentOffset xto view.width, do these animations with a UIView spring animation of like 0.3 seconds. If you tap again after you have adjusted your offset x to show either side you should just animate back to the initial offset x. While on the topic of animations, pass .beginFromCurrentState as a animation option. That will make it possible to spam the button and have seamless animations without having to lock the ui like they do in the reddit app.
Hope this is to any help!
Android apps aside, HIGHLY recommend Figma
Have been using them for a couple years now and it's just a browser-based editor. Works beautifully. Quick. One of the easiest vector/image editor tools I have used.
I'm just on the free plan by the way.
Hi, author here. Yes, repeating data is essential and we do support it - you can create forms for individual widgets and then add them to containers dynamically. We show a very simple version of that in the 'Custom Components' section of our Getting Started Guide. We'll be releasing more elaborate data binding mechanisms soon, so do keep an eye out for those.
You're entirely right that we don't have a select element yet. Well spotted - we'll get right on it!
I started in the front-end world so thinking about wireframe and designs is something that I got good at over the years. Wireframing is really just knowing a couple of tools that you are comfortable with. I used to start out making a wireframe in PPT and then adding design things unto it later with PS. Now I use a tool called moqups to create a pretty detailed wireframe. Then that wireframe gets transformed to html and then the design touch-ups can be done straight to the CSS.
If you have a client that you came into and they have a working product without a wireframe what I would try to do is try to sell them on making a wireframe of their project first, so any changes or enhancements would get through a round of wireframe approval before a line of code is written. This of course can be staggered accordingly if you have a team working. If the client has no wish to spend thousands of dollars to make a wireframe, I would at least try to make a wireframe for the parts of the application that need enhancements and try to do that way, still billing them for that time.
If it's a new project I don't start without a wireframe. I have been burnt too many times by people not knowing what they wanted. With the wireframe there are no arguments or unforeseen holes in their logic. Also once you have a whole wireframe it is easier to create data schemas and, just in general, framework your application in a much better way since you know exactly what you're building.
I prefer Framer as a design tool compared to Sketch, (their smart guides are especially better), and it has a code tab where you can export CSS directly and add snippets of JavaScript to your designs
No worries. Invision breaks it down pretty well. Use Sketch for the UI, and Invision to make it interactive. Check out Invision, I just use my office's enterprise account. But, I believe they have a free version. https://www.invisionapp.com/
Sketch is more for UI design than prototyping, but overall it's taking more and more of my workflow.
You can find the file here and duplicate it, don't hesitate to subscribe to my profile on Figma community if you want to, have fun:
https://www.figma.com/community/file/1044950288766440991/GET-JINX
collected follwing relevant points related to staking which might aid decision making
a)If staking multiple nodes, stakers cannot choose the distribution of stake. When a staker stakes more than one node operator, their stake is split algorithmically based on the total amount of POLYX the user decides to stake. To balance the amount of POLYX staked across operators, the operators with more staked will receive less of the user’s POLYX and those with less staked will receive more. Balancing the staking mechanism in this way helps to further secure the chain.
b) polymesh staking design demo here https://www.figma.com/proto/BeJj8sQxYFOkzrVtik268m/Dashboard-UI-v1?page-id=1634%3A9&node-id=1634%3A3402&viewport=2332%2C1865%2C0.31942078471183777&scaling=min-zoom
c) from polymesh tokenomics
The Node Operator commission, a percentage of block rewards claimed by the Operator, is subtracted from that Operator’s payable staking rewards. For Polymesh mainnet launch, the maximum Operator commission will be set to 10% and is subject to change via PIP.
Remaining block rewards are split as a percentage of POLYX staked on the Node Operator. This includes the Node Operator's stake.
based on point c, it appears that for operators with higher commision, lower rewards get distributed to stakers as a result of subtracting the commision from operators payable staking rewards...
So i would choose any operator with lower commision and distibute it evenly to spread my risk(if i choose only one and that gets busted then my entire stake is at risk)..
Okay, after viewing your file I think I understand better what you're trying to do.
Short answer: This isn't how components work, unfortunately. It simply won't work.
Long answer: The reason this doesn't work is because the purpose of master components isn't to be edited with new information/text for it to be propagated out to the instances. They're more of a placeholder so that the instances can be created for quick prototyping and editing.
As you discovered, you can't put master components inside of components because that's simply not how they're designed to work. You'd need master components for each new slide you create which simply defeats the purpose of the components as a rapid prototyping tool.
That said, you can create multiple slides with their own master components and instances. The slides will just have to stay frames and not components.
https://www.figma.com/file/HLhaQy0TA6gdWIZxTcAdAU/slide3-(Copy)?node-id=0%3A1
I agree with your second paragraph, but not the first. I don't think there's any problem with OP using Figma's free plan for this project.
From Figma's FAQ page:
>Starter plan
The Starter plan is designed for individual and very small teams to get started with Figma. You get unlimited files in the Drafts space, which you can share with unlimited viewers. Additionally, you can co-edit with unlimited editors in the Team space on up to 3 files (limited 3 pages per file).
Check this plugin called Style Organizer. Let's say your H1 is Lato, size 30 (and you saved it as a text style) it finds all Lato, size 30s and you can easily merge them as H1. Not sure if this is exactly what you are looking for but it is pretty good, works with color styles too.
Leverage and existing front end framework.
Have the designer and developers work from the same library.
For Example:
https://chakra-ui.com with https://www.figma.com/community/file/971408767069651759
Oh, I see. That's actually a free illustration pack from figma with some adjustments. You can check it out here, they are of excellent quality. I'm not a designer by myself, so I definitely wouldn't be able to do something like that
You can practice your design skill on figma by imitating other's website or system. Remember to find a suitable UI kit which would save you a lot of time! For example, if you are designing a website, you can download Material Design UI kit, or if you are designing a desktop app, you can download VsCode UI kit.
Alright, here it is: https://www.figma.com/proto/9G2JVIiZKmWBQVDfZ8SFfY/Taskernet-Improved?page-id=0%3A1&node-id=1%3A15&viewport=321%2C48%2C0.31&scaling=scale-down&starting-point-node-id=1%3A15 (this is a clickable prototype btw. click in an empty area to see what you can interact with)
I kept the current layout, but used Material design components to make it look nice without losing anything you currently have on the site. I only designed the desktop layout but the mobile version will have the exact same design except there will be 1/2 cards per row and a hamburger menu on the right.
This is a rough prototype I quickly put together. Didn't have time to polish it even more (I definitely may have broken some material design guidelines here), but I can finish it later if you decide to use it.
Let me know what you think!
You can apply a grid to any frame. So, frame your section and you're able to apply grids, constraints, auto layout, etc.
https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/nested-grids/
I use Webflow almost lovingly. It’s free the whole way to make a site until you launch it (but you will need to activate your subscription to embed your custom domain), and their non-ecomm plans are very affordable.
If you’ve got any questions about it too PM me, it’s a pretty advanced builder but it’s not hard either somehow.
This is yours right? I always use this for crystal farming. The Amethyst Lumps show in the Home menu but I don't think the Inazuma locations are available yet.
Figma has its own getting started resources and videos that can help with this.
Also think the reason people aren’t being direct is figma is a UI tool and you asked about it in a UX subreddit which has made people point out that there is a need to differentiate between the two.
Aaaaanyway yea check out their YouTube channel tons of good stuff and hope you enjoy the tool it’s fantastic and only getting better.
https://www.figma.com/resources/learn-design/getting-started/
Depends on company/team size. As u/tildesigndouspart said, bigger companies will have design systems (libraries) established that contain just about every type of UI element you'd use in the app/website. It includes color, icons, layouts/spacing, typography, buttons, inputs, forms, etc - literally everything. So when it comes to designing the product, you have building blocks to choose from and it's like piecing together a puzzle. Take a look around at Uber's Design System on Figma for a good idea of what these design systems contain.
Now with startups or smaller companies that don't have established products, yes there will be more Googling of how to design specific elements or flows. Overtime the Googling will settle down as the design system becomes established, and I assume devs will follow the same route as they improve their knowledge of code. But devs do experience a lot of technical issues that UI designers won't run into as much, so yeah they'll be doing more Googling than us in general.
Apple can afford to put that much time and money into TINY features, and it's probably worth it with how many users they reach around the world. Rather than Googling what to use, Apple studies these things in depth then builds them out from scratch which leads to innovation. LOTS of work goes into the tiny details at those companies while most smaller ones can't afford it.
In my career I've gone from Fireworks > Photoshop > Sketch > Figma. Been using Figma for about 2 years now, and absolutely love it. They have a free tier so you can try it out: https://www.figma.com/
For reviews I use a combination of IBMs playbacks
And thankfully Figma makes PowerPoint like presentations possible so any information you have collected and synthesised from research can be reused in a quick presentation...
Try these cool templates from femke.design
Hope this helps
If you need any help trying to figure out accessibility ratings you should try Stark. Also available for Sketch. Only drawback is that it doesn't work with gradients.