-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (95 loc) · 5.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Lo-fi Wireframe Kit for Figma</title>
<meta name="description" content="A robust library of over 100 wireframing components that helps you explore more ideas, faster.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Lo-fi Wireframe Kit for Figma">
<meta property="og:description" content="A robust library of over 100 wireframing components that helps you explore more ideas, faster.">
<meta property="og:url" content="https://www.lofiwireframekit.com/">
<meta property="og:image" content="https://www.lofiwireframekit.com/css/main.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,[email protected],300..1000,0..1&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#074EE8">
</head>
<body>
<!-- Add your site or application content here -->
<!-- <div class="header">header</div> -->
<div class="grid-container">
<div class="header-image">
<img src="css/export.svg" />
</div>
<div class="header-intro">
<h1>Lo-Fi Wireframe Kit for Figma</h1>
<p class="tagline">A robust library of over 100 wireframing components that helps you explore more
ideas, faster.</p>
<div class="header-actions">
<a class="button is-primary" href="https://www.figma.com/community/file/887892609124245416/Lo-fi-Wireframe-Kit">Open file</a>
<a class="button" href="https://www.buymeacoffee.com/davewhitley">Donate</a>
</div>
<p class="donate">If you've found this library useful, please consider donating a few bucks to support updates and
maintenance of this library.</p>
<!-- <p>Scroll to see more info</p> -->
</div>
<div class="features-container">
<div class="features is-first">
<h2>Why use Figma?</h2>
<p>I've used several standalone wireframing tools before, but I've always come across limitations. It might not
have an element I need, prototyping capabilities, or good collaboration. By combining this kit with Figma's
native features, you get prototyping, sharing, commenting, and real time collaboration — <strong>no more
jumping between tools</strong>.</p>
</div>
<div class="features">
<h2>Why use wireframes?</h2>
<p>Wireframes help you and your team understand the big picture. For you, rapid prototyping helps you explore
more ideas, faster. For your team,
wireframing helps you communicate high-level aspects of the design and get consensus early in the process.
Don't let yourself get bogged down in unnecessary details too early.</p>
</div>
<div class="features">
<h2>Kit features</h2>
<ul>
<li>Over 100 components including buttons, text fields, tabs, images, and multiple variations.</li>
<li>Flexible components that work for both mobile and desktop.</li>
<li>Easily customize colors and typography.</li>
<li>Makes full use of Figma's design features like color styles, text styles, auto layout, constraints, and
smart component structure.</li>
<li>Over 200 icons included in the library from <a href="https://feathericons.com/">Feather Icons</a>.</li>
<li>Markup components are included to add stickies, annotations, and flow chart lines.</li>
</ul>
</div>
</div>
<div class="footer is-first">
<h2>Support the creator</h2>
<p>If you find this kit useful, please consider <a href="https://www.buymeacoffee.com/davewhitley">donating</a>!
You’d be
supporting maintenance, new components, and
future updates. </p>
</div>
<div class="footer">
<h2>Feedback and help</h2>
<p>Want to leave feedback? Found a bug? Feel free to <a href="mailto:[email protected]">email</a> or contact me
on <a href="https://twitter.com/davecave">Twitter</a>.</p>
</div>
<div class="footer">
<p>Made by Dave Whitley ©2020 <a href="http://davewhitley.com">davewhitley.com</a></p>
<a href="https://www.producthunt.com/posts/lo-fi-wireframe-kit-for-figma-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-lo-fi-wireframe-kit-for-figma-2" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=263283&theme=dark" alt="Lo-fi Wireframe Kit for Figma - Free component library that helps you explore ideas, faster | Product Hunt Embed" style="width: 250px; height: 54px;" width="250" height="54" /></a>
</div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-11362003-6', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>